How to change table's page length dynamically

Question

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 });
    }
});

Enloe

Answer 1

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();
    }
});

Phobe

this method is working, but other data table functions are not working after this method fired, like show select box is disapper and pagination option too – Netsuke

This method changes the number of rows shown, but the number in the Show x Entries select box remains the same. Is there a way to change that too or the select box has to be edited manually by jQuery or such? – Khajeh

Answer 2

To change the pageLength parameter use:

var table=$('#dataTable').DataTable({
    paging: true,
    sort: true,
    scrollX: true,
    searching: true,
    lengthMenu: [[2,5,10,25, 100, -1], [2,5,10,25, 100, "All"]],
    pageLength: 5,
});
table.page.len(-1).draw();

Article

Answer 3

The Javascript shown below is used to initialise the table with the length of the page shown

new DataTable('#example', {
    lengthMenu: [
        [10, 25, 50, -1],
        [10, 25, 50, 'All']
    ]
});

Rubyeruch