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