jQuery ile Tabloda Arama Yapmak – Filters

Jquery ile bir tabloda arama nasıl yapılır ?

Yapılan işlerde tablolarda bazı durumlarda arama yapma ihtiyacı doğabilir , bunu javascript ile bir textboxa girilen verileri bul , her satırda ara bul getir şeklinde de yapabilirsiniz ancak bu işlem hem vakit alacaktır hem de gereksiz kod yazmanıza sebep olacaktır, bunun için jQuery kütüphanesinde Filter fonksiyonunu kullanacağız, hem de dinamik bir yapı oluşturulmuş olacak.

<table >
<thead>
<tr>
<th>Kolon1</th>
<th>Kolon2</th>
<th>Kolon3</th>
</tr>
</thead>
<tbody id=”searchTable”>
<tr>
<td>Ctrl</td>
<td>Delete</td>
<td>ctrldelete.net</td>
</tr>
<tr>
<td>test</td>
<td>tablo</td>
<td>tst@tablos.com</td>
</tr>
<tr>
<td>Türkiye</td>
<td>İstanbul</td>
<td>turkiye@turkiye.com</td>
</tr>
<tr>
<td>Türkiye</td>
<td>Ankara</td>
<td>ankara@turkiye.com</td>
</tr>
</tbody>
</table>

yukarıdaki gibi bir tablomuzun olduğunu var sayarsak  bir tbody elementi ve bunun id’sine “searchTable” dedik bunu neden table etiketine vermedik ? bunun sebebi arama yaparken thead etiketinde arama yapmamasını istemediğimizden tablomuzun başlık satırında herhangi bir oynama olmaması için.

<input id=”testInput” type=”text” placeholder=”Arama yapın”>

yukarıdaki gibi bir input eklemesi yapıyoruz , id’sine “testInput” diyoruz ve javascript kodlarınızın olduğu kısma aşağıdaki kodları yazarak jquery ile tablonuzda arama işlemini yapabilirsiniz.

$(“#testInput”).on(“keyup”, function() {
    var value = $(this).val().toLowerCase();
       $(“#searchTable tr”).filter(function() {
          $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
       });
});