DataTables üzerinde binlerce veri göstermek isteyebiliriz. Ancak DataTables bu verileri eklerken belirli bir süre gecikme yaşayacaktır. Bu gecikme 1 saniye bile olsa listede boşluk göstermek pek de UX Dostu değil. Ayrıca kullanıcı açısından oldukça sıkıcı bir durum olabilir.
Peki DataTables Yükleniyor resmi nasıl gösterilir? DataTables veriler yüklenirken mesaj nasıl gösterilir? Aslında oldukça basit. Bu iş için datatable processing ve datatables processing event kullanacağız. Bu işleme devam etmeden önce işlemlerimizi kullanabilmek için datatables translate özelliğinden faydalanacağız. Projenize eklemediyseniz şuradaki yazımdan ekleyebilirsiniz.
:: DATATABLES TÜRKÇE YAPMA VE TÜRKÇE SIRALAMA
NOT : Spinner, Font Awesome icon kütüphanesi kullanılarak gösterilmiştir.
emptyTable : DataTables boş olduğunda emptyTable içerisindeki yazılar görünür. Burada Veriler yükleniyor mesajını gösteriyoruz. Boş olduğu halde neden Veriler yükleniyor mesajı gösteriyoruz diye soracak olursanız: Datatables’i sayfada ilk oluşturduğumuzda içerisine verileri eklemeden önce bu alanın gözüküyor olması. Yani siz verileri ekliyor bile olsanız burası kullanıcıya görünüyor. DataTables içerisine eklenecek verimiz yok ise Javascript kodu ile buradaki mesajımızı değiştireceğiz. Ayrıca processing anında da ilgili mesajımızı kullanıcıya gösteriyoruz.
"language": {
"emptyTable": "<span class='datatables-empty-message'><i class='fa fa-spinner fa-spin fa-3x fa-fw'></i><span class='sr-only'>Veriler Yükleniyor...</span></span>",
"processing": "<i class='fa fa-spinner fa-spin fa-3x fa-fw'></i><span class='sr-only'>Veriler Yükleniyor...</span> "
}Peki verimiz yok ise ilgili alanda veri bulunamadı mesajınız nasıl göstereceğiz? Aşağıdaki kod yardımı ile bu işlemi kolay bir şekilde çözebiliriz. Verileri çektiğiniz sırada gelen sonuca göre aşağıdaki kodları kullanmalısınız.
var datatablesEmtyMessage = "İlgili kriterlerde veri bulunamadı.";
$('.datatables-empty-message').text(datatablesEmtyMessage);
