DataTables eklentisi ile tablolarda sayfalama, arama, yazdırma, sıralama gibi gelişmiş özelliklerin kullanımı

makale.baslik

Web uygulamalarında veri gösteriminde kullanabileceğiniz çok önemli bir JQuery eklentisinden bahsedeceğim. Genelde tablo ağırlıklı uygulamalarda tercih ettiğim bir eklenti olan DataTables yeri geldiğinde işinizi çok kolaylaştıracaktır.

DataTables, jQuery kitaplığı için bir eklentidir. Herhangi bir HTML tablosuna gelişmiş etkileşim denetimleri ekler.

DataTables ile tablolarda aşağıdakileri ve daha fazlasını yapabilirsiniz.

  • Sayfalama, eşzamanlı arama ve çok sütunlu sıralama
  • Hemen hemen her veri kaynağını destekleme
  • DataTables,  jQuery UI, Bootstrap, Foundation tablo temalarını kullanma imkanı
  • Tamamen çeviri yapılabilir, Türkçe dil desteği
  • Ücretsiz açık kaynak (MIT lisansı) olması
  • Sütun genişliklerini verimli kullanılması
  • Gizli sütunlar
  • Tabloların dinamik oluşturulması
  • Ajax ile otomatik veri yüklenmesi
  • Tek veya çoklu sütunda arama desteği olması
  • Çok geniş eklenti desteği olması
  • Kapsamlı dokümantasyonu olması ve devamlı geliştiriliyor olması

 

 

DataTables kullanımı çok basittir normal HTML tabloya birçok özellik ekleyebilir ve özelleştirebilirsiniz. Tablonuzu oluştururken <thead> ve <tbody> tagları ile tablonuzun başlık ve içerik kısımlarını belirtmeniz gerekiyor. Tabi ki tablonuza datatables özellikleri eklemek için tablonuza bir id seçici vermeniz gerekiyor.

Örnek tablo:

<table id="myTable" class="table table-responsive">
    <thead>
    <tr>
        <th>Adı</th>
        <th>Soyad</th>
        <th>Doğum Yeri</th>
        <th>Adresi</th>
        <th>Numarası</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Acer</td>
        <td>Erişmiş</td>
        <td>Şanlıurfa</td>
        <td>adipiscing dolor iaculis vitae Fusce</td>
        <td>2400</td>
    </tr>
    <tr>
        <td>Lebib</td>
        <td>Aslanoğlu</td>
        <td>Erzincan</td>
        <td>non gravida</td>
        <td>1400</td>
    </tr>
    <tr>
        <td>İsaf</td>
        <td>Toraman</td>
        <td>Eskişehir</td>
        <td>quam Phasellus faucibus iaculis</td>
        <td>9690</td>
    </tr>
    <tr>
        <td>Özdal</td>
        <td>Karakum</td>
        <td>Afyonkarahisar</td>
        <td>tortor porttitor volutpat neque</td>
        <td>8291</td>
    </tr>
    <tr>
        <td>Kayaalp</td>
        <td>Özgürsoy</td>
        <td>Burdur</td>
        <td>eu nunc</td>
        <td>5572</td>
    </tr>
    <tr>
        <td>Sevtap</td>
        <td>Cangir</td>
        <td>Ağrı</td>
        <td>et elementum condimentum ac porttitor</td>
        <td>1967</td>
    </tr>
    <tr>
        <td>Valek</td>
        <td>Barut</td>
        <td>Hatay</td>
        <td>ultrices</td>
        <td>2716</td>
    </tr>
    <tr>
        <td>Sevdekar</td>
        <td>İyidil</td>
        <td>Van</td>
        <td>velit tempor</td>
        <td>278</td>
    </tr>
    <tr>
        <td>Tanbay</td>
        <td>Elgin</td>
        <td>Adıyaman</td>
        <td>interdum nulla Sed et tempus</td>
        <td>3754</td>
    </tr>
    <tr>
        <td>Yabgu</td>
        <td>Yaprak</td>
        <td>Osmaniye</td>
        <td>et tellus</td>
        <td>2750</td>
    </tr>
    <tr>
        <td>Laminur</td>
        <td>Karaşan</td>
        <td>Kahramanmaraş</td>
        <td>vel</td>
        <td>9019</td>
    </tr>
    </tbody>
</table>

datatables

Gerekli javascript ve css dosyalarını kendi sayfalarından download kısmından indirebilirsiniz veye CDN linklerini alabilirsiniz. Kullanabileceğiniz kütüphaneleri seçip ekleyebilirsiniz.

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs-3.3.7/jq-2.2.4/jszip-3.1.3/pdfmake-0.1.27/dt-1.10.15/b-1.3.1/b-html5-1.3.1/b-print-1.3.1/r-2.1.1/rg-1.0.0/datatables.min.css"/>

<script type="text/javascript" src="https://cdn.datatables.net/v/bs-3.3.7/jq-2.2.4/jszip-3.1.3/pdfmake-0.1.27/dt-1.10.15/b-1.3.1/b-html5-1.3.1/b-print-1.3.1/r-2.1.1/rg-1.0.0/datatables.min.js"></script>

 

Şimdi tablonuza DataTables özelliği vermek için yapmanız gereken şudur:

<script>
    $('#myTable').DataTable();
</script>

 

 

DataTables’ı Türkçe yapmak çok kolay, bunun için benim kendi çeviri kodlarımı kullanabilirsiniz veya diğer çevirileri de kullanabilirsiniz.

<script>
        $('#myTable').DataTable({
            language: {
                info: "_TOTAL_ kayıttan _START_ - _END_ kayıt gösteriliyor.",
                infoEmpty:      "Gösterilecek hiç kayıt yok.",
                loadingRecords: "Kayıtlar yükleniyor.",
                zeroRecords: "Tablo boş",
                search: "Arama:",
                infoFiltered:   "(toplam _MAX_ kayıttan filtrelenenler)",
                buttons: {
                    copyTitle: "Panoya kopyalandı.",
                    copySuccess:"Panoya %d satır kopyalandı",
                    copy: "Kopyala",
                    print: "Yazdır",
                },

                paginate: {
                    first: "İlk",
                    previous: "Önceki",
                    next: "Sonraki",
                    last: "Son"
                },
            }
        });
</script>

 

Ayrıca tablonuzu dışarı aktarma özelliğini (Excel, PDF, Yazdırma ve kopyalanması) ve responsive şeklinde görünmesini sağlayan kodlarda tablonuzu daha işlevsel yapacaktır.

$('#myTable').DataTable({
            dom: 'Bfrtip',
    buttons: [
        'copy', 'excel', 'pdf', 'print'
    ],
    responsive: true
});

Daha fazla bilgi ve özellik için datatables.net adresine bakabilirsiniz. 

Uygulama dosyasını indirmek için: dataTables.rar

Çalışmanın demo uygulaması için tıklayın.

Paylaş:

Yorumlar

  1. peki sayfa başına gösterilecek satır sayısını nasıl değiştirebiliriz

  2. kardeşim çok sağol çok yardımı dokundu

  3. Ali

    Çok teşekkürler bayadır uğraşıyordum yazın ilaç gibi geldi. Ancak bu listelemede gösterilecek satır sayısının ayarını nasıl yapıyoruz? 10 olarak değilde 25 -50 - 75 - 100 gibi

    1. Merhaba aşağıdaki kodu eklersen her sayfada kaç kayıt gösterileceğini ayarlayabilirsin.

      $('#myTable').DataTable({
      lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "Tümü"]],
      pageLength: 25,
      });
  4. ustam benim templatede birşeyle çakışma var headerdeki diğer js lerle galiba ne yapsam olmuyor başka bir yontem var mıdır yada nasıl bir yok izlesem sonuca giderim ?

    1. Data Tables javascript kodlarını <head> tagları arasına yazmayın table oluşturduktan sonra ekleyin. Bunu yaptığınızda da olmuyorsa diğer javascript dosyalarını teker teker kaldırıp test edin. kolay gelsin 

  5. Çok sağolun, teker teker aradıklarımı tek konuda toparlamışsınız.

  6. benim listemde sütun sayısı fazla olduğundan (13 Adet), yazdır yada pdf 3 dökme de sütunları eksik alıyor.. Hepsini alması için ne yapmak gerekir?

    1. Şuraya bakabilirsiniz. https://datatables.net/extensions/buttons/examples/print/customisation.html

  7. Tüm sütunlarda ayrı ayrı arama yapmak istersem ne yapmam gerekiyor . Teşekürler.

    1. Merhaba şuradan yararlanabilirsiniz

      https://datatables.net/examples/api/multi_filter.html