Sortowanie tabel za pomocą jQuery

Nie ważne czy wyświetlamy dane z bazy prostym SELECTem, czy piszemy tabelę z ręki, to na stronie tabela wygląda mniej więcej tak (już za całym htmlem):

[sourcecode language=”html”]

[/sourcecode]

Zatem mamy bardzo przykładową tabelkę z jakimiś danymi. HTML jest prawidłowy i posiada wszystkoo co potrzeba, jeśli owiniemy to w tag body, nad nim dodamy tag head, a w nim title, a na koniec całość owiniemy w tag html.

Oczywiście taka tabela jest totalnie biedna na stronie, wygląda nieprofesjonalnie, a przy dużej ilości wierszy jest po prostu mało czytelna. Wystarczy dodać użytkownikom możliwość sortowania tabeli (a potem może jakieś filtrowanie też…).

Zatem dodajmy jQuery i dodatek TableSorter do nagłówka:

[sourcecode language=”html”]


[/sourcecode]

Oczywiście wersja jQuery może być już inna. Najlepiej pobrać najnowszą ze strony jQuery.org, zaś TableSorter pobieramy stąd.

Odpalamy TableSorter’a w nagłówku head, w bardzo prosty sposób:

[sourcecode language=”html”]

[/sourcecode]

Teoretycznie jQuery już powinno być na stronie na której chcemy dodać sortowanie w tabelach. Jeśli więc jest to musimy tylko znaleźć gdzie jest $(document).ready i dodać swój kod.

Powyższy kod daje to, że sortowanie będzie działać dla tabeli o id = myTable. Do tabeli w htmlu została też przypisana klasa CSS = tablesorter, którą to ładnie pomalujemy CSSem. Bez styli sortowanie już powinno działać, ale nie wiemy po czym sortujemy i w jakiej kolejności. Dzięki stylom się dowiemy 🙂

Dodajemy więc link do cssa w head:

[sourcecode language=”html”]

[/sourcecode]

Teraz do katalogu css wrzucamy plik style.css i z 3 obrazki. Pierwszy to strzałak zachęcająca do sortowania, drugi to strzałka w dół oznaczająca że dana kolumna jest sortowana rosnąco i trzeci, strzałka w góre, informująca o odwrotnym sortowaniu. Oczywiście zamiast strzałek możemy wstawić ptaszki, kwiatki lub co kto potrzebuje… Zatem przykładowy style.css:

[sourcecode language=”css”]

/* tables */
table.tablesorter {
font-family:arial;
background-color: #CDCDCD;
margin:10px 0pt 15px;
font-size: 8pt;
width: 100%;
text-align: left;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
background-color: #e6EEEE;
border: 1px solid #FFF;
font-size: 8pt;
padding: 4px;
}
table.tablesorter thead tr .header {
background-image: url(bg.gif);
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
}
table.tablesorter tbody td {
color: #3D3D3D;
padding: 4px;
background-color: #FFF;
vertical-align: top;
}
table.tablesorter tbody tr.odd td {
background-color:#F0F0F6;
}
table.tablesorter thead tr .headerSortUp {
background-image: url(asc.gif);
}
table.tablesorter thead tr .headerSortDown {
background-image: url(desc.gif);
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
background-color: #8dbdd8;
}

[/sourcecode]

Dobra to tyle. Teraz tabelka wygląda mniej więcej tak:

Można ją wreszcie sortować! Cała operacja zajęła może z 10 minut…. Zaś jeśli mamy już gdzieś tabelki to dodanie sortowania oznacza dodanie tylko javascriptów i odpowiednie ich skonfigurowanie. Może 5 minut, ale to maks 🙂

Demko wrzucam tutaj: http://demo.beling.pl/jquery-i-tablesorter/.

 language="html"