niedziela, 28 lutego 2010

Hackowanie jQuery tablesorter

Jeżeli ktoś chciał mieć w swojej aplikacji webowej tabelę z danymi i mieć niejako "za darmo" sortowanie oraz stronicowanie tych danych, to może wpadł na javascriptową bibliotekę jQuery oraz dwa dodatki do niej: tablesorter oraz tablesorter.pager.

Jeżeli ktoś chce zobaczyć jak to działa to przykład jest dostępny stronie dodatku:

http://tablesorter.com/docs/example-pager.html

Całość jest na licencji MIT, więc można spokojnie w tym pogrzebać - na szczęście, bo nie jest idealnie :)

Hack 1 - zmiana pozycjonowania dla toolbara pagera

Wtyczka stonicująca ma toolbar (następna strona, poprzednia itd.), który się umieszcza pod tabelką. Super, ale czasami chcemy mieć go nad tabelką itd. a on pozycjonuje się absolutnie. Ta właściwość CSS jest zaszyta w kodzie wtyczki, no ale przecież go mamy :)

Edytujemy plik jquery.tablesorter.pager.js i fragment:

c.container.css({
  top: o.offset().top + o.height() + 'px',
  position: 'absolute'
});


Modyfikujemy wg. uznania :) ja dałem position: 'static'


Hack 2 - pobieramy aktualne sortowanie tabeli

Czasami chcemy wiedzieć jak aktualnie posortowana jest tabela. Można tego łatwo się dowiedzieć, trzeba jednak zmodyfikować jquery.tablesorter.js

Szukamy fragmentu (ok. 630 linii):

}).bind("applyWidgets",function() {
  // apply widgets
  applyWidget(this);
});


i dopisujemy:

}).bind("applyWidgets",function() {
  // apply widgets
  applyWidget(this);
}).bind("getSortList", function(e, fun) {
  fun(config.sortList);
});



Co nam to da? Możemy teraz do tablesortera przekazać funkcję (tak, JavaScript to język funkcyjny w pewnym sensie!), która wykona się na aktualnej liście sortowania, np.

var al = function(x) { alert(x) }
$("#table").trigger("getSortList", al);



Hack 3 - pobieramy tajne informacje z pagera

W pagerze możemy mieć podobny problem - powiedzmy, że chcemy się dowiedzieć na której stronie znajduje się obecnie użytkownik, a także ile elementów mieści się na stronie obecnie.

Nic prostszego - zaczynamy od edycji jquery.tablesorter.pager.js, szukając fragmentu (ok. 145 linia):

this.construct = function(settings) {
  return this.each(function() {


i dopisując, podobnie jak w tablesorterze, nowe zdarzenia:

this.construct = function(settings) {
  $(this).bind("getPage", function(e, fun) {
    fun(config.page);
  }).bind("getPageSize", function(e, fun) {
    fun(config.size);
  });

  return this.each(function() {


Teraz wyciągnięcie interesujących nas szczegółów to nic trudnego:

var al = function(x) { alert(x) }
$("#table").trigger("getPage", al);
$("#table").trigger("getPageSize", al);


Pobrane w ten sposób informacje możemy wykorzystać np. przechowując je w sesji, aby użytkownik po odświeżeniu strony miał dane nadal posortowane tak samo oraz aby był na dokładnie tej samej stronie wyników.

2 komentarze:

  1. Oj, nie jest idealnie, true, true...
    Dołączanie pagera sieje mi błędami (n[0] is undefined). Po podpięciu wersji niezminimalizowanej tablesortera okazało się, że problem jest w linii 251:
    checkCell = (n[0].length-1)

    Gdy odłączam pagera, wszystko wraca do normy.
    Fajny plugin ale jeszcze sporo pracy przed Bachem. ;-)

    OdpowiedzUsuń
  2. :) My tablesortera odrzuciliśmy już w połowie marca. Teraz wykorzystujemy DataTables (http://datatables.net/) i jest o niebo lepiej ;)

    OdpowiedzUsuń