HTML tablosu üzerine sıralama, sayfa geçişleri ve arama işlemlerini JQuery Datatable ile kolay bir şekilde gerçekleştirebiliriz.
Örneğimizi inceleyelim. Öncelikle HTML basit bir tablo oluşturuyoruz.
Daha sonra JQuery DataTable için references larımızı ekliyoruz.
DataTable Temel Kullanımı
Kodlarımızın tamamlanmış hali:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
https://code.jquery.com/jquery-1.11.3.min.js https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css <html> <head> <title>JQuery DataTable Kullanımı</title> <head> <script src="https://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script> <script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" /> <script type="text/javascript"> $(document).ready(function() { $('#datatable').dataTable({}); }); </script> </head> <body> <table id="datatable"> <thead> <tr> <th> Adı </th> <th> Soyadı </th> <th> Telefonu </th> </tr> </thead> <tbody align="Center"> <tr> <td> Ahmet </td> <td> Cansever </td> <td> (111) 1234567 </td> </tr> <tr> <td> Hayri </td> <td> KOÇMARLAR </td> <td> (111) 7654321 </td> </tr> </tbody> </table> </body> </html> |
Data Table Türkçe Yapma
DataTable kullandıktan sonra en sık sorulardan biri de DataTable nasıl Türkçe yapılır sorusudur? DataTable yazılımcılarının hazırladığı hazır Türkçe belgesi kullanılabileceği gibi kendi dosyamızı da oluşturup kullanma şansına sahibiz. Dil dosyası oluşturup dosyayı language özelliğine parametreli olarak geçmek gerekiyor.
CDN kullanarak DataTable Türkçe yapımı
|
1 2 3 4 5 6 7 8 |
$('#datatable').DataTable({ "language":{ "url":"//cdn.datatables.net/plug-ins/1.10.12/i18n/Turkish.json" } }); }); |
Dil dosyası ile DataTable Türkçe yapımı
DataTable Kodu
|
1 2 3 4 5 6 7 8 |
$('#datatable').DataTable({ "language":{ "url":"dil.json" } }); }); |
dil.json dosyası
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
{ "sDecimal": ",", "sEmptyTable": "Tabloda herhangi bir veri mevcut değil", "sInfo": "_TOTAL_ kayıttan _START_ - _END_ arasındaki kayıtlar gösteriliyor", "sInfoEmpty": "Kayıt yok", "sInfoFiltered": "(_MAX_ kayıt içerisinden bulunan)", "sInfoPostFix": "", "sInfoThousands": ".", "sLengthMenu": "Sayfada _MENU_ kayıt göster", "sLoadingRecords": "Yükleniyor...", "sProcessing": "İşleniyor...", "sSearch": "Ara:", "sZeroRecords": "Eşleşen kayıt bulunamadı", "oPaginate": { "sFirst": "İlk", "sLast": "Son", "sNext": "Sonraki", "sPrevious": "Önceki" }, "oAria": { "sSortAscending": ": artan sütun sıralamasını aktifleştir", "sSortDescending": ": azalan sütun soralamasını aktifleştir" } } |
teşekkürler faydalı bir çalışma
Merhaba
öncelikle teşekkür ederim yeni başladığım için çok iyi bilmiyorum bir konuda yardımınızı rica edeceğim. alt tarafta previous next yazan kutucuğu nasıl türkçe yapabilirim?
Hocam merhaba,
Datatable için ortalama 500 kayıt listeliyorum 10’ar sayfadan. Sayfa ilk load olduğunda 1sn civarı tüm kayıtlar gözüküp sonra js devreye giriyor ve listeyi 10’arli hale getiriyor yani düzeliyor. Aslında 1sn bile sürmüyor bu işlem. Bunun önüne nasıl geçilebilir. Çünkü bu pc’lerin özelliklerine göre farklı zaman aralıklarında oluyor.
Güzel çalışma olmuş emeğinize sağlık