Ez egy Kecs.es blog webfejlesztési ötletek, tanácsok, észrevételek

TinyTable: adatok rendezése, megjelenítése a lehető legkönyebb módon

Régebben találtam egy 2.5Kb!!! méretű kompakt JavaScript kódot, mellyel nagyon gyorsan lehet adatokat rendezni. Egyetlen hátránya talán, hogy táblázat alapú, tehát a tableless szemléltet kicsit el kell dobni miatta, de nagyon sok munkát vesz le a vállunkról. Szerintem nem is pocsékolom tovább az időt, hanem nézzétek meg a demó oldalt, és utána leírom a használatát.

Előnyei:

• nagyon kicsi javascript file
• stabil rendezést biztosít akár 3000 rekord esetében is. (tapasztalatok alapján)
• saját kontrollerekkel könnyen bővíthető
• AJAX-al is vezérelhető

Ismert hibái:

• Alapból nem kezeli a 2009-08-21 -es dátumformátumot (de ezt kijavítottam)
• Alapból csak ASC rendezésben lehet inicializálni (de ezt kijavítottam, hogy DESC legyen)
• Csak a jQuery legfrissebb (jelenlegi: 1.3.2-es) változatával kompatibilis
• valamint a jQuery pngFix kiegészítőjének $("img[@src$=png]).pngfix(); metódusát nem hagyja érvényesülni. (csak az [@src$=png] résszel van baja)

De nézzük a használatát:

<!-- Head -->
<link rel="stylesheet" href="tinyTableStyle.css" />
<!-- /Head -->
<!-- body -->
<table cellpadding="0" cellspacing="0" border="0" id="table" class="sortable">
  <thead>
    <tr>
      <th class="nosort"><h3>ID</h3></th>
      <th><h3>Név</h3></th>
      <th><h3>E-mail</h3></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Ezekiel Hart</td>
      <td>(627) 536-4760</td>
    </tr>
  </tbody>
</table>
<div id="controls">
  <div id="perpage">
    <select onchange="sorter.size(this.value)">
      <option value="5">5</option>
      <option value="10">10</option>
      <option value="20" selected="selected">20</option>
      <option value="50">50</option>
      <option value="100">100</option>
    </select>
    <span>Elem oldalanként</span>
  </div>
  <div id="navigation">
    <img src="images/first.gif" width="16" height="16" alt="Első oldal" onclick="sorter.move(-1,true)" />
    <img src="images/previous.gif" width="16" height="16" alt="Előző oldal" onclick="sorter.move(-1)" />
    <img src="images/next.gif" width="16" height="16" alt="Következő oldal" onclick="sorter.move(1)" />
    <img src="images/last.gif" width="16" height="16" alt="Utolsó oldal" onclick="sorter.move(1,true)" />
  </div>
  <div id="text">altuális oldal: <span id="currentpage"></span> / összesen: <span id="pagelimit"></span></div>
</div>
<script type="text/javascript" src="tinyTableScript.js"></script>
<script type="text/javascript">
  var sorter = new TINY.table.sorter("sorter");
  sorter.sortmethod = "desc";
  sorter.head = "head";
  sorter.asc = "asc";
  sorter.desc = "desc";
  sorter.even = "evenrow";
  sorter.odd = "oddrow";
  sorter.evensel = "evenselected";
  sorter.oddsel = "oddselected";
  sorter.paginate = true;
  sorter.currentid = "currentpage";
  sorter.limitid = "pagelimit";
  sorter.init("table",1);
</script>

Magyarázat:

A table thead része lesz fejlécként felhasználva. A h3-as tagekkel van megoldva a címkék igazítása. Igazából kihagyható, csak akkor css-t is szerkeszteni kéne... Engem nem zavart, bent szoktam hagyni. Azon th oszlopok, melyek class-ja be van állítva nosort-ra azokat nem lehet majd rendezni (ez hasznos ha szerkesztő, vagy törlő gombokat helyezel el). A controls div tartalmazza a vezérlőket, (elem / oldal, hányadik oldalon, és lapozó eszközök). FONTOS, hogy a JS kód csak és kizárólag a HTML dokumentum végén szerepelhet, különben az inicializáló nem fog lefutni. De nézzük is meg mit kell megadni a JS-be: sorter.sortmethod = desc sor felelős azért hogy desc legyen a rendezés közvetlenül az init után (ez csak az én módosított kódommal működik). Az összes többi paraméter, csak azért kell, hogyha ezen nevek már használva vannak a projektedben akkor ezen kód ID-it át tudd írni, és azokat közölni lehessen az JS feldolgozóval. Az utolsó sor, az init még kimaradt, erről annyit kell tudni, hogy első paramétere a rendezendő tábla ID-je, a második meg, hogy hányadik oszloppal legyen rendezve automatikusan. És jó programozókhoz mérten az indexelés 0-tól indul :)

Linkek:

Fejlesztő oldala
Eredeti demó oldal
Eredeti kód letöltése
Általam módosított kód letöltése (dátumkezelés, desc init)