Stronicowanie i sortowanie tabeli

 

Stronicowanie tabeli

Atrybut DATAPAGESIZE określa liczbę rekordów jaka ma być jednorazowo prezentowana na ekranie. Możemy zdefiniować deklarację przedstawionej poprzednio tabeli w następujący sposób: 

<TABLE BORDER=1 ID="Tableka" DATAPAGESIZE=5 DATASRC="#Baza">

W takim przypadku na ekranie wyświetalych będzie tylko 5 rekordów bazy.

Wykorzystując JavaSript możemy swobodnie zmieniać wyświetlane strony za pomocą metod nextPage() oraz prevoiusPage(). Wprowadźmy na stronę odpowiednie klawisze umożliwiający spacerowanie po kolejnych stronach: 


<img src="prev.gif" width="1"6 height=16 border=0 onClick="tabelka.previousPage()">
<img src="next.gif" width="1"6 height=16 border=0 onClick="tabelka.nextPage()">

Możliwa jest także zmiana wielkości strony poprzez zwykłe przypisanie. Możemy na przykład wprowadzić klawisz ustawiający wielkość strony na 5 rekordów: 

<img src="newsize.gif" width="1"6 height=16 border=0 onClick="tabelka.dataPageSize=5">

Sortowanie tabeli

Aby posortować generowaną tabelkę (przyjmijmy sortowanie względem typu nadwozia), wystarczy wykorzystać kolejny parametr naszej kontrolki: 


<PARAM NAME=SortColumn VALUE="typ nadwozia">

Możliwe są także dynamiczne zmiany sposobu sortowania. Wywołanie funkcji JavaScript: 


function wgnadwozia() {
	Baza.Sort="typ nadwozia"
	Baza.Reset();
}

spowoduje zmianę kolumny, według której posortowane są rekordy. Metoda Reset() powoduje ponowne wygenerowanie tabeli według nowych kryteriów.

Filtrowanie danych

Filtrowanie danych w tabeli polega na wyświetleniu w niej tylko tych rekordów, które odpowiadają pewnemu ściśle określonemu kryterium. Funkcja wyświetlająca w tabeli tylko te modele z naszej bazy, które posiadają nadwozie typu sedan może mieć postać: 


function ktozPoznania() {
	Baza.FilterColumn="typ nadwozia sedan";
	Baza.FilterValue="sedan";
	Baza.FilterCriterion="=";
	Baza.Reset();
}

Parametr FilterValue określa klucz, względem ktorego będą filtrowane dane, natomiast FilterCriterion określa sposób porównywania danych z kluczem (możliwe są następujące operatory: <, <=, >, >=, =, <>).

 

producent model typ nadwozia liczba drzwi


Sortuj wg producenta

Sortuj wg modelu

Sortuj wg typu nadwozia

Wyświetl tylko modele 5 drzwiowe

 



<object id="Baza" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83" width=0 height=0>
    <param name=DataURL value="dane.txt">
    <param name=TextQualifier value=",">
    <param name=UseHeader value=True>
    <param name=SortColumn value="model">
  </object> </p>
<p></p>
<p></p>
<table border=0 id="tabelka" datasrc="#Baza"
 datapagesize=6 align="center" cellpadding="5" width="430" cellspacing="0">
  <thead bgcolor="white"> 
  <tr bgcolor="#A9C0C7"> 
    <td>producent</td>
    <td>model</td>
    <td>typ nadwozia</td>
    <td>liczba drzwi</td>
  </thead> <tbody> 
  <tr bgcolor="#CBD8D7"> 
    <td> 
      <div datafld="producent" dataformatas="html"></div>
    </td>
    <td> 
      <div datafld="model"></div>
    </td>
    <td> 
      <div datafld="typ nadwozia"></div>
    </td>
    <td> 
      <div datafld="liczba drzwi" ></div>
    </td>
  </tr>
  </tbody> 
</table>
<div align="center"><br>
  <img src="prev.gif" width="1"6 height=16 border=0 alt=""
 onClick="tabelka.previousPage()"> <img src="next.gif" width="1"6 height=16 border=0 alt=""
 onClick="tabelka.nextPage()"><br>
</div>
<div onClick="wgproduc()" align="center">Sortuj wg producenta</div>
<div align="center"><br>
</div>
<div onClick="wgmodelu()" align="center">Sortuj wg modelu</div>
<div align="center"><br>
</div>
<div onClick="wgnadwozia()" align="center">Sortuj wg typu nadwozia</div>
<div align="center"><br>
</div>
<div onClick="pokdrzwi()" align="center">Wyświetl tylko modele 5 drzwiowe</div>
<div align="center"><br>

<script language="Javascript">
function wgproduc() {
	Baza.Sort="producent"
	Baza.Reset();
}
	
function wgmodelu() {
	Baza.Sort="model"
	Baza.Reset();
}

function wgnadwozia() {

      Baza.Sort="typ nadwozia"

      Baza.Reset();

      }

function pokdrzwi() {

      Baza.FilterColumn="liczba drzwi";

      Baza.FilterValue="5";

      Baza.FilterCriterion="=";

      Baza.Reset();

      }

</script>

Wstecz