jQuery ile hali hazırda var olan bir tablo üzerinden nasıl arama yapılarak filtreleme uygulanacağı konusunda bilgi vermeye çalışacağım. Bu tarz işlemi arka planda PHP gibi dilleri çalıştırarak yapılması durumunda çok fazla yük bineceği için tablo üzerinden arama yapmak çok daha verimli olacaktır.
Derste anlatacağım konu, belirli değerlere sahip olan TABLE etiketine ait değerler üzerinden arama yapmak olacaktır. Yazılan içeriğe ait belirlenen değere sahip olmayan satırlar ekrandan gizlenerek filtreleme uygulanacaktır. Çok basit bir şekilde gerçekleştireceğiniz bu işlemi sadece TABLE olarak değil istenilen HTML etiketine rahatlıkla uygulanabilir.
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<input type="text" id="ara" placeholder="Arama Yap" style="margin:10px 0px;padding:5px">
<table border="1" class="tableARA">
<thead>
<tr>
<th>isim</th>
<th>soyisim</th>
<th>meslek</th>
</tr>
</thead>
<tbody>
<tr>
<td>ibrahim</td>
<td>çevrük</td>
<td>php</td>
</tr>
<tr>
<td>ömer sercan</td>
<td>yücel</td>
<td>muhasebe</td>
</tr>
<tr>
<td>fevzi</td>
<td>şimsek</td>
<td>muhasebe</td>
</tr>
</tbody>
</table>
Yukarıda yer alan kodlarda HTML bölümü yer almaktadır. Öncelikle jQuery işlemleri için gerekli olan kütüphane sayfaya dahil edilir. Sonrasındaysa arama işleminin yapılacağı bir input ve aranacak TABLE belirli verilerle oluşturulmuştur. Bu kodlarında altına script etiketleri içerisinde jQuery kodlarını yazarak, HTML alanda arama işleminin yapılmasını sağlayalım.
<script>
var $satir = $('.tableARA tbody tr');
$('#ara').keyup(function() {
var deger = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$satir.show().filter(function() {
var yazi = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~yazi.indexOf(deger);
}).hide();
});
</script>
HTML alanı oluşturdukten sonra script alaları içerisine de gerekli jquery kodlarını yazıyoruz.
Anlık arama işlemlerini gerçekleştirmiş olduğumuz jquery kodlarını inceleyecek olursak; ilk olarak arama işleminin yapılacağı yeri –yani satırları- $satir değişkeni ile tanımlıyoruz. Sonrasında arama alanına yazılan herharfte işlem yapılacak olan fonksiyonu çalıştırıyoruz.
Bu fonksiyonda ilk olarak aranan değer alınmaktadır. Değeri alırken boşlukları temizliyor ve harfleri küçültüyoruz. Böylece aramada büyük/küçük harf sorunu yaşamıyoruz. Aranan değeri aldıktan sonra gösterilecek olan deperi show ve filter ile belirliyoruz. Değerlerin eşleşmemesi durumunda da belirlenen etiketin gizlenmesini sağlıyoruz.
