Jquery DataTable

jQuery DataTables, web uygulamalarında tablo görüntülemek için kullanılan bir jQuery eklentisidir. DataTables, büyük veri setlerini göstermek ve aramak, sıralamak, sayfalama yapmak, filtrelemek, toplu eylemler gerçekleştirmek ve verileri görüntülemek için kullanılan zengin bir özellik seti sunar.

Örneğin, bir işletmenin çalışanlarının bir listesi varsa, bu liste çok uzun olabilir ve kullanıcının aradığı belirli bir çalışanı bulması zor olabilir. Bu durumda, DataTables kullanarak verileri kolayca filtreleyebilir, sıralayabilir ve sayfalayabilirsiniz. DataTables, mümkün olan en verimli performansı sağlamak için verileri yalnızca sayfalandırdığında yükler ve böylece büyük veri setleriyle bile iyi bir performans gösterir.

Get Ömer Faruk Çetin’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Aşağıda, jQuery DataTables kullanarak bir örnek tablo gösterilmektedir:

<table id="employeeTable">
 <thead>
 <tr>
 <th>Adı</th>
 <th>Soyadı</th>
 <th>Pozisyon</th>
 <th>Maaş</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>Ahmet</td>
 <td>Yılmaz</td>
 <td>Yönetici</td>
 <td>10000</td>
 </tr>
 <tr>
 <td>Ayşe</td>
 <td>Kara</td>
 <td>Uzman</td>
 <td>7000</td>
 </tr>
 <tr>
 <td>Ali</td>
 <td>Şahin</td>
 <td>Stajyer</td>
 <td>3000</td>
 </tr>
 <tr>
 <td>Burcu</td>
 <td>Demir</td>
 <td>Uzman Yardımcısı</td>
 <td>6000</td>
 </tr>
 <tr>
 <td>Cem</td>
 <td>Yıldız</td>
 <td>Uzman</td>
 <td>8000</td>
 </tr>
 </tbody>
</table>

Yukarıdaki HTML kodu, bir çalışanlar tablosunu temsil etmektedir. Bu tabloyu DataTables ile özellikler eklemek için aşağıdaki JavaScript kodunu kullanabilirsiniz:

$(document).ready(function() {
 $('#employeeTable').DataTable();
});

Yukarıdaki kod, sayfa yüklendiğinde DataTables eklentisini `#employeeTable` ID’sine sahip tabloya uygular. Bu, tablonun özelliklerini otomatik olarak etkinleştirir ve kullanıcılara sayfalama, arama ve sıralama gibi araçlar sağlar.

2

Tablodaki maaş sütununa göre sıralama yapmak için DataTables’in `order` özelliğini kullanabilirsiniz. Aşağıdaki örnek kod, maaş sütununu varsayılan olarak azalan sırada sıralayacaktır:

$(document).ready(function() {
 $('#employeeTable').DataTable({
 "order": [[3, "desc"]]
 });
});

Yukarıdaki kod, `order` özelliğiyle birlikte kullanılarak `#employeeTable` ID’sine sahip tabloyu DataTables ile etkinleştirir ve `3` indeksli sütuna (`maaş` sütunu) göre sıralama yapar. `”desc”` parametresi, maaş sütununun azalan sırada sıralanacağını belirtir.

Eğer sütunu artan sırada sıralamak isterseniz, `”asc”` parametresini kullanabilirsiniz:

$(document).ready(function() {
 $('#employeeTable').DataTable({
 "order": [[3, "asc"]]
 });
});

Yukarıdaki kod, `#employeeTable` ID’sine sahip tabloyu DataTables ile etkinleştirir ve `3` indeksli sütuna (`maaş` sütunu) göre artan sırada sıralama yapar. `”asc”` parametresi, maaş sütununun artan sırada sıralanacağını belirtir.