Wtyczka tablesorter do jQuery

25 kwietnia 2012
1 gwiadka2 gwiazdki3 gwiazdki4 gwiazdki5 gwiazdek

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

  1. Informacje ogólne
  2. Jak zacząć
  3. Przykłady
  4. Konfiguracja
  5. Pobieranie
  6. Zgodność
  7. Pomoc
  8. Podziękowania

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 Metadane — ustawianie opcji śródliniowo Przykłady zaawansowane Wtyczki uzupełniające

Konfiguracja

Wtyczka tablesorter ma wiele opcji, które można jej przekazywać podczas inicjacji:

WłaściwośćTypWartość domyślnaOpis
cancelSelectionLogicznatrueOkreś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;
}
debugLogicznafalse Znacznik logiczny określający, czy mają być wyświetlane informacje diagnostyczne, które są pomocne podczas programowania.
headersObiektnull 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} }
sortForceTablicanullDefiniuje 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.
sortListTablicanullTablica 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ńcuchshiftKeyKlawisz 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 funkcjasimple 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.
widthFixedLogicznafalseOkreś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)
Dodatki:Motywy:
  • 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

Dyskusja

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *