synaptik synaptik - 5 months ago 26
jQuery Question

Javascript toggle paging on all dataTables

I'm struggling to make a js function that will toggle paging on all the dataTables on my page. What am I doing wrong?

Note: whenever I run

togglePaging()
in the Chrome console, I get
undefined
as a response.

var globalPaging = true;

function togglePaging() {

globalPaging = !globalPaging;

$('.dataTable').each(function(){

var oTable = $(this).dataTable();
var oSettings = oTable.fnSettings();
oSettings.aoColumns[1].bPaginate = globalPaging;

var oTableDT = $(this).DataTable();
oTableDT.draw();

});
}

$(document).ready(function(){
$('table.toDataTable').DataTable({
"bPaginate": globalPaging
});
});


Here's a demo:
jsfiddle.net/8n1nj0bu




Update: Here is the solution I went with, derived from Teddy's answer: jsfiddle.net/jyf8h2je

Answer

The draw() function update your table content only. If you want change other property, maybe you need re-init your table. Draw API: https://datatables.net/reference/api/draw

My example:

$('.dataTable').each(function(){
    var oTableDT = $(this).DataTable({ 
        "bPaginate": globalPaging,
        "bDestroy": true
    });
});

https://jsfiddle.net/8n1nj0bu/1/

This solution has an disadvantage that is you need re-init all your properties.

Note: My FF43 cant run onclick, so I use jquery instead.

Comments