javascript

Datatable’ ı Responsive Mobil Uyumlu Yapma

Merhaba, projelerinize datatable ekleyerek verilerinizi sayfalarda daha rahat gösterebiliyorsunuz. Ayrıca çıktı almak ve arama yapma işlemleri hem sunucuya bir yük getirmiyor hemde hızlı oluyor. Çünkü bu işlemler kullanıcının tarayıcısında gerçekleşiyor.

Datatable‘ ı sitenize eklediğinizde responsive ayarını true yapsanızda mobil de bazı templatelerde sıkıntı çıkarmakta. Bu nedenle sitenin mobil uyumluluğu bozuluyor. Bu durum için datatable‘ ı responsive yani mobil uyumlu yapmak için aşağıdaki kodu kullanabilirsiniz.

Peki bu kod tam olarak ne yapıyor derseniz. Tablonun dışına fazladan bir div ekliyor ve tablo o div içinde kalıyor. Bu div’ e yatay ekseninde scroll ekliyor ve tablo mobil uyumluluğu bozmadan div içerisinde kaydırılabilir olarak kullanılabiliyor.

$( document ).ready(function() { 
 $('.table').wrap("<div style='\n\
     overflow: auto;\n\
     overflow-y: hidden;\n\
     -ms-overflow-y: hidden\n\
     position:relative;\n\
     margin-right:5px;\n\
     padding-bottom: 15px;\n\
     display:block;\n\
 '>/");
});

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir