Wtyczka tablesorter do jQuery
tablesorter
Elastyczne narzędzie do sortowania tabel po stronie klienta
Autor: Christian Bach
Wersja: 2.0.5 (rejestr zmian)
Licencja: Podwójna licencja (do wyboru!): MIT lub GPL.
Gorąca prośba! Nie dołączaj do swoich stron plików tablesorter.js z mojego serwera. Pobierz je i umieść na swoim serwerze.
Pomoc! Jeśli podoba Ci się wtyczka Tablesorter i jesteś hojny, zajrzyj do listy życzeń jej autora w Amazonie albo wpłać na jego konto dowolną kwotę.
Komentarze i wyrazy uznania można wysyłać na adres: christian at tablesorter dot com.
Spis treści
Informacje ogólne
Tablesorter to wtyczka do jQuery, za pomocą ktróej można sprawić, aby zwykła tabela HTML zawierająca elementy THEAD i TBODY dała się sortować na różne sposoby bez konieczności odświeżania strony. Wtyczka ta przetwarza i sortuje wiele typów danych, wliczając dane dołączane do komórek tabel. Oto niektóre z jej najbardziej przydatnych funkcji i właściwości:
- Sortowanie wielokolumnowe
- Sortowanie tekstu, adresów URI, liczb całkowitych, walut, liczb zmiennoprzecinkowych, adresów IP, dat (formaty krótkie i długie ISO) oraz określeń czasu. Z łatwością można te możliwości rozszerzyć.
- Sortowanie drugorzędne (tzn. zachowanie kolejności alfabetycznej podczas sortowania wg jakichś innych kryteriów)
- Możliwość rozszerzania poprzez system widżetów
- Poprawne działanie w wielu przeglądarkach internetowych: IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+
- Niewielki rozmiar
Jak zacząć
Aby móc używać wtyczki Tablesorter, należy dołączyć plik biblioteki jQuery i wtyczki Tablesorter w elemencie <head> dokumentu HTML:
<script type="text/javascript" src="/ścieżka/do/jquery-latest.js"></script> <script type="text/javascript" src="/ścieżka/do/jquery.tablesorter.js"></script>
Wtyczka Tablesorter działa na zwykłych tabelach HTML. Tabele te muszą jednak zawierać elementy THEAD i TBODY:
<table id="myTable" class="tablesorter">
<thead>
<tr>
<th>Nazwisko</th>
<th>Imię</th>
<th>E-mail</th>
<th>Winny</th>
<th>WWW</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>
Najpierw należy „nakazać” wtyczce Tablesorter, aby posortowała tabelę po wczytaniu dokumentu przez przeglądarkę:
$(document).ready(function()
{
$("#myTable").tablesorter();
}
);
Jeśli klikniesz dowolny nagłówek tabeli, to zauważysz, że już można sortować jej zawartość! Podczas inicjacji tabeli można także przekazać pewne parametry konfiguracyjne. Poniższy kod powoduje posortowanie tabeli wg pierwszej i drugiej kolumny w kolejności rosnącej.
$(document).ready(function()
{
$("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} );
}
);
UWAGA! Wtyczka tablesorter automatycznie wykrywa większość typów danych, takich jak liczby, daty i adresy IP. Więcej informacji na ten temat znajdziesz w Przykładach
Przykłady
Na podstawie tych przykładów zorientujesz się, jakie są możliwości wtyczki tablesorter. Aby zadziałały, w przeglądarce musi być włączona obsługa JavaScriptu (ogólnie do działania wtyczki tablesorter obsługa tego języka musi być włączona).
Proste przykłady- Ustawianie początkowej kolejności sortowania przy użyciu opcji
- Praca z cyframi!
- Wyłączanie nagłówka za pomocą opcji
- Sortowanie tabeli za pomocą łącza znajdującego się poza tą tabelą
- Wymuszenie domyślnej kolejności sortowania
- Zmienianie domyślnego klucza sortowania wielokolumnowego
- Ustawianie początkowej kolejności sortowania przy użyciu metadanych
- Wyłączanie nagłówka za pomocą metadanych
- Ustawianie parsera kolumn za pomocą metadanych
- Wyzwalacze sortEnd i sortStart (wyświetlanie postępu sortowania)
- Dodawanie danych do tabeli za pomocą Ajaksa
- Inicjowanie wtyczki Tablesorter na pustej tabeli
- Praca z kodem HTML w komórkach
- Rozszerzanie domyślnych opcji
- Włączanie trybu diagnostycznego (debugowania)
- Pisanie własnego parsera
- Pisanie własnych widżetów
Konfiguracja
Wtyczka tablesorter ma wiele opcji, które można jej przekazywać podczas inicjacji:
| Właściwość | Typ | Wartość domyślna | Opis |
|---|---|---|---|
| cancelSelection | Logiczna | true | Określa, czy tekst znajdujący się w nagłówku tabeli (TH) również ma być wybierany. Sprawia, że nagłówki działają bardziej, jak przyciski. |
| cssAsc | Łańcuch | "headerSortUp" | Reguła CSS określająca wygląd nagłówka, gdy jego kolumna jest posortowana rosnąco. Przykład ze skórki niebieskiej:
th.headerSortUp {
background-image: url(../img/small_asc.gif);
background-color: #3399FF;
}
|
| cssDesc | Łańcuch | "headerSortDown" | Reguła CSS określająca wygląd nagłówka, gdy jego kolumna jest posortowana malejąco. Przykład ze skórki niebieskiej:
th.headerSortDown {
background-image: url(../img/small_desc.gif);
background-color: #3399FF;
}
|
| cssHeader | Łańcuch | "header" | Reguła CSS określająca wygląd nagłówka, gdy jego kolumna jest nieposortowana. Przykład ze skórki niebieskiej:
th.header {
background-image: url(../img/small.gif);
cursor: pointer;
font-weight: bold;
background-repeat: no-repeat;
background-position: center left;
padding-left: 20px;
border-right: 1px solid #dad9c7;
margin-left: -1px;
}
|
| debug | Logiczna | false | Znacznik logiczny określający, czy mają być wyświetlane informacje diagnostyczne, które są pomocne podczas programowania. |
| headers | Obiekt | null | Obiekt instrukcji dotyczących kontrolek kolumn w następującym formacie: headers: { 0: { opcja: ustawienie}, ... } Aby na przykład wyłączyć sortowanie wg dwóch pierwszych kolumn, można napisać taką instrukcję: headers: { 0: { sorter: false}, 1: {sorter: false} } |
| sortForce | Tablica | null | Definiuje dodatkowy wymuszany rodzaj sortowania, które będzie stosowane w dodatku do dynamicznych wyborów dokonywanych przez użytkownika. Opcji tej można na przykład użyć do alfabetycznego sortowania nazwisk po tym, gdy użytkownik wybierze sortowanie, w wyniku którego niektóre wiersze mają takie same wartości, jak daty lub wysokość długu. Pozwala uniknąć sytuacji, w której dane wyglądają na nieposortowane wg drugiego kryterium. |
| sortList | Tablica | null | Tablica instrukcji dotyczących sortowania poszczególnych kolumn i kierunku w następującym formacie: [[indeksKolumny, kierunekSortowania], ... ]: indeksKolumny to numer kolumny licząc od lewej i zaczynając od zera, a kierunekSortowania to wartość 0 (sortowanie rosnące) lub 1 (sortowanie malejące). Przykładowy argument, który spowoduje posortowanie tabeli rosnąco najpierw wg pierwszej, a potem wg drugiej kolumny: [[0,0],[1,0]] |
| sortMultiSortKey | Łańcuch | shiftKey | Klawisz umożliwiający zaznaczanie dodatkowych kolumn w sortowaniu wielokolumnowym. Domyślnie jest to klawisz Shift. Inne możliwości to ctrlKey i altKey. Źródło: http://developer.mozilla.org/en/docs/DOM:event#Properties |
| textExtraction | Łańcuch lub funkcja | simple | Określa metodę wybierania danych z komórek tabeli w celu ich posortowania. Standardowe opcje to simple i complex. Z opcji complex należy korzystać, gdy w komórkach tabeli znajduje się kod HTML: <td><strong><em>123 Main Street</em></strong></td>.Opcja complex może spowalniać sortowanie dużych tabel. Wówczas można napisać własną funkcję pobierającą dane o następującej definicji:
var myTextExtraction = function(node)
{
// Pobiera dane z kodu HTML i je zwraca
return node.childNodes[0].childNodes[0].innerHTML;
}
$(document).ready(function()
{
$("#myTable").tableSorter( {textExtraction: myTextExtraction} );
}
);
Wtyczka tablesorter przekaże obiekt jQuery z zawartością bieżącej komórki, którą można przetworzyć i zwrócić. Dziękuję Joshowi Nathansonowi za przykłady. |
| widthFixed | Logiczna | false | Określa czy kolumny tabeli mają mieć stałą szerokość. Opcja ta jest przydatna, gdy używana jest wtyczka Pager. Wymagane jest dołączenie wtyczki wymiarowania jQuery. |
Pobieranie
Pełna wersja — wtyczka, dokumentacja, dodatki, motywy: jquery.tablesorter.zip
Bierz co chcesz — umieść przynajmniej wymagane pliki na serwerze w katalogu dostępnym dla przeglądarek internetowych. Zapisz sobie tę lokalizację.
Wymagania:- jQuery (w wersji przynajmniej 1.2.1)
- jQuery Metadata 2.1 (3,7 kb dodatek wymagany do ustawiania opcji śródliniowo)
- jquery.tablesorter.pager.js (3,6 kb, wtyczka do tablesorter do dzielenia tabel na strony)
- Zielony — obrazy i reguły CSS tworzące zielone nagłówki
- Niebieski — obrazy i reguły CSS tworzące niebieskie nagłówki (takie, jak w przykładach)
Zgodność z przeglądarkami
Wtyczka Tablesorter została przetestowana pod kątem zgodności z następującymi przeglądarkami z włączoną obsługą JavaScriptu:
- Firefox 2+
- Internet Explorer 6+
- Safari 2+
- Opera 9+
- Konqueror
Zgodność z przeglądarkami biblioteki jQuery
Pomoc
Pomocy można szukać za pośrednictwem listy mailingowej jQuery.
Dostęp do listy mailingowej jQuery można uzyskać także poprzez Nabble Forums.
Ludzie
Autor: Christian Bach.
Dokumentacja: Brian Ghidinelli na podstawie świetnej dokumentacji Mike’a Alsupa.
Dziękujemy Johnowi Resigowi za fantastyczną bibliotekę jQuery