jquery数据表分页不显示页数答案

【问题标题】：jquery datatable pagination not showing page countsjquery数据表分页不显示页数
【发布时间】：2016-07-20 07:49:47
【问题描述】：

您好，我正在将 jquery 数据表 1.9.4 用于人口服务器端处理表。数据正在正确加载。但分页没有按预期工作。实际上它有超过 30 行和下一个，上一个和页码不起作用

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

服务器端代码

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

【问题讨论】：

标签： jquery datatables

【解决方案1】：

您正在使用totalListSize 变量中存储的相同值初始化两个参数iTotalRecords 和iTotalDisplayRecords。但是变量totalListSize 保存返回的记录数，但它应该保存数据库中的记录总数。

来自documentation：

iTotalRecords

过滤前的总记录数（即数据库中的总记录数）

iTotalDisplayRecords

过滤后的总记录数（即应用过滤后的总记录数 - 而不仅仅是此结果集中返回的记录数）

您需要分别计算数据库中的记录总数并将其分配给iTotalRecords和iTotalDisplayRecords。

例如，如果您有30 记录，并且只有5 可以显示在一个页面上，您的响应应该是这样的：

{

    "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 ... 
    ]
}

【讨论】：

感谢您的支持。我已经用我的表的记录大小更改了 iTotalRecords。但仍然没有在底部只显示 1 页码，实际上我有 30 条记录。

【解决方案2】：

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

你可以参考上面的链接。

我在我的 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
        });
    }

【讨论】：