jquery datatable pagination not showing page counts

问题

Hi i'm using jquery data table 1.9.4 for population server side processing tables.The data's are loading correctly. but the pagination is not working as expected. Actually it has more than 30 rows and the next,previous and page numbers not working

var sTableAllCustomers = $('#tblAllCustomers').dataTable({
                "bDestroy": true,
                "bProcessing": true,
                "bServerSide" : true,
                "bLenthChange" : false,
                "iDisplayLength": 5,
                "aLengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
                "sPaginationType" : "full_numbers",
                "sAjaxSource" : "loadAllCustomers",
                "oLanguage" : {
                    "sSearch" : "Search By Email ID:"
                },
                "aoColumns" : [
                 {"sTitle" : "No.","mData" : null,"aTargets": [ 0 ],
                    "fnRender" : function(obj) {
                        var columnIndex = obj.oSettings._iDisplayStart + obj.iDataRow+1
                        return columnIndex;
                    }
                },
                {"sTitle" : "Email ID","mData" : "email", "bSearchable" : true},
                {"sTitle" : "Devices","mData" : "device", "bSearchable" : false},
                {"sTitle" : "App Edition","mData" : "edition", "bSearchable" : false},
                {"sTitle" : "Account Type","mData" : "accountType", "bSearchable" : false},
                {"sTitle" : "Activated Date","mData" : "activatedDate", "bSearchable" : false},
                {"mData" : "id", "bSearchable": false,
                    "mRender": function (data, type, full ) {
                         return '<a id="'+data+'" datakey="'+full['key']+'" class="btnViewMoreInAllCustomers btn tooltipped more color-sec" data-tooltip="More" data-position="left"> <i class="mdi-notification-more"></i></a>';
                      }
                }
                ],
                   "fnServerData" : function(sSource, aoData, fnCallback) {
                    $.ajax({
                     "dataType" : 'json',
                     "type" : "GET",
                     "url" : sSource,
                     "data" : aoData,
                     "success" : fnCallback
                    });
                   },
            });

The server side code

int totalListSize = modals != null ? modals.size() : 0;
        CustomerDataTableObject dataTableObject = new CustomerDataTableObject();
        // the total data in db for datatables to calculate page no. and
        // position
        dataTableObject.setiTotalDisplayRecords(totalListSize);
        // the total data in db for datatables to calculate page no.
        dataTableObject.setiTotalRecords(totalListSize);
        dataTableObject.setsEcho(Integer.parseInt(request.getParameter("sEcho")));
        dataTableObject.setAaData(modals);
        Gson gson = new Gson();
        String json = gson.toJson(dataTableObject);

回答1:

You're initializing two parameters iTotalRecords and iTotalDisplayRecords with the same value stored in totalListSize variable. However variable totalListSize holds the number of records returned, but it should hold total number of records in the database.

From the documentation:

iTotalRecords

Total records, before filtering (i.e. the total number of records in the database)

iTotalDisplayRecords

Total records, after filtering (i.e. the total number of records after filtering has been applied - not just the number of records being returned in this result set)

You need to calculate total number of records in the database separately and assign it to iTotalRecords and iTotalDisplayRecords.

For example, if you have 30 records and only 5 can be displayed on one page, your response should be something like:

{

    "sEcho": 1,
    "iTotalRecords": 30,
    "iTotalDisplayRecords": 30,
    "aaData": [
        {
            "DT_RowId": "row_8",
            "DT_RowClass": "gradeA",
            "0": "Gecko",
            "1": "Firefox 1.5",
            "2": "Win 98+ / OSX.2+",
            "3": "1.8",
            "4": "A"
        },
        // ... 4 more entries ... 
    ]
}

回答2:

https://stackoverflow.com/posts/38213104/revisions

you can refer the above link.

i use the following code in my EntityController

public async Task<IActionResult> LoadDataAsync([FromForm]JqueryDataTablesParameters parameters)
    {
        var (data, filtered, total) = await GetAllAsync(parameters, "Id", "Code", "Name");

        //Returning Json Data  
        return Json(new JqueryDataTablesResult<GradeDto>
        {
            Draw = parameters.Draw,
            Data = data,
            FilteredRecords = filtered,
            TotalRecords = total
        });
    }

来源：https://stackoverflow.com/questions/38475379/jquery-datatable-pagination-not-showing-page-counts

标签

jquery

datatables