DataTables veri listelemede kullanılan oldukça popüler bir kütüphane. DataTables veri eklemek için birden fazla yöntem var. Bu yöntemlerden bir tanesi de ajax ile veriyi sunucu tarafından çekip DataTables içerisine eklemek. Sunucu tarafından gelen veri boyutunu minimum tutmak ve bant genişliğini azaltmak için çoğu zaman json tercih edilir. Peki DataTables JSON veri nasıl eklenir?
DataTables’e ekleyeceğimiz veriyi direk olarak DataTables’e ekleyemeyiz.
C# ASP.NET MVC DataTables için JSON Serialize
Verilerimizi gösterebilmek için JSON Kütüphanesini kullanarak ilk olarak serialize etmeliyiz. C# dilinde serialize işlemi nasıl yapılır? derseniz oldukça kolay. Aşağıdaki kod yardımı ile json serilize yapabiliriz.
ASP .NET MVC Serialize
public JsonResult PersonelListesiJSON() { _personelManager = new PersonelManager(); var personelListesi = _personelManager.PersonelListesi(); // Gelen json verisini serialize ettiğim kısım var serilize = JsonConvert.SerializeObject(personelListesi); // Daha sonra veriyi view tarafına gönderiyorum. serilize verilerimi taşıyan değişken. return Json(new JsonSonuc { Success = true, Data = serilize }, JsonRequestBehavior.AllowGet); }
C# ASP .CORE 2 DataTables için JSON Serialize
Yukarıdaki kodda ASP.NET MVC için serialize işlemlerini görebilirsiniz. Peki .NET CORE 2 de serialize nasıl yapılır?
public async Task<JsonResult> DersListesiGuncelle() { try { var sonuc = await Task.FromResult(_dersIslemleri.GetAllDersler()); // Gelen verinin Serialize edildiği bölüm var jsonConvertData = JsonConvert.SerializeObject(sonuc.Data); return new JsonResult(new Result { isSuccess = sonuc.isSuccess, Message = "Ders Listesi Güncellendi.", Data = jsonConvertData }); } catch (Exception) { return new JsonResult(new Result { isSuccess = false, Message = "Ders Listesi Güncelleme Hatası." }); } }
Verilerimizi serialize ettikten sonra DataTables’e eklemeden önce view tarafında verileri parse etmemiz gerekiyor. Peki json veri nasıl parse edilir?
var parseEdilmisVerimiz= JSON.parse(viewTarafinaGelenJsonVeri);
Yukarıdaki gibi veriyi parse ettikten sonra DataTables içerisine veriyi ekleyebiliriz.
$('#dataTables').dataTable().fnAddData(parseEdilmisVerimiz);
İşlemlerimiz bu kadar. Artık verilerimizi DataTables üzerinde görebiliriz.