How to DataTable show minimum rows of page

Question

datatables.net

I add data to the table 5 rows 2 pages and show 4 rows per page

but when I change to page two table just had 1 row.

I want to table show remaining data and blank rows for all pages.

$(".data-table").DataTable({
    lengthMenu: [ [4, 10, 25, 50, -1], [4, 10, 25, 50, "All"] ],
    pageLength: 4
}); 

I want this.

Answer 1

Could you try this :

var table = $('#cartTable').DataTable( {
            lengthMenu: [ [4, 10, 25, 50, -1], [4, 10, 25, 50, "All"] ],
            pageLength: 4,
            "order": [[1, 'desc']],
            initComplete: function () {
                var info = table.page.info();
                var emptyRecordsToAdd = info.length-(info.recordsTotal%info.length);
                var row = ['','','','',''];
                for (let i = 0; i < emptyRecordsToAdd; i++) {
                    table.row.add(row).draw(false);
                }
            }
        });

The initComplete will execute when your table has fully been initialised.

The order "order": [[1, 'desc']] is required to force adding the empty rows at the end.