JavaScript • Jquery

JQuery DataTable Kullanımı

9 yıl önce
4 Yorum
yazan A C

HTML tablosu üzerine sıralama, sayfa geçişleri ve arama işlemlerini JQuery Datatable ile kolay bir şekilde gerçekleştirebiliriz.

 

jq_table

Ö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:

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ı 

$('#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

$('#datatable').DataTable({
"language":{
"url":"dil.json"
}
});
});

dil.json dosyası

{
"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"
}
}

 

İlginizi Çekebilir

Yorum

  • 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?

    Cevapla

  • 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.

    Cevapla

Yorum Yap