研究了一上午的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分页获取数据、排序、搜索和国际化功能。