JQuery Datatables İle Tablolarınıza Profesyonel Özellikler Katın

Bu makalemizde jquery’nin en önemli eklentilerinden biri olan dataTables’i göreceğiz bu eklenti ile eşzamanlı arama, sayfalama, gösterilecek kayıt sayısı, kolona göre sıralama gibi standart html table yapınıza birçok profesyonel özellik katmaktadır.

jQuery datatables ile tablolarınıza profesyonel özellikler katın

Bu eklentiyi table’niza uygulamak çok basit table’niza bir id verin ve ardından head etiketleri arasına şu kodu yazınız.

Üstteki kodda sizin değiştirmeniz gereken kısım sadece tableId yazan kısma tablonuzun(table) id’sini yazmalısınız.

Bu eklentiyi kullanabilmek için jquery kütüphanesine ihtiyacınız bulunmaktadır jquery.com sayfasından js dosyasını eklentiden önce tanımlayarak kullanabilirsiniz.

Bu eklentinin bazı özellikleri

  • Eşzamanlı olarak tüm kolonlar içerisinde arama
  • Tüm kolonlara göre artan-azalan şeklinde sıralama yapabilme
  • Sayfalama özelliği
  • Sayfa başına gösterilecek kayıt sayısı ayarlama
  • Toplam kayıt ve bulunduğunuz kayıt sayısı aralığını veren bilgi kutusu
  • Çoklu dil desteği
  • Özelleştirilebilir seçenekler
  • Gelişmiş tema desteği ile bootstrap, jquery mobile gibi birçok platform’a uyum sağlama gibi gördüğüm bazı güzel özellikler yer almaktadır.

Eklenti sayfası

http://datatables.net/

2 Cevaplar

  1. Toprak Can dedi ki:

    hocam acaba görüntüle.php diye bir sayfa olsa bu tablonun içindeki herhangi bir hücreden seçtiğimiz şeyi görüntüle.php?id=”hücrenin verisi” şeklinde yönlendirme yapabilmemiz mümkünmü

    • Murat ÖNER dedi ki:

      Alttaki örnekte tr, ve td etiketlerine tıklandığında veri kümesine erişim yer alıyor siz kendinize göre kişiselleştirip window.location.href = ‘goruntule.php?id=[id değeri]’
      şeklinde yönlendirme yapabilirsiniz.

      var table = $('#example').DataTable({
          columns:[
              {sTitle:"Day",data:"day"},
              {sTitle:"Week",data:"week"},
              {sTitle:"Month",data:"month"},
              {sTitle:"Year",data:"year"}
          ],
          processing: true,
          serverSide: true,
          ajax: {
              url:"/myajaxurl",
              type:"POST"
          }
      });
       
      //tr on click
      $(document).on('click','#example tr',function(e){
          var row_object  = table.row(this).data();
          var day         = table.row(this).data()['Day'];
          var week        = table.row(this).data()['Week'];
          var month       = table.row(this).data()['Month'];
          var year        = table.row(this).data()['Year'];
      });
       
      //td on click
      $(document).on('click','#example td',function(e){
          var cell_clicked    = table.cell(this).data();
          var row_clicked     = $(this).closest('tr');
          var row_object      = table.row(row_clicked).data();
          var day             = table.row(row_clicked).data()['Day'];
          var week            = table.row(row_clicked).data()['Week'];
          var month           = table.row(row_clicked).data()['Month'];
          var year            = table.row(row_clicked).data()['Year'];
      });

       

Bir Cevap Yazın