Nagy mennyiségű adat átlátható megjelenítésének tökéletes eszköze a táblázatok. Persze általában célszerű valamilyen lapozást megvalósítani ilyenkor, de van hogy muszáj egyben látni az adathalmazt és szükséges szűrni, keresni is az adatok között.

Viszont ha már a szervertől megvannak az adatok, akkor teljesen felesleges újabb kéréssel zaklatni, hiszen a meglévő adatok között már lehet szűrni és keresni is, például a jQuery Filtable bővítménnyel. Mivel teljes egészében a felhasználó gépén fut, így a szervert / tárhelyet nem terheli és nyilván gyorsabb is.

A letöltött zipből ("Clone or download > Download zip") a filtable.min.js-t célszerű használni és az examples mappában vannak minták is, amelyek alapján pillanatok alatt beüzemelhető. Ehhez szükséges a jQuery is természetesen.

Nézzük meg a basic.html példát.

Mint látható, a jQuery-t és a filtable.min.js-t használatba kell venni és szükséges egy táblázat is (elvárás szerint felépítve, tehát thead, stb.).

<table id="data">
<thead>
    <tr>
        <th>First name</th>
        <th>Last name</th>
        <th>City</th>
        <th>Country</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Shoshana</td>
        <td class="name">Wooten</td>
        <td>Valdosta</td>
        <td>United Kingdom</td>
    </tr>

...  ....

Ezen felül szükséges a szűréshez / kereséshez valamilyen beviteli mező, amely egy elemben (pl. div) legyen és legyen neki egy class is:

<div class="table-filters">
    <label for="filter-country">Name:</label>
    <input type="text" class="input-text" id="filter-name" data-filter-col="0,1">
</div>

A data-filter-col mondja meg, hogy hányadik oszlopokban keressen (0-vel kezdve).

A táblázat id-re hivatkozva élesíthető a bővítmény (ez a filtable.min.js után kell, hogy legyen):

<script>
$(function(){
    $('#data').filtable({ controlPanel: $('.table-filters') });
});
</script>

A controlPanel a szűrésre létrehozott div class-ja legyen.

És ennyi, már használható is:



Gyorsan és dinamikusan működik.

Ami izgalmas, hogy nem csak egyszerű text bevitel lehet, hanem például lenyíló lista is (ez is a <div class="table-filters"> elemben legyen, lehet több is):

<label for="filter-city">City:</label>
    <select id="filter-city" data-filter-col="2" style="min-width:60px">
        <option value="">- All -</option>
        <option value="j">J</option>
        <option value="k">K</option>
        <option value="ll">LL</option>
    </select>

Ez esetben így néz ki a dolog:



Érdekel a webfejlesztés, weboldalak készítése?

Kattints ide oktató videókért!
A lista kombinálható a sima szövegbeviteli mezővel:



És lehet checkbox is:

<label for="filter-tick">
<input type="checkbox" id="filter-tick" data-filter-col="0,1,2,3" data-filter-val="B"> B</label>



Vagyis fel lehet építeni egy egész komplex szűrést, keresést pillanatok alatt.