javascript - DataTable not showing pagination buttons and records info - JQuery - Stack Overflow

admin管理员组

文章数量:1335624

Using Datatable plugin for pagination, I can't get it to display pagination buttons and records information ("Showing X out of Y Records"). It is fetching the records correctly when I am selecting the page size from the drop down just above the table, but for some reason, it is not showing pagination buttons.

My guess is that it has to know the Total Record count of the table, and I am giving it that in the ""iTotalRecords": 10000" part, I have 1000 records in my table, but still it is of no use. What exactly am I missing here?

It is passing the start (page number) and length (page size) params correctly. Below is my code,

$('#leadDetailTable').dataTable({
        "processing": true,
        "serverSide": true,
        "info": true,
        "stateSave": true,
        "lengthMenu": [[10, 50, 100, 500], [10, 50, 100, 500]],
        "iTotalRecords": 10000,
        "iDisplayLength": 10,
        "searching": false,
        "scrollY": false,
        "scrollX": false,
        "ajax":{
            type: 'POST',
            url: '@Url.Action("SearchLeads", "ResourceManagement")',
            data: args,
            success: function (result) {
                /* Do things with result */
            },

        }
    });

Using Datatable plugin for pagination, I can't get it to display pagination buttons and records information ("Showing X out of Y Records"). It is fetching the records correctly when I am selecting the page size from the drop down just above the table, but for some reason, it is not showing pagination buttons.

My guess is that it has to know the Total Record count of the table, and I am giving it that in the ""iTotalRecords": 10000" part, I have 1000 records in my table, but still it is of no use. What exactly am I missing here?

It is passing the start (page number) and length (page size) params correctly. Below is my code,

$('#leadDetailTable').dataTable({
        "processing": true,
        "serverSide": true,
        "info": true,
        "stateSave": true,
        "lengthMenu": [[10, 50, 100, 500], [10, 50, 100, 500]],
        "iTotalRecords": 10000,
        "iDisplayLength": 10,
        "searching": false,
        "scrollY": false,
        "scrollX": false,
        "ajax":{
            type: 'POST',
            url: '@Url.Action("SearchLeads", "ResourceManagement")',
            data: args,
            success: function (result) {
                /* Do things with result */
            },

        }
    });

• javascript
• jquery
• pagination
• datatables

Share Improve this question Follow edited Apr 8, 2016 at 12:47 Anss asked Apr 8, 2016 at 12:42 AnssAnss 67422 gold badges77 silver badges2323 bronze badges 5

• Are they in the DOM but hidden? – annoyingmouse Commented Apr 8, 2016 at 15:10
• <div class="dataTables_paginate paging_simple_numbers" id="leadDetailTable_paginate"></div> Only this div is shown in the DOM. – Anss Commented Apr 11, 2016 at 5:02
• And are there any warnings in the console? – annoyingmouse Commented Apr 11, 2016 at 6:51
• Hi @Anss, did you get any solution for the thing which you mentioned? I am facing the same issue. – Jivan Commented May 23, 2019 at 9:23
• Hello @Jivan, I don't quite remember how I got past this but I will strongly remend you to check the answer given below, the response of the ajax request must contain all the required parameters. – Anss Commented May 24, 2019 at 9:34

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

Have you tried adding following parameters:

 "bPaginate":true,
 "sPaginationType":"full_numbers",
 "bLengthChange": true,
 "bInfo" : true

I had the same issue and it was because I returned the wrong recordsFiltered value from the server-side. Make sure that the recordsTotal value represents the number of records(rows) in the table and the recordsFiltered value represents the number of rows that should stay hidden of the total rows. DataTables uses this information to create the pagination buttons.

Add the below property

"pagingType": "full_numbers"

What is the response being returned by the ajax request? It should include the following:

{
    data: <the array of row data>,
    draw: <the same value the request had for its draw value>,
    recordsTotal: <the total number of records>,
    recordsFiltered: <the total number of records after filtering>
}

If you don't want it to say "filtered from x records", then count the records after filtering and set both recordsTotal and recordsFiltered to that value.

本文标签： javascriptDataTable not showing pagination buttons and records infoJQueryStack Overflow