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.