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.",
                lengthMenu: "Sayfada _MENU_ kayıt göster",
                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

  8. bir yerde takıldım. datatable birden fazla sayfalama yapıyor bir sorun yok ve her satırada checkbox ekledim. seçili olan satırların ID sini yakalıyorum. ama şöyle bir sıkıntım var. birden fazla sayfa olduğu için hangi sayfa açıksa oradaki id'leri yakalayabiliyorum. ben her sayfada seçili olan ID leri yakalamak istiyorum. bunu nasıl yapabilirim.

  9. Merhaba bu konuda Görünen Şablon dosya içinde manuel yazılanları listeliyor, ben bu şablonu Kullanarak Veritabanından çekilen verileri listelemek istiyorum ancak ne yaptıysamda sanırım beceremedim :) Kısaca bu Şablonu alttaki linkteki Veri ekleme çekme konununuzda kullanmak istiyorum . Arama Excel ekle liste 1 0 sayfa göster vs olması güzel. Örnek index.php liste gelsin. ekle.php sayfasından ekleme işlemi yapacam, liste.php sayfasındanda duzenle sil vs. yapacam. ekle liste vs bunları yaptım ama index.php bu formdaki şekilde getiremedim. https://mesutd.com/php-ile-mysql-veritabanina-baglanip-veri-ekleme-silme-duzenleme-ve-listeleme

    1. Manuelde verileri listelediğiniz table a makaledeki gibi datatables özelliği vermeniz yeterli.

  10. Merhaba kardeşim. Yahu 4-3 gündür uğraşıyorum bir türlü gücel cdn kodlarını blamadım. Sitenin verdiklerini bir türlü entegre edemedim. Sitenin güncel kodlar çok kısa geldi bana Senin kodlarını kullanıyorum Güncel bootstrap kodları nereden temin edebileceğimi ve nasıl kullanılacağını anlatabilir misin? şimdiden teşekküler.

  11. Hocam çok teşekkürler ancak benimde şöyle bi sorum var. Download edilen excel dosyasını şekillendirebiliyor/sitilleyebiliyor muyuz. Şimdiden çok teşekkürler

    1. Örnek demodan bakabilirsiniz. İndirilen excel dosyası ile istediğiniz şekilde işlem yapılabilir.

  12. merhaba; örnek resmindeki gibi artıya basıldığında toogle olayını nasıl yapabilirz acaba tıklandığında açılıp altından detay bilgilerinin gösterildiği

    1. Datatables sayfayı daralttığında otomatik yapıyor.

  13. Merhaba öncelikle anlatımın ve örneğin için teşekkür ederim. Ben arama textbox'ını sağ tarafa yaslı olmasını istiyorum fakat bende butonlardan hemen sonra geliyor. Bunun için ne yapmam gerekir müsait olduğunda yardımcı olabilir misin? Ayrıca birde tablo sağa doğru uzuyor diyelim " + " butonu yerine bir scroll ile sağa doğru kaydırdığımızda gerekli alanları görmemiz mümkün mü?

  14. Merhaba, Datatable içinde treview menu kullanmak istiyorum fakat çalışmıyor. severside metodu ile post ediyorum, NOT : normal html düzeni ile çalışıyor.

    1. Kendi web sitesinde ayrıntılı bilgi vardır.

  15. merhaba mesut bey ben bunu admin template de kullanmak istiyorum ama tabloyu eklediğim zaman sayfadaki diğer yazılar küçülüyor sebebi ne olabilir?

    1. Diğer css ler etkiliyor olabilir.

  16. Mesut hocam kolay gelsin birçok siteye baktım sizin siteniz kadar yardımcı olanını görmedim sizden ricam arama alanına ek olarak jquery Ajax load ile tablo içeriğini değiştirme yapabilir misiniz . Yani arama dışında dropdown yada ve tarih alanlı örnekte yapabilir misiniz tşk ederim

    1. Önerileri için teşekkürler taleblerinize göre de içerik üretiyorum. 

  17. Merhaba peki datatable ile gelen verilerin stillerini nasıl değiştiririm font-size veya color gibi mesela

  18. Mesut Hocam sütün sayısını arttıramadım ne yapmam lazım teşekkürler

  19. Merhabalar Mesut Bey, Sol ilk kolona otomatik sıra numarası nasıl ekleyebilirim. Excel çıktılarında sıra numarasına ihtiyacım var

Kategoriler

En çok okunan yazılar.

 Etiketler