JQUERY ile Tabloda Anlık Arama

Jquery ile tablo, liste yada div gruplarında arama yapar gibi filtreleme işlemi yapabiliriz. Bunun için input elemanınan keyup olayını ve js filter metodunu kullanıyoruz. Uygulama için temel düzeyde HTML CSS ve JQUERY bilgimizin olması grekiyor.

TABLO VERİLERİNDE ANLIK ARAMA

Öncelikle jquery uygulaması yapacağımız için , sayfamıza mutlaka jquery kütüphane eklentisini çağırmamız gerekiyor. Bunun için w3schools sitesinden yada jquery'nin kendi sitesinden yararlanabiliriz. Sayfanın hızlı yüklenebilmesi için eklentiyi body etiketinin sonlarında çağırmayı unutmayın.

Jquery Bağlantısı

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

1. ADIM : TABLONUN HAZIRLANMASI

Bir tablo ve tablonun üzerinde bir input form elemanı oluşturmamız gerekiyor. Ben kolayca güzel bir görüntü elde etmek için bootstrap 4 ile aşağıdaki gibi bir input ve tablo hazırladım. Dilerseniz bootstrap kullanmadan sadece html ile hazırlayabilirsiniz.

Input elemanının id'sini "search" ve tablonun tbody kısmının id'sini "mytable" olarak ayarlıyoruz. Doğrudan tabloya id vermek yerine neden tbody'ye veriyoruz? Çünkü, arama tablonun başlık bölümünü (thead) içermeyecek. Yani başlık satırı sabit duracak. Bu durumda kodlarımız aşağıdaki gibi görünecek.

HTML KODLARI

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title> BOOTSRAP 4 </title>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">    
</head>
<body>


  <div class="container">
    <h3 class="mt-5">TABLO FİLTRELEME</h3>
    <div class="col-md-12   p-0 mb-3">
      <form action="">
        <input type="text" class="form-control w-100 " id="search" placeholder="Tabloda Ara..">
      </form>
    </div>
    <table class="table table-bordered table-condensed table-striped table-hover   mb0 p0 ">
      <thead>
        <tr>
          <th>Ders No</th>
          <th>Ders Adı</th>
          <th>Konu</th>
          <th>Tarih</th>
          <th>Saat</th>        
        </tr>
      </thead>
      <tbody  id="mytable">  
        <tr>
          <td> DERS 1 </td>
          <td>HTML Temel Etiketler</td>
          <td> HTML </td> 
          <td> 04.12.2020 </td> 
          <td> 14:00</td>          
        </tr>
        <tr>
          <td> DERS 2 </td>
          <td>HTML Meta Etiketi</td>
          <td> HTML </td> 
          <td> 04.12.2020 </td> 
          <td> 16:00 </td>          
        </tr>
        <tr>
          <td> DERS 3 </td>
          <td>JS NESNELER</td>
          <td> HTML </td> 
          <td> 04.12.2020 </td> 
          <td> 15:00 </td>           
        </tr>
      </tbody>
    </table>
  </div>

  <!-- JQUERY ve BOOTSTRAP JS DOSYALARI -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script> 


</body>
</html>

2. ADIM : FİLTRELEME İÇİN JQUERY KODLARI

İnput kutusuna gitilen değere göre tabloda arama yapabilmemiz için, input lutusunun keyup olayını kullanacağımızı söylemiştim. Bunun için input kutusuna verdiğimiz "id" değeri çok önemli. Aşağıdaki kodlarda search id'li input elemanının keyup olayı için bir fonksiyon tanımladık. Önce "aranan=$(this).val().toLowerCase();" ile kutuya girilen değeri bir değişkene aktardık. Burada değeri lowerCase ile küçük harflere dönüştürüyoruz.

Daha sonra mytable id'li tbody içindeki "tr" elemanları için js filter metoduyla bir fonksiyon tanımladık. Burada aranan değere göre tr elemanları gösterip gizlemek için toggle özelliğinden yararlanıyoruz. Bunun için toggle içinde "tr" elemanları içerisinde aranan değerin olup olmadığına bakıyoruz. Bunu nasıl yapıyoruz, tr içindeki textlere indexOf metodu uygulayıp , durumunun -1 ' den büyük olup olmadığı şartını arayarak yapıyoruz.

(text().toLowerCase().indexOf(aranan)>-1))

İndexOf ile değer, aranan yerde var ise indis numarası döndürür. Yani 0'dan başlar. Yok ise -1 döndürür. Dolayısıyla bu şartın -1 oluşu "false" , 0 veya başkla bir sayı oluşu "true" değeri döndürecektir.

Sonuç olarak false dönen satırlar gizlenirken , true dönen satırlar görüntülenecektir.

JQUERY KODLARI

<script>    
    
      $('#search').keyup(function(){
        
            var aranan=$(this).val().toLowerCase();
           
            $('#mytable tr').filter(function(){
              $(this).toggle($(this).text().toLowerCase().indexOf(aranan)>-1);
            });

      })
  </script>

3. ADIM : BİRDEN FAZLA TABLO VARSA?

Eğer çok sayıda tablomuz var ise , hepsine ayrı ayrı id'ler verip bu şekilde scriptmi yazacağız? Yazarsak problemsiz çalışacaktır elbet ama bu hem sayfa yükünü hem harcanacak zamanı arttırır hemde bizi boş yere yorar. O nedenle biz bir tane fonksiyon oluşturup içerisine input ve filtrelenecek id parametrelerini ekleyerek , bunu tek bir scriptle istediğimiz yere uygulayabilir hale getirebiliriz. Tabi bunun için input kutusunun keyup olayını javascript onkeyup ile yerinde uygulayıp hazırlayacağımız fonksiyonu çağırmamz gerekecek.

Öcelikle input elemanında onkeyup="filtrele(inputid,filtrelenecekid)" yapısını ekleyip ardından filtrele fonksiyonunu hazırlayalım.

 <input type="text" class="form-control w-100 " id="search" placeholder="Tabloda Ara.." onkeyup="filtrele('#search','#mytable tr')">

Burada input elemanının keyup olayı gerçekleştiğinde filtrele fonksiyonu çağırılıyor ve bu fonksiyona "#search" ile "#mytable tr" parametreleri gönderiliyor. Filtrele fonksiyonu bu durumda şöyle olacak;

  <script>
    
    function filtrele(inputid,filtrelenecekid) {
       
        var aranan=$(inputid).val().toLowerCase();
            $(filtrelenecekid).filter(function(){
              $(this).toggle($(this).text().toLowerCase().indexOf(aranan)>-1);
            });
 
    }

  </script>

Aslında daha önce yaptığımız fonksiyonla çok farkı yok. Sadece fonksiyondan keyup olayını kladırdık ve "search" ile "#mytable tr" yerine fonksiyona gelen inputid ile filtrelenecekid (nerde arama yapılacak) parametrelerini eklemiş olduk.

Bu şekilde kullandığımız zaman sayfada 100 adet tablomuz bile olsa , tabloların input ve tbody id'lerini farklı yazarak fonksiyonu çağırabilir ve böylece tüm tablolarda tek bir script (fonksiyon) ile arama işlemi gerçekleştirmiş oluruz.

Örneğin bir başka tabloda input elemanına "search2" ve o tablonun tbody bölümüne "mytable2" id'lerini verdiğimizde , input içinde onkeyup="filtrele('search2','myteable2') yazmamız , başka bir script hazırlamamıza gerek kalmadan o tablo içinde de anlık arama yapmamızı sağlayacaktır.

Tarayıcıda Aç

Son Güncelleme : 26 Eylül 2025 00:52, Cuma

YORUMLAR () YORUM YAZ

Yorum yapılmamış!

BENZER İÇERİK

JQUERY ile Tabloda Anlık Arama

06 Nisan 2021 12:58, Salı

JQUERY BAĞLANTISI NASIL YAPILıR?

02 Nisan 2024 23:36, Salı

JQUERY NEDİR?

03 Nisan 2024 09:52, Çarşamba