Programlama

Bu adımda DataTables nesnesine javascript değişkenini kullanarak data aktarma gösterilecek, her zamanki gibi boş bir .Net MVC projesi oluşturup DataTables'ı kullanabilmek için Css ve Js dosyalarını ekliyoruz, son olarak 'Example4' adında controller oluşturup bu controlle'a aynı isimde bir View bağlandı. Neyse harici bir dosyadaki Json verisinin DataTables'a verikaynağı olarak verilmesi ile neredeyse aynı bir yolu deneyeceğiz ve verileri bir javascript değişkenine atayıp bu değişkeni DataTables'a vereceğiz, hepsi bu kadar.

Kaynek kod en alttadır.








Kaynak Kodlar

DataTables komponentinde veri kaynağı olarak farklı yollar vardır, en basiti manuele olarak html etiketleri ile verileri vermektir ki bu yöntem sürekli değişen verileri listelemek için kullanılamaz, bunun dışında ilk olarak harici bir dosyadan veriler çekilerek listelenebilir, ikinci olarak  bir javascript dizi değişkenine atanmış olan veri kaynağı kullanılabilir, üçüncü olarak ve en önemli olanı  serverdan çekilen verilerin DataTables'a aktarılması.

1_) Harici bir dosyadan veri çekmek. Kaynak Kodlar en alttadır.















Bu adımda "ajax:myData.txt" yanlış yazdım ve sonuçta sayfayı görüntülerken hata aldım ve hatayı düzeltmek için iligili kısım "../ajax:myData.txt" olarak değiştirdim, bir sonraki görselde.


Veri kaynağı olarak kullanılan diğer yöntemler bider yazıda işlenecektir.

Kaynak Kodu İndir

Bir önceki yazıda DataTable'ın ne olduğu ve adım adım nasıl bir C# MVC projesinde her hangi bir veri sağlayıcı kullanmadan DataTable'ın kullanımı gösterildi. Bu makalede ise yine static veriler kullanarak DataTable'ın özelliklerini anlatmaya çalışacağım ve daha sonraki DataTable yazılarında farklı veri kaynaklarından gelen verileri DataTable'a nasıl yollanacağını göstereceğim. Bu yazıyı anlatmaya oluşturulmuş hazır sıfır bir C# MCV projesi üzerinden anlatmaya başlıyacağım, boş bir C# MVC projesi oluşturmayı bilmeyenler DataTable için yazdığım yazıların ilkine bakabilirler.


1: Projeye Controller eklemek






 2: Controller'a action eklemek


 3: DataTables'ın çalışabilmesi için Css ve Js dosyalarının referanslarının eklenmesi.

 4: DataTables'ın web sitesinden html etiketlerinin ve js kodlarının alınması ve sayfaya eklenmesi.

 5:DataTables ilk yüklendiğinde belirli kolonlara göre sıralayarak getirmek.



6: Bir kolonu gizlemek;



7: Dikey kaydırma çubuğu eklemek;


Kaynak Kod Dosyasını İndir

"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 '