Bootstrap Table’a Arama Özelliği Ekleme

HTML, CSS ve JavaScript ile oluşturulmuş en popüler önyüz kütüphanesi olan Bootstrap üzerine konuşmaya devam ediyoruz.

Bugün sizlerle Bootstrap’in table yapısına arama özelliği ekleyeceğiz. Bu işlemi yaparken de sırtımızı jQuery’nin fonksiyonelitesine dayayacağız.

ÖRNEĞİ GÖRÜNTÜLE

Arama özelliğiyle Bootstrap Table

Bu işlemi yapmak için Bootstrap’in klasik grid yapısında tbody içerisinde bulunan her row’u birer birer taramamız gerekmekte. Bu işlemi de jQuery ile yapmak oldukça basit.

İlk olarak HTML kodlarımız ile başlayalım.

HTML Kodları

İlk olarak Bootstrap‘i projenize dahil etmeniz gerekmekte. Eğer bu konuda detaylı bir açıklamaya ihtiyacınız varsa sizi aşağıdaki makalemize alalım.

Ders 1 : Bootstrap nedir?

Başlangıç için arama inputumuzu ekranın sağ üst kısmına pull-right classı sayesinde koyalım.

<div class="form-group pull-right">
    <input type="text" class="search form-control" placeholder="What you looking for?">
</div>

Daha sonra item sayısını göstereceğimiz sonuç span öğesini hemen onun soluna yerleştirelim.

<span class="counter pull-right"></span>

Şimdi de table öğemizi yerleştirelim. Klasik table yapısına sadece ek olarak results classını ekliyoruz. Böylece uygulamanın, projenizdeki tüm tablolara etki etmemesini sağlıyoruz.

<table class="table table-hover table-bordered results">
  <thead>
    <tr>
      <th>#</th>
      <th class="col-md-5 col-xs-5">Name / Surname</th>
      <th class="col-md-4 col-xs-4">Job</th>
      <th class="col-md-3 col-xs-3">City</th>
    </tr>
    <tr class="warning no-result">
      <td colspan="4"><i class="fa fa-warning"></i> Sonuç yok</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Vatanay Özbeyli</td>
      <td>UI & UX</td>
      <td>İstanbul</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Burak Özkan</td>
      <td>Software Developer</td>
      <td>İstanbul</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Egemen Özbeyli</td>
      <td>Purchasing</td>
      <td>Kocaeli</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td>Engin Kızıl</td>
      <td>Sales</td>
      <td>Bozuyük</td>
    </tr>
  </tbody>
</table>

Bu kadar. Şimdi sırada CSS kodları var.

CSS Kodları

İşin CSS tarafında çok fazla iş yok.

.results tr[visible='false'],
.no-result{
  display:none;
}

.results tr[visible='true']{
  display:table-row;
}

.counter{
  padding:8px; 
  color:#ccc;
}

Gösterim şekillerinin ve sayacın stilini atadıktan sonra jQuery tarafına geçebiliriz.

jQuery Kodları

Öncelikle sayfanızda jQuery tanımlı olup olmadığına bakın. Eğer yoksa Body‘nin bittiği yere, tanımının hemen öncesine jQuery’i ekleyerek devam edelim.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

Gelelim tablonun işlevselliğine. Kodun içerisine yerleştirdiğimiz yorum satırları sizlere yardımcı olacaktır.

$(document).ready(function() {

  /* arama inputu kullandıldı mı? */
  $(".search").keyup(function () {
    var searchTerm = $(".search").val();
    var listItem = $('.results tbody').children('tr');
    var searchSplit = searchTerm.replace(/ /g, "'):containsi('")
    
  $.extend($.expr[':'], {'containsi': function(elem, i, match, array){
        return (elem.textContent || elem.innerText || '').toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
    }
  });
  
  /* sonuç ilgili değil mi? öyleyse gizle */
  $(".results tbody tr").not(":containsi('" + searchSplit + "')").each(function(e){
    $(this).attr('visible','false');
  });
  
  /* sonuç ilgili mi? öyleyse göster */
  $(".results tbody tr:containsi('" + searchSplit + "')").each(function(e){
    $(this).attr('visible','true');
  });
  
  /* kaç tane sonuç var? */
  var jobCount = $('.results tbody tr[visible="true"]').length;
    $('.counter').text(jobCount + ' item');
    
  /* sonuç varsa result öğesini görünür kıl, yoksa gizle */
  if(jobCount == '0') {$('.no-result').show();}
    else {$('.no-result').hide();}
		  });
});

Her şey hazır!

Yorumlarınız?

Bootstrap’e arama kutucuğu getiren onlarca eklenti mevcut. Ancak bu yapı bütün bu eklentiler arasındaki belki de en minimal olanı. Bu yüzden sizlerle paylaşmak istedik.

İyi çalışmalar.