jQuery plugins - Tablesorter
dec 17

Tablesorter

Táblázat tartalmának rendezése

Verzió: 2.0.5
Kiadás dátuma: nincs adat
Fejlesztő: Christian Bach
Liszensz: MIT, GPL
  • 1899
  • 9359
  • 0
  • -

Bevezető

Már szerepel az oldalon egy táblázatokhoz kapcsolódó plugin, a DataTables. Ez a plugin szinte mindent tud, amire szükségünk lehet egy táblázat használatánál, azonban előfordulhat olyan szituáció is, hogy ez már kifejezetten sok és ennél lényegesen kevesebbel is beérnénk, pl. ha mondjuk csak szimplán sorba rendezhetnénk tetszőleges szempont szerint a táblázatunk adatait.

Erre kifejezetten jó megoldás lehet a Tablesorter plugin, amely annyira nem is "esetlen", mint ahogy ezt itt most beharangoztam. Itt csak az alapvető funkciókat mutatom be, de a fejlesztő oldalán pár beépülő modul segítségével további funkciókkal is felruházhatjuk a plugin-t.

Az azt hiszem magától értetődő, hogy inicializáláskor lehetőségünk van egyszerre több szempont (oszlop) szerint is rendezni adatainkat, azonban a Tablesorter segítségével a táblázat használatakor is lehetőségünk nyílik erre: egy előre definiált billentyű (alapértelmezett esetben ez a SHIFT) nyomva tartásával egymás után több oszlopot is tetszőleges sorrendbe állíthatunk.

Implementálás

CSS

            <link rel="stylesheet" type="text/css" href="css/style.css" />
          

JavaScript

            <script type="text/javascript" src="js/jquery.js"></script>
            <script type="text/javascript" src="js/jquery.tablesorter.js"></script>
          

Deklaráció

            $(document).ready(function(){
              $('#tablazat').tablesorter();
            });
          

Használat

A táblázatoknál a plugin megfelelő működéséhez elengedhetetlen a THEAD és TBODY tag-ek használata.

Teljes paraméterlista

  • cancelSelection: a táblázat fejrészében a címek kijelölhetőségének engedélyezése/tiltása
    (true | false) (alapértelmezett: true)
  • cssAsc: CSS szelektor a növekvőleg rendezett oszlop fejrészéhez
    (alapértelmezett: 'headerSortUp')
  • cssDesc: CSS szelektor a csökkenőleg rendezett oszlop fejrészéhez
    (alapértelmezett: 'headerSortDown')
  • cssHeader: CSS szelektor a rendezetlen oszlop(ok) fejrészéhez
    (alapértelmezett: 'header')
  • headers: az egyes oszlopok sorba rendezhetőségének engedélyezése, tiltása.
    (alapértelmezett: null)
    Példa: egy 4 oszlopos táblázatban az első és az utolsó oszlop rendezésének tiltása:
    (az oszlopok sorszámozása 0-val kezdődik!)
                    $(document).ready(function(){
                      $('#tablazat').tablesorter({
                        headers: {
                          0: { sorter: false },
                          3: { sorter: false }
                        }
                      });
                    });
                  
  • sortList: egy 2 dimenziós tömb formájában megadhatjuk a kezdeti sorbarendezést:
    az egyes tömbök első eleme az adott oszlop sorszáma, második eleme pedig a sorbarendezés iránya (0 : növekvő | 1 : csökkenő) (alapértelmezett: null)
    Példa: egy több oszlopos táblázatban csak két oszlopra szabjuk meg a kezdeti szabályt - első szerint növekvő, negyedik szerint csökkenő:
                    $(document).ready(function(){
                      $('#tablazat').tablesorter({
                        sortList: [[0,0], [3,1]]
                      });
                    });
                  
  • sortForce: az előző paraméterhez hasonlóan egy 2 dimenziós tömb segítségével megadhatjuk egy vagy több oszlop sorbarendezését. Ez azonban nem egyenértékű a sortList paraméterrel: míg az csak a kezdeti sorrendet szabja meg (amely az első változtatás után érvényét veszti), addig ez a kezdeti sorbarendezésre nincs hatással, helyette az első változtatáskor lép életbe
    (alapértelmezett: null)
                    $(document).ready(function(){
                      $('#tablazat').tablesorter({
                        sortForce: [[0, 0]] 
                      });
                    });
                  
  • sortMultiSortKey: segítségével megadhatjuk, hogy mely billentyű lenyomva tartásával lehessen több oszlop szerinti rendezést megvalósítani ('shiftKey' | 'altKey' | 'ctrlKey') (alapértelmezett: 'shiftKey')