Search code examples
javascriptjquerydatatabledatatableswindow-resize

How to change table's page length dynamically


Is there a way to change the pageLength setting of the dataTable on runtime within the "window.resize" event of jQuery?

These are the dataTable settings I'm using

$('#dataTable').DataTable({
    paging: true,
    pageLength: 35,
    searching: true,
    lengthChange: false,
    info: false,
    scrollCollapse: true,
    scrollY: "calc(74vh)"
});

I want the pageLength to change, whenever the window is resized.

I'm trying this

$(window).resize(function () {
    if ($(this).height() >= "1080"){
        // change the dataTable pageLength in here
        $('#dataTable').DataTable({ pageLength: 50 });
    } else {
        // default pageLength
        $('#dataTable').DataTable({ pageLength: 35 });
    }
});

Solution

  • Use page.len() API function to change page length dynamically.

    $(window).resize(function () {
        if ($(this).height() >= 1080){
            // change the dataTable pageLength in here
            $('#dataTable').DataTable().page.len(50).draw();
        } else {
            // default pageLength
            $('#dataTable').DataTable().page.len(35).draw();
        }
    });