Paging data tables in jQuery

Question

I have a table with more the fifty records in it. I want to display them in pages of five records per page. My current approach uses jquery datatables, as shown below.

$(document).ready(function () {
    var length = $('#data-datatable tbody tr').length;
    $('#data-datatable').dataTable({
        "bFilter": false,
        "bLengthChange": false,
        "iTotalDisplayRecords" : 5,
        "iTotalRecords":   length
    });
});

This shows all fifty records in one page! How can I get the display I want please?

Answer 1

My assumptions with your question:

1. You have a html-table, that is being populated from the context having all 50 rows.
2. Now you want to do pagination for those elements.

Here, I'm going to show some approaches:

1. Think about Django Pagination . You context variable will do the pagination.
2. Use Django-datatable-view . It directly works with jquery-datatable.

Answer 2

Instead of these two lines:

"iTotalDisplayRecords" : 5,
"iTotalRecords":   length

Try this one line instead:

"pageLength": 5,

More here: https://datatables.net/reference/option/pageLength

Also, in order to actually see the paging buttons, you'll need to add this:

"dom": '<"top">t<"bottom">p<"clear">',