Hasan Akpürüm
Kıdemli Yazılım Danışmanı
Makele Detayı

Asp.net Mvc Jquery DataTable Entegrasyonu

1.8.2015 02:00:00

Asp.net Mvc Jquery DataTable Entegrasyonu

Bu makalemde sizlere asp.net mvc'de jquery datatable entegrasyonunu anlatmaya çalışacağım.

JqueryDataTableExamp isimli boş bir mvc projesi açıyoruz.



Sıra geldi DataTables referencelarımızı Nuget dan indirmeye 
projemize sağ tıklıyor Manage Nuget Packages'ı açıyoruz.

Karşımıza çıkan ekrandan sağ taraftaki arama ekranına datatables yazıp aratıyoruz.Karşımıza ilk şıan DataTables kütüphanesini indiriyoruz.

İnirme işlemi bittikten sonra Script klasörümüze jquery ve datatable kütüphanelerimiz geliyor.

Birtane HomeController ekliyoruz ve Index view i ekliyoruz.

Ben örnek proje olduğu için Model klasörüne entity nesnesini ve Model View arasında haberleşecek

DataTableModel nesneyi ekledim.

Customer ise entity nesnem 

Static olarak oluşturacağımız data sayısı



Type a göre kullanacağımız Compare Methodlarımızı yazdık

İstek yapıldığında datamızı filtreleyecek method 'umuz


Wher koşullarımızı belirlemek için Function yazdık

Kolona tıklandığında hangi kolondan geldiğinin index ini aldık ve kolon'a göre Sort işlemlerimizi kontrol ederek yaptık

Eğer kullanıcı serach kutusundan arama yaptıysa filter function'ı null olmaz bu durumda where koşulu uygulanır eğer search yapılmamışsa where koşulu uygulanmadan data direk gelir.



View tarafında scriptlerimizi reference gösterdik isterseniz bundle yapabilirsiniz ben direk yazdım

example id li table ımızı oluşturduk 

Sıra geldi datatable ı bağlamaya. İstek yapılacak Action ımızı ve kolonlarımızı belirledik.


Ve muulu son :)




 

Download Project

Umarım faydalı bir makale olmuştur. Kolay Gelsin Hepinize

Yorumlar
  • Hasan Akpürüm5.1.2018 17:57:37

    Download linki düzeltilmiştir

  • legendary4.1.2018 13:40:04

    Download Project de uçmuş

  • Hasan Akpürüm7.11.2015 16:35:21

    Merhaba, Hard diskte veri kaybı yaşandığı için ekran görüntülerinin yedeği bulunmamaktadır. Projei İndir linkinden projeyi indirerek inceleyebilirsiniz. Saygılarımla

  • hakkı karahan6.11.2015 23:03:52

    ekran görüntüleri ucmuş

Yorum yaz

Thanks, your message is sent successfully.