Asp.Net Mvc Jquery Datatable

Jquery DataTables

Merhaba arkadaşlar bu dersimizde çok kullanışlı bir jquery eklentisi olan datatable nesnesini inceleyeceğiz. Bu zamana kadar bende keşfetmemiştim ama gerçekten çok güzel özellikleri var. Sizlerde kendi sayfası üzerinden bu özellikleri inceleyebilirsiniz. Kütüphane dosyalarını şuradan indirebilirsiniz. DataTable nesnesinin belli başlı özellikleri şunlardır.

  • Sayfalama
  • Arama
  • Çoklu kolana göre sıralama
  • Server tabanlı işlemler
  • Birden fazla tema seçeneği
  • Responsive tasarım
  • Farklı dil desteği ve dili kendi isteğiniz doğrultusunda değiştirebilme
  • Açık kaynak

Şimdi örneğimize geçelim. Proje örneğimizde Northwind veritabanının Product tablosunu kullandım.

DataTable’ımızın Özellikleri ;

“serverSide” = Server tabanlı çalışacağını belirtiyoruz.

“ajax” = Ajax işlemi ile verileri çekeceğimiz yeri gösteriyoruz.

“columns” = Kolonlarımızı belirtiyoruz.

“columnDefs” = Bu özellik ilede belirttiğimiz kolonun özelliklerini veriyoruz. Ben Id kolonunun hem görünmemesini hemde search işleminde çıkmamasını sağladım.

Arama yaparken en az 3 karaktere göre veya enter’a basıldığında arama yapılabilmesi için extradan javascript kodu yazmak gerekiyor. Bu kodu Stack Overflow sitesi üzerinden aldım.

Html tarafında ise sadece tablo kolon başlıklarımızı veriyoruz bunun yanında ben bootstrap template kullandığım için class olarak bootstrap’ın “table table-responsive” classlarını verdim.

Ön tarafta yapacaklarımız şimdilik bu kadar. Şimdi de arka tarafa geçelim.

Burada metotta kullanacağımız parametrelerin listesini şu sayfa üzerinden erişebilirsiniz. Kullandığım parametreleri inceleyelim.

draw parametresi ile sunucuya kaç istek yapıldığını,

start parametresi ile kaçıncı kayıttan itibaren veriyi listeleyeceğimizi,

length parametresi ile sayfalamanın boyutunu,

search parametresi ile arama kısmını (ben arama kısmını Product Name kolonu üzerinden yaptım),

order parametresi ile sıralama yapılacak kolonun sayı numarasını ve sıralama tipini (asc veya desc) belirtiyoruz.

columns parametresi ile de kolon bazlı işlemleri yapıyoruz. Kolon üzerinde sıralama yapılıp yapılamayacağı, arama yapılıp yapılamayacağı, arama yapılacaksa arama parametresi sonuçlarını bu parametre üzerinden görüyoruz.


Order işleminde Linq.Dynamic kütüphanesi kullanılmıştır.


Search Class

Order Class

Column Class

ProductVM Class

Projeyi geliştirirken DotNet Awesome sitesindeki Jquery DataTable örneklerinden yararlanılmıştır. Herkese iyi kodlamalar dilerim. Eğer bu nesneyi kullanmak yerine sadece html ile çalışmak isterseniz şu örneğimi inceleyebilirsiniz.

Artık bir bardak su içebiliriz.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir