yeni keşfettiğim bir jquery uygulaması. kütüphanesi ile nasıl kullanılır, nasıl Türkçe’leştirilir ve nasıl bazı özelliklerinden arındırılarak kullanılabilir gibi konulara değineceğim.

Datatables Kullanımı

Kendi Sitesi: https://datatables.net

Datatables web sitenizde oluşturduğunuz tablolara arama, sayfalama, filtreleme gibi özellikler ekliyor, Bootsrap‘ın 3.3.6 ve 4 sürümü için de mükemmel bir uyum içerisinde çalışıyor. Datatables kullandığınızda php ile ek bir sayfalama yapmanıza gerek kalmaz, arama kutusu oluşturmanıza gerek kalmaz, hatta bunlar için html kodlar bile yazmanıza gerek kalmaz sadece bir id eşleşmesiyle datatables herşeyi yerli yerine yerleştirir. Demoda göreceksiniz çok hızlı sonuçlar verir.

Eğer birden fazla tablonuz varsa sadece aşağıdaki kodu bir defa daha yazarak ve üzerinde bulunan #example id değerini diğer tablonuz için değiştirerek kullanın.

Yukarıdaki kodu ve aşağıdaki kodları tablonuzun bulunduğu sayfada head tagları arasına ekleyin.

Tablonuzun bulunduğu dosyada head tagları arasına ekleyin.

Şimdi de Bootstrap kütüphanemizi dahil edelim.

Aşağıdaki kodu head tagları arasına ekleyin.

Aşağıdaki kodu body(</body>) kapanış etiketinin hemen üstüne ekleyin.

Dilerseniz dosyaları link ile çağırmayıp buradan Bootstrap 3.3.6‘ın kendi dosyalarını indirerek projenize dahil edebilirsiniz.

Datatables Türkçe Kullanımı

Yukarıdaki Kodların Yerine;

Kullanarak Türkçeleştirebilirsiniz. Kelimeler aslında bundan daha fazla hepsini çevirmeye erindim.

Yok ben kendi istediğim kelimeleri yazmak istemiyorum, neyse tam Türkçe karşılığı onu yazmak istiyorum diyorsan;

Şeklinde de kullanabilirsin. Diğer tüm ülkelerin hazır çeviri listesi linkleri de bu sayfada yer almakta. Bana sorarsanız bu şekilde kullanımı daha doğru çok dilli projelerinizde sadece Turkish kısmını bir değişkene tanımlayıp sayfada dil değiştiğinde dilinin de otomatik değişmesini sağlayabilirisniz. Şu örnekte yapmış olduğum tabloyu dil değiştirerek incelemenizi öneririm.

Datatables Özelleştirme

Sayfalamayı kapatır false/true


Sağdan 3.Sütunu baz alarak büyükten küçüğe doğru sıralar

Daha bir çok işlevsel özelleştirmeyi kendi sitesinde bulabilirsiniz.

Örneğin canlı demosuna alttaki butondan gözatabilirsiniz.

Daha değişik bir örnek daha deneyelim bu örnekte de tablomuzda saydırma işlemi olsun Türkçe olsun ve filtreleme özelliği kapalı olsun.

Saydırma özelliği için fazladan içi boş <td></td> ve  <th></th>eklemeyi unutmayın yukarıdaki kod bu kısmı ardışık rakamlarla dolduracaktır.