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

Jquery Data Table & Asp.net Bölüm 1

6.8.2013 19:43:44
Jqery ve asp.net kardeşliği güngeçtikçe hızla ilerliyor. Malum birde html5 olunca müşterilerinde istekleri çığ gibi büyüyor tabi. Yok sayfa niye yenileniyor yok şuraya tıklayınca neden hepsi gelmiyor illa o sayfayamı geçmem lazım vs. vs. vs hızla ilerleyip gidiyor.Peki neden Jquery Datable da generic handler kullandık normaldede zaten repeaterla yapabiliyoruz diyeceksiniz belki ? Nedeni 100 200 300 kayıtlık bi verinizi çekerken zorlanmazsınız ama 1000 2000 tane verinin birden geldiğini düşünecek olursak bi hayli bekleyeceksiniz. Ama bu şekilde 2 ci sayfaya geçtiğinizde sıradaki veriler gelecektir ve browserınız şişmeyecektir. Saadete gelicek olursak Jquery DataTable çıkmadan önce Ağırlık repeater kullanırdım Evaller falan td leri oturtmalar listelemeler CollectionPAger uğraşdur bide sayfa yenilenmeleri yokmu beni etmesede müşterileri fıtık ettiği kesin. Asp.net ile Jquery DataTable ın Generic Handlar ile nasıl kullanıldığını kısaca anlatmaya çalışacağım. İlk olarak DataTable kütüphanemisi indiriyoruz Şuradan Daha sonra File>New>WebSite diyerek projemizi açıyoruz. Ben kendime göre isi verdiğim çin sizin klasörleriniz farklı olabilir ama işlemler aynı. RESMİ BÜYÜK GÖRMEK İÇİN RESİME TIKLAYIN Default.aspx olarak boş bir sayfa açıyoruz ve head kısmına css ve js kütüphanelerimiz bağlıyoruz. Daha sonra birtane table koyuyoruz thead ve tbody kısımlarını çekeceğimiz kolon isimlerini yazıyoruz. RESMİ BÜYÜK GÖRMEK İÇİN RESİME TIKLAYIN Table ımıza class veriyoruz yada id nedeni javascript kısmında datatable ımızı doldururken elemnt kontrolünü sağlamak. Ben class verdim ve class lara göre dolduruyorum. Sayfadaki işlemlerimiz bitti şimdi geçelim kütüphanemize. RESMİ BÜYÜK GÖRMEK İÇİN RESİME TIKLAYIN Ben GetPerson adında bir function oluşturdum içerisinde işlemlerimi yapıp documentte functionumu direk çağırıyorum ki bağla tabolarımıda dolduruyorsam sadece function isimlerini yazmam yeterli oluyor. Dikkat edeceğimiz nokta ise Belirleyeceğimiz parametreler ve kolonlar. DataTable Api & Pluginlerine Buradan ulaşa bilirsiniz. oLanguage: Datatable ımızın label alanlarıdır. sAjaxSource:Verilerimizi çekeceğimiz kaynaktır. aoColumns: Gelecek kolonlardır. Dikkat : Generic Handlar da Json oalrak geriye kaç kolon döndürürseniz buradada okadar kolon eklemek zorundasınız ! Mesela ben Id ve Name döndürüyorum buraya 2 kolon yazabilirim.Siz daha fazla yazın inat ederseniz Alert olarak sizi selamlarnasıl olsa :) fnRender : Normalde verileriniz site direk gelir ama  fnRender ile istediğiniz html yada vb. şablonunuzu belirleyip o şekildede getirebilirsiniz verinizi. GenericHandler ı anlatmaya gerek duymuyorum çünkü baya bi not düştüm zaten anlayacaksınız. RESMİ BÜYÜK GÖRMEK İÇİN RESİME TIKLAYIN PersonHelper Class ı nerden geliyor diye soracak olursanızda onuda kolaylık olsun diye AppCode a koydum ;) RESMİ BÜYÜK GÖRMEK İÇİN RESİME TIKLAYIN   Download_Click :)   Umarım yeterince anlaşılır olmuştur.Bir sonraki anlatımımda gelen verilerimizi check ederek nasıl sileriz sildiğimiz satırı nasıl gizleri bunlara deyinmeye çalışacağım.      
Yorumlar
  • AS26.1.2016 09:26:36

    Hocam sorunu çözdüm master page deki <!-- jQuery 2.1.4 --> <script src="<% =path.rootURL%>StyleScripts/plugins/jQuery/jQuery-2.1.4.min.js"></script> li kaldırdığımda sorun kalkıyor fakat bu jqueryi kaldırınca master olan yerlerdeki açılır menu falan çalışmıyor .bu ikisi nasıl çakışıyor anlamadım bunun çözümü ne olabilir?

  • AS25.1.2016 11:46:32

    Hocam amacım veritbanından çektiğim verileri datatable da genericHandler kullanarak listelemek sayfayı post ettirmeden güncelleme silme ekleme yapabilmek.

  • AS25.1.2016 11:25:54

    Hocam Datatable Kütüphanesini indirdim fakat içinde DataTables. js yok ama min.js sini falan buldum ekledim sorun halen devam ediyor.Yardımcı olabilriseniz sevinirim.Takip ediyorum...

  • Hasan Akpürüm25.1.2016 01:45:39

    DataTable js kütüphanesinin reference ını eklediğinizden eminmisiniz ? eklenmediği için verir bu hatayı function ı bulamıyor. dataTables.js i reference olarak eklediğinizden emin olun. Sorunu çözemezseniz tekrarn yazın yardımcı olmaya çalışacağım. Kolay Gelsin Saygılarımla

  • As22.1.2016 17:03:18

    Uncaught TypeError: $(...).DataTable is not a function hatasını alıyorum sürekli hocam yardımcı olabilirmisiniz Jquery tüm sürümlerini import ettim ama hatadan kurtulamadım sürekli. Bu konularda Yardım edebilirmisiniz.

Yorum yaz

Thanks, your message is sent successfully.