时间戳

首页 > 解决方案 > 无法在数据表上实现分页

jquery - 无法在数据表上实现分页

问题描述

这是我的代码片段（其余的只是列定义和 initComplete 实现）：

table = jq('#example').DataTable( {
             "select":{
                "style": "multi"
             },
             "processing": true,
             "serverSide": true,
             "lengthChange":true,
             "pageLength":10,
             "order":[[1,"asc"]],
             "dom": "Bfrtip",
             "ajax": '/'+localeCodeShort+'/umbrella/api/get-users',

  });

它显示了抽签中的所有记录（总共 103 条），而不是只有 10 条。不知道为什么？

更新

这是我的 HTML：

<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th></th>
            <th>Id</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email Address</th>
            <th>Status</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th></th>
            <th>Id</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email Address</th>
            <th>Status</th>
            <th>Actions</th>
        </tr>
    </tfoot>
</table>

这是我的 JSON 示例：

    {
  "draw": 1,
  "recordsTotal": 103,
  "recordsFiltered": 103,
  "data": [
    [
      "",
      "1",
      "Jonathan",
      "Reid",
      "reid@gmail.com",
      "1",
      ""          
    ],
    [
      "",
      "2",
      "Someone",
      "Foryou",
      "someadd@gmail.com",
      "1",
      ""
    ]
  ]
}

这是我的列定义：

\"columnDefs\": [ 
                    {
                        \"orderable\":false,
                        \"className\":\"select-checkbox\",
                        \"targets\":0,
                        \"width\":\"5%\"
                    },
                    {
                        \"targets\": " . $dataTable -> actionCol . ",
                        \"data\": null,
                        \"defaultContent\": \"" . $btnHtml . "\"
                    },
                    {
                        \"targets\":-2,
                        \"className\":\"select-status\",
                        \"searchable\":true
                    },
                    ],

另外，我目前返回所有 103 条记录

标签： jquerydatatables

解决方案

您是否尝试将“分页”变量设置为 true？

table = jq('#example').DataTable( {
     "select":{
        "style": "multi"
     },
     "processing": true,
     "serverSide": true,
     "lengthChange":true,
     "paging":true,
     "pageLength":10,
     "order":[[1,"asc"]],
     "dom": "Bfrtip",
     "ajax": '/'+localeCodeShort+'/umbrella/api/get-users',
});

推荐阅读