Ikona sortowania

25 kwietnia 2012 · 0 komentarzy

1 gwiazdka2 gwiazdki3 gwiazdki4 gwiazdki5 gwiazdek (głosów: 2, średnia ocena: 5,00)
Loading ... Loading ...

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.
Aktualizacja: pojawiła się nowa wersja wtyczki oraz tłumaczenie tej strony na język rosyjski (tablesorter.ru)
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. Demo
  3. Jak zacząć
  4. Przykłady
  5. Konfiguracja
  6. Pobieranie
  7. Zgodność
  8. Pomoc
  9. 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

Demo

Imię Nazwisko Wiek Suma Rabat Różnica Data
Bruce Almighty 45 $153.19 44.7% +77 Jan 18, 2001 9:12 AM
Bruce Evans 22 $13.19 11% -100.9 Jan 18, 2007 9:12 AM
Bruce Evans 22 $13.19 11% 0 Jan 18, 2007 9:12 AM
Clark Kent 18 $15.89 44% -26 Jan 12, 2003 11:14 AM
John Hood 33 $19.99 25% +12 Dec 10, 2002 5:14 AM
Peter Parker 28 $9.99 20.9% +12.1 Jul 6, 2006 8:14 AM

Wskazówka! Można posortować kilka kolumn na raz. W tym celu należy nacisnąć klawisz Shift i trzymając go kliknąć dwie, trzy, a nawet cztery kolumny tabeli!

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>[email protected]</td>
    <td>$50.00</td>
    <td>http://www.jsmith.com</td>
</tr>
<tr>
    <td>Bach</td>
    <td>Frank</td>
    <td>[email protected]</td>
    <td>$50.00</td>
    <td>http://www.frank.com</td>
</tr>
<tr>
    <td>Doe</td>
    <td>Jason</td>
    <td>[email protected]</td>
    <td>$100.00</td>
    <td>http://www.jdoe.com</td>
</tr>
<tr>
    <td>Conway</td>
    <td>Tim</td>
    <td>[email protected]</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ść Typ Wartość domyślna Opis Odnośnik
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. Przykład
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} } Przykład
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. Przykład
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]] Przykład
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		 Przykład
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. 		Przykład
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. Przykład

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

Narzędzia

FavoriteLoadingDodaj do przechowalni

Dodaj komentarz









Newsletter

Subskrybując nasz newsletter masz pewność, że nie ominie Cię żadna nowość w serwisie!