Ale serio?

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):

<table id="myTable" class="tablesorter">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Due</th>
<th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td>jsmith@gmail.com</td>
<td>$50.00</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td>Bach</td>
<td>Frank</td>
<td>fbach@yahoo.com</td>
<td>$50.00</td>
<td>http://www.frank.com</td>
</tr>
<tr>
<td>Doe</td>
<td>Jason</td>
<td>jdoe@hotmail.com</td>
<td>$100.00</td>
<td>http://www.jdoe.com</td>
</tr>
<tr>
<td>Conway</td>
<td>Tim</td>
<td>tconway@earthlink.net</td>
<td>$50.00</td>
<td>http://www.timconway.com</td>
</tr>
</tbody>
</table>

Wejściowy html

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:

<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery.tablesorter.min.js" type="text/javascript"></script>

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:

<script type="text/javascript">
$(document).ready(function() {
$("#myTable").tablesorter();
});
</script>

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:

<link rel="stylesheet" href="css/style.css" type="text/css" media="print, projection, screen" />

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:

/* 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;
}

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

Wynikowy html

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"