ASP.NET MVC JQuery DataTable Kullanımı

Arkadaşlar merhabalar,

Bugün sizlere Jquery’e ait, HTML tablo olan DataTable’ı anlatacağım. Ama öncelikle ‘Neden DataTable ?’ sorusuna cevap vereyim. Bizlere sağladığı 2 avantajı var bu arkadaşın.

1. Verilerin tümü yüklenmeden, client tarafında kullanıcıya bir kısmının gösterilerek arka tarafta verileri yüklemeye devam etmesi

Şöyle düşünün 10 bin kayda sahip bir tablonuz olsun. Arkadan 10 bin kaydı da çekmek istediniz. MVC’de, Controller tarafında .ToList() fonksiyonu ile çektiniz ve ön tarafa gönderdiniz. Sizce 10 bin kaydın aynı anda yüklenmesini beklemek mi daha mantıklı yoksa parça parça yüklenerek kullanıcıya bir miktarının gösterilmesi mi ? Tabi ki ikinci seçenecek. (Verileri Ajax çağrısı ile JSON şeklinde çekerseniz daha hızlı olacaktır ancak öncelikli hedefimiz MVC’nin kendi nimetlerinden yararlanmak).

2. Arama(searching), sayfalama(paging) ve satır gösterim sayısı(row display count) işlemlerini client tarafında yürütülmesi

O zaman vakit kaybetmeden örneğimize geçelim ;

Uygulamamı Northwind veritabanı üzerinden yapacağım ve Gençay Yıldız’ın sitesi üzerinden Türkçe versiyonunu indiriyorum.

http://www.gencayyildiz.com/blog/northwind-turkce-versiyonu/

HomeController adında bir Controller oluşturuyorum ve içerisindeki Index ActionResult’ı içerisine Müşteriler tablosundaki verileri çekiyorum.

Bir adet View ekliyorum ve çektiğim verileri IEnumerable olarak buraya gönderiyorum.

https://datatables.net/ linkine girerek kullanım için gerekli CSS ve JS dosyalarının CDN adreslerini alarak View’ıma ekliyorum.

Bir adet table oluşturuyorum ve buna da tblCalisanlar id’sini veriyorum.

THead : Tablodaki başlıkların bulunduğu yeri ifade eder.
TBody : Verilerin görüntüleneceği yeri ifade eder.

Burada dikkat etmemiz gereken husus, kaç tane th etiketimiz var ise tbody bölümünde de o kadar td etiketi olmak zorundadır.

Görüntülenecek başlıklarımı thead kısmında belirledikten sonra, tbody kısmında da gelen veriyi foreach döngüsü ile dönerek hangi kolonların görüntüleneceğini belirtiyorum.

Tabi ki işimiz burada bitti mi ? Bitmedi. tblCalisanlar id’sine sahip tablonun DataTable olduğunu belirtmemiz lazım ve Türkçe de yapsak fena olmaz hani. Onun için de script taglerim içerisine şu kodu yazıyorum.

Index sayfasının tam kod hali de şu şekilde ;

Peki nasıl görünüyor bi de ona bakalım ;

İşte bu kısımlar da client taraflı çalışanlar.

Bugünlük anlatacaklarım bu kadar. Bir sonraki makalede görüşmek üzere.

Esenle kalın…

İndirme linki

You may also like...

2 Responses

  1. Kübra dedi ki:

    Açık ve anlaşılır bir anlatım ellerinize sağlık.

  2. Tuna dedi ki:

    Cengiz Bey Teşekkürler.

Bir cevap yazın

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