JS - DataTables 关于每页显示数的控制

简单介绍

ataTable是一个十分有用的表格管理插件，在使用的过程中，我们只需要将数据给到datatable，datatable就能自动给我们管理表格，其功能包括分页、排序、搜索，等等。

这个前端插件还有个特点，就是显示字段由后端控制，数据请求，也是以接口的方式。

因此，刚接触的人，可能会不清楚，每页显示条目在哪里控制，我一开始走了弯路，现将"每页显示数的控制"，总结如下。

问题关键

iDisplayLength:pageShowNums   // 每页显示数

代码示例

JS代码操作位置：

let options = {
    serverSide: true,
    paging: true,
    searching: false,
    ordering: false,
    iDisplayLength:100, // 【1】
    ajax: {
        url: "/user-manages" // 【2】
    },
    columns: [
        @foreach ($columns as $column)
        {data: "{{ $column->name }}"} @if (!$loop->last) , @endif
        @endforeach
    ], // 【3】
    rowCallback: function(row, data) {
        @can('manage diantai user')
        let actions = '<a href="/user-manages/' + data.id + '/edit" class="btn btn-primary">编辑</a>'
        actions += '<button class="btn btn-sm btn-delete" data-id="' + data.id + '"
 data-toggle="modal" data-target="#modal_confirm">删除</button>';
        $('td:eq({{ count($columns) }})', row).html(actions)
        $('#count_num').text(data.count);
        @endcan
    }
}

注解解释

【1】：就是控制列表显示条目数的设置，这些都是在js端控制

【2】：请求数据接口，即，你当前页的数据就是从这个接口请求而来

【3】：这部分，就是负责将后端的表格标头信息数据遍历展示