MC, 18:33 poniedziałek, 16.04.2012 r.
jQuery i Tablesorter - Proste sortowanie tabel na stronach internetowych
Sortowanie danych zawartych w tabelach na stronach internetowych jest możliwością dającą użytkownikowi takiej strony duży komfort działania. Pytanie jak zrobić to w sposób efektywny dla odwiedzającego stronę i wygodny dla webmastera? W tym wpisie chciałbym polecić bibliotekę opartą na jQuery, którą zwykłem stosować w takich sytuacjach - Tablesorter.
Czym jest Tablesorter?
Jak już wspomniałem we wstępie Tablesorter jest biblioteką napisaną w oparciu o jQuery, która pozwala na bardzo wygodne dostarczenie możliwości sortowania danych w tabelach na stronach internetowych. Z doświadczenia wiem, że jest oba bardzo lekka i relatywnie szybko działająca (testowałem ją na naprawdę sporej liczbie danych). Z kolei od strony webmastera patrząc jest ona prosta do wprowadzenia, więc w krótkim czasie możemy ją wdrożyć na strony i tabele już istniejące.
Jak to wygląda?
Poniżej przedstawiam prymitywny przykład użycia biblioteki Tablesorter.
| Imię | Nazwisko | Wiek | |
|---|---|---|---|
| Adam | Nowak | adam-nowak@...com | 30 |
| Katarzyna | Piekarska | katarzyna-piekarska@...com | 47 |
| Lidia | Andrzejewska | andrzejewska-lidka@...com | 17 |
| Paweł | Mańkiewicz | 1990pawel@...com | 22 |
Po bardziej elegancki przykład pod względem wyglądu tabelki odsyłam na stronę producenta: jQuery plugin - Tablesorter
Jak użyć biblioteki Tablesorter?
Oczywiście aby móc użyć tej biblioteki należy ją dołączyć do strony internetowej razem z jQuery. Następnie musimy mieć tabelę o odpowiedniej strukturze. Poniżej znajduje się kod HTML odpowiadający powyższej tabeli z przykładu.
<table id="tabelaDoSortowania" style="margin: 0 auto;">
<thead style="text-align:left; background-color: #8E9BFF; cursor: pointer;">
<tr>
<th>Imię</th>
<th>Nazwisko</th>
<th>Email</th>
<th>Wiek</th>
</tr>
</thead>
<tbody>
<tr>
<td>Adam</td>
<td>Nowak</td>
<td>adam-nowak@...com</td>
<td>30</td>
</tr>
<tr>
<td>Katarzyna</td>
<td>Piekarska</td>
<td>katarzyna-piekarska@...com</td>
<td>47</td>
</tr>
<tr>
<td>Lidia</td>
<td>Andrzejewska</td>
<td>andrzejewska-lidka@...com</td>
<td>17</td>
</tr>
<tr>
<td>Paweł</td>
<td>Mańkiewicz</td>
<td>1990pawel@...com</td>
<td>22</td>
</tr>
</tbody>
</table>
<thead style="text-align:left; background-color: #8E9BFF; cursor: pointer;">
<tr>
<th>Imię</th>
<th>Nazwisko</th>
<th>Email</th>
<th>Wiek</th>
</tr>
</thead>
<tbody>
<tr>
<td>Adam</td>
<td>Nowak</td>
<td>adam-nowak@...com</td>
<td>30</td>
</tr>
<tr>
<td>Katarzyna</td>
<td>Piekarska</td>
<td>katarzyna-piekarska@...com</td>
<td>47</td>
</tr>
<tr>
<td>Lidia</td>
<td>Andrzejewska</td>
<td>andrzejewska-lidka@...com</td>
<td>17</td>
</tr>
<tr>
<td>Paweł</td>
<td>Mańkiewicz</td>
<td>1990pawel@...com</td>
<td>22</td>
</tr>
</tbody>
</table>
W następnej kolejności należy wskazać bibliotece do sortowania tabel, która tabela ma zostać objęta jej działaniem. Zrobimy to poprzez identyfikator ID tabeli. Wygląda to następująco:
<script type="text/javascript">
$(document).ready(function()
{
$("#tabelaDoSortowania").tablesorter();
}
);
</script>
{
$("#tabelaDoSortowania").tablesorter();
}
);
</script>
Komentarze (1)