ThinkPHP3.2使用Datatables的服务器模式

研究了一上午的Datatables（简称“dt”， 官网 /  中文网）插件，实现了dt的 服务器模式，实现从后台分页获取数据、排序、搜索和国际化功能。

HTML代码，注意：第0列是checkbox，第3列“操作”列准备放置a标签

<div class="table-responsive">
    <table id="dt" class="table table-hover table-striped table-bordered">
        <thead>
        <tr>
            <th>
                <input type="checkbox" id="cb-select-all" autocomplete="off">
            </th>
            <th>供应商编号</th>
            <th>供应商名</th>
            <th>操作</th>
            ...
            <th>备注</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
<!-- /.table-responsive -->

 

JS代码，服务器模式必须开启（serverSide:true），ajax和language对应的url是ThinkPHP3.2的写法

$('#dt').dataTable({
    "processing": true, // 正在加载
    "serverSide": true, // 服务器模式
    "language": {url: '__PUBLIC__/assets/datatables_cn.json'},    // 语言汉化
    "ajax": "{:U('Supplier/page')}",    // 分页请求url
    "lengthMenu": [25, 50, 100, 200],  // 左上角每页显示的数据条数
    "order": [[1, 'desc']],  // 第0列为checkbox，默认以第一列进行排序
    rowId: 'sup_id',    // 根据返回数据中的字段作为列的id
    columns: [  // "orderable": false，不参与排序；"searchable": false，不参与搜索
       {data: null, "orderable": false, "searchable": false},   // 第0列为checkbox
       {data: "sup_id"},
       {data: "sup_name", "orderable": false},
       {data: null, "orderable": false, "searchable": false},   // 第3列为a标签
       ...
       {data: "note", "orderable": false}
    ],
    columnDefs: [{
        targets: 0, // 第0列
        render: function (data, type, row, meta) {  // 自定义第0列的内容
            return '<input type="checkbox" id="cb-select-' + row.sup_id + '" name="cb-select-list" autocomplete="off">';
        }
    }, {
        targets: 3,
        render: function (data, type, row, meta) {
            return '<a href="javascript:;" data-toggle="modal" data-target="#editorModal" class="edit">编辑</a>'
        }
    }]
});

columns和columnDefs参数是配合使用的，前者绑定从后台获取的数据的字段名（顺序不能乱），后者对各字段进行详细配置。

自定义列内容：之前说了，第0列是checkbox，所以columns下第一个data对应的值为null，然后在columnDefs中配置targets为0的列不参与排序并自定义内容。自定义内容的时候，如果想使用返回的数据，则以“row.字段名”的形式使用，如上面的row.sup_id。第3列a标签的配置与checkbox类似。

排序和搜索：在columns和columnDefs中都可以对当前列是否允许排序和搜索进行配置，分别是：

• 排序：orderable
• 搜索：searchable

国际化：如果你想让将表格中的英文修改成汉字，那么可以通过配置“language”参数实现，具体教程：Datatables国际化。

 

后台，此时打开开发者工具刷新页面就能看到会有一个之前配置url的get请求，请求头中包含了很多数据，下面我们会用到

$Suppliers = M('Suppliers');
// 获取参数
$gets = I('get.');
// 获取排序信息（这里是根据get参数获取的）
$rule = $gets['order'][0]['dir'];  // 排序规则，asc/desc
$index = $gets['order'][0]['column'];  // 排序列index
$field = $gets['columns'][$index]['data'];  // 排序列字段
$order = $field . ' ' . $rule;
// 获取搜索条件
$search = addslashes($gets['search']['value']); // 预定义字符之前添加反斜杠
$where = '';
if (!empty($search)) {
    // CONCAT：由全体输入参数合并在一起而得到的字符串
    // 只要输入的参数中有NULL值，就返回NULL，这里用IFNULL进行判断，防止NULL值
    $where = "CONCAT(`sup_id`,
                        `sup_name`,
                        ...,
                        IFNULL(`note`,'')
                    ) LIKE '%{$search}%'";
}
// 获取分页数据
$data['data'] = $Suppliers->where($where)->order($order)->limit($gets['start'], $gets['length'])->select();
// 配置datatable所需数据
$data['recordsTotal'] = $Suppliers->count();    // 总记录数
$data['recordsFiltered'] = count($data['data']);   // 过滤后的记录数
$data['draw'] = intval($gets['draw']);  // 对应发送的draw
// 注意：返回json格式
echo json_encode($data);

如果使用了服务器模式，那么前端进行排序、搜索操作时，其实也向后台发送了get请求，所以需要自行获取get参数来实现对应的排序和搜索功能。

如下图所示，datatables要求我们返回时必须包括四个参数，所以返回的json数据并不只是绑定界面用的数据，应当作为'data'的值和其他三个参数一起返回。

 

以上就实现了datatables分页获取数据、排序、搜索和国际化功能。

转载于:https://my.oschina.net/nixiaomo/blog/1529420