"DataTables" jQuery JavaScript Library için geliştirilmiş bir eklentidir. DataTables ile veritabanından çekilen veriler çok kolay bir şekilde HTML Table'da listelenebilir. Ayrıca DataTables filtreleme, sayfalama, sıralama, arama gibi işlemleri kendisine verilen veri kaynağı üzerinde yapabiliyor ve size de sadece veri kaynağını DataTables'a vermek kalıyor. DataTables Amazon.com gibi büyük şirketler tarafından da kullanılmakta. DataTables jQuery UI , Bootstrap, Foundation gibi temaları destekler ve istenildiği gibi görselliği değiştirilebilir. DataTables açık kaynak bir yazılım kaynak kodları indirdikten sonra istediğiniz değişiklikleri yapabilir ya da sadece alıp kullanabilirsiniz.
DataTables Web Sitesi
Bu yazı dizisinde DataTables'ı çeşitli örenkler üzerinden anlatmaya çalışacağım, bu blog yazısında DataTables ile ilgili yazdığım ilk makale. Bu yazıda DataTables ile basit bir örnek ile başlayıp ilerleyen makalelerde DataTables'ın daha ileri düzey kullanımlarına kadar bilebildiğim her şeyi anlatmaya çalışacağım. Örnekleri Visual Studio 2015 .Net MVC projesi üzerinden anlatacağım ama sadece ilk etapta sadece html, css, jQuery ve javascript kullanacağım için basit bir editör ile de bu işlemler takipedilebilir, C# server Side ile işlemler yaparken ilerleyen yazılarda kullanılacak.
1: Yeni Bir Proje Oluşturmak.
2: ASP.NET Web Application Projesi Seçilir.
3: Empty ve MVC seçilir ve 'OK' diyerek proje oluşturulur.
4: Empty ASP.NET MVC Uygulamasının ilk hâli
5: MCV uygulamasına DataTables'ın sitesindenki Css ve JS dosyalarının dahil edilmesi gerekiyor.
6: Uygulamada Css dosyalarının tutulacağı klasörün oluşturulması
7: Uygulamada JS dosyalarının tutulacağı klasörün oluşturulması
8: DataTables sitesindeki Css kodlarını projeye dahil etmek için Css klasörü altına Style dosyası ekleniyor.
9: DataTables'ın Css kodlarını tutacak Dosyanın adını 'DataTablesCss.css' olarak verdim, bu isim istenildiği gibi değiştirilebilir ama sanırım isimlendirme için en doğru yol DataTables sitesinde verilen ismi ile kullanmak olsa gerek.
10: DataTables sitesinden Css kodları kopyalarnır ve 'DataTablesCss.css' dosyasına yapıştırılır.
11: Aynı şekilde klasör ve dosya oluşturup kaynak kodlarını yapıştırmak javaScript kodları için de yapılır. Bu adımda JS dosyalarını tutmak için klasör oluşturuluyor.
12: DataTables'ın JS kodlarını tutacak Dosyanın adını 'DataTablesJS.js' olarak verdim.
13: DataTables sitesinden JS kodları kopyalanır ve 'DataTablesJS.js' dosyasına yapıştırılır.
14: .NET MVC projesinde her bir View bir Controller altında bulunan Action(bir method) ile kontrol ediliyor, bu nedenle uygulamada 'Controller' klasörü altına bir Controller ekleniyor.
15: Controller Empty olarak ekleniyor.
16: Controller'ın adı 'ExampleController' olarak veriliyor. Ek not: Controller'ların isimleri istenildiği gibi verilebilir ama sonlarında 'Controller' kelimesi eklenmek zorunda yoksa projedeki ilgili 'Controller' altındaki action'lar çalışmayacaktır.
17:Bu Controlle'a alttaki gibi bir action elenir
18: 'Example1' isimli action'na bir View ekleniyor. Ek not: View içerisinde html elemanları barındıran .cs uzantılı bir dosyadır ve her bir view bir action method ile kontrol edilir.
19: View'in adı da action method'un adı ile aynı olacak.
20: Oluşan view'in ilk hali alttaki gibidir.
21: View'e altta bulunan sayfadan HTML tab'ı altındaki html etiketleri kopyalanıp yapıştrılıyor.
22: DataTables'ın çalışabilmesi için JS klasörü altına 'jQuery-1.12.4.js' dosyası internetten indirilip eklenmesi gerekiyor ve Css ve JS dosyalarının referansları altta gösterildiği gibi ilgili View dosyasına ekleniyor.
Kaynak Kodlarını İndir
23: DataTables'ın çalışabilmesi için html table elemanımızı seçip DataTables'ın JS dosyasında bulunan 'DataTable()' metodunun çağırılması gerekiyor, alttaki resimde bu kodların eklenmesi gösteriliyor. Ek not: Eğer javascript bilmiyorsanız alttaki resimde gösterilen kodlar size yabancı gelecektir, ilk olarak javascript kodları bir html dosyasında '
Kaydol:
Kayıt Yorumları (Atom)
0 yorum