title: DataTables的配置使用--结合ThinkPHP5.0框架
tags: [DataTables,分页,搜索,排序]
众所周知，DataTables插件融合了分页、搜索、排序的功能，使用也相对简单，下面将结合TP5框架介绍DataTables的使用配置。
原文博客：煜儿博客
一. DataTables介绍
DataTables分为两种模式：1.基于客户端 2.基于服务端
这两种模式有什么不同呢？
基于客户端
优点：每次都没有请求产生，速度快
缺点：数据量大的时候其渲染表格每一行很慢
基于服务端
优点：数据量大的时候，每次请求服务器，动态生成，按需所查
缺点：基于服务端，每次操作都需要请求服务器
至于选择使用哪种模式，请自行选择，下面将介绍这两种模式的使用。
二. 基于客户端的配置使用
首先，配置DataTables插件必须要参考官网文档：
DataTables中文网 DataTables英文网
其次，最好是将相关文件包下载到本地框架中（文件包自行下载）
下面贴出代码：
不管是哪种模式，首先都要引入相关文件，这里的html名为 index.html：
<script type="text/javascript" charset="utf8" src="__STATIC__/home/media/css/jquery.dataTables.min.css"></script>
<script type="text/javascript" charset="utf8" src="__STATIC__/home/media/js/jquery.js"></script>
<script type="text/javascript" charset="utf8" src="__STATIC__/home/media/js/jquery.dataTables.min.js"></script>
引入之后，在html中接着写代码：
<table id="table_id_example" class="table table-border table-bordered table-bg table-hover table-sort table-responsive" width="99%" style="padding-left: 7px; ">
<thead>
<tr>
<th width="20%">序号</th>
<th width="50%">姓名</th>
<th width="30%">详细信息</th>
</tr>
</thead>
<tbody>
{foreach $data as $v}
<tr>
<td>{$v.id}</td>
<td>{$v.name}</td>
<td><button onclick="show_userinfo(this)" >点击查看</button></td>
</tr>
{/foreach}
</tbody>
</table>
<script>
$(document).ready(function(){
$('#table_id_example').DataTable({
// 这里写一些基本配置，例如：
"paging": true, // 是否开启分页功能(默认开启)
"info": true, // 是否显示分页的统计信息(默认开启)
"searching":true, // 是否开启搜索功能(默认开启)
"ordering": true, // 是否开启排序功能(默认开启)
"order":[ [0,'asc'] ], // 设置默认排序的表格列[参数1是表格列的下标，从0开始]
});
});
</script>
后台控制器：
public function index(){
$data = \app\home\model\User::select();
$this ->assign('data',$data);
return view();
}
说明：本例假设查询所有的用户数据，index.html是由index方法渲染而来，User是模型。
其实，这个思路跟最基本的TP5查询数据是一样的，将查询出来的总数据($data)分配到index.html中，然后遍历数据即可，数据的具体处理由DataTables插件自己处理。
三. 基于服务端的配置使用
同样，继续使用上述案例背景。
index.html中代码：
<table id="table_id_example" class="table table-border table-bordered table-bg table-hover table-sort table-responsive" width="99%" style="padding-left: 7px; ">
<thead>
<tr>
<th width="20%">序号</th>
<th width="50%">姓名</th>
<th width="30%">详细信息</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
$(document).ready(function() {
$("#table_id_example").dataTable({
"lengthMenu": [
[4,8,10,15,20], // 具体的数量
[4,8,10,15, 20] // 文字描述
],
"paging": true, // 是否开启分页功能(默认开启)
'info': true, // 是否显示分页的统计信息(默认开启)
"searching":true, // 是否开启搜索功能(默认开启)
"ordering": true, // 是否开启排序功能(默认开启)
"order":[ [0,'asc'] ], // 设置默认排序的表格列[参数1是表格列的下标，从0开始]
"stateSave": true, // 是否保存当前datatables的状态(刷新后当前保持状态)
"processing": true, // 显示处理中的字样[数量多的时候提示用户在处理中](默认开启)
"serverSide": true, // 是否开启服务器模式
// false时，会一次性查询所有的数据，dataTables帮我们完成分页等。
// true时，点击分页页码就会每次都到后台提取数据。
"language": //把文字变为中文
{
"sProcessing": "处理中...",
"sLengthMenu": "显示 _MENU_ 项结果",
"sZeroRecords": "没有匹配结果",
"sInfo": " 显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
"sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
"sInfoPostFix": "",
"sSearch": "搜索:",
"sUrl": "",
"sEmptyTable": "表中数据为空",
"sLoadingRecords": "载入中...",
"sInfoThousands": ",",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上页",
"sNext": "下页",
"sLast": "末页"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
},
// 使用ajax到后台服务获取数据
"ajax": {
"url": "{:url('getData')}", //请求数据的后台地址
"type": "POST", // ajax的请求方法
},
//需要接收返回的数据
//总的数量与表格的列数必须一致，不能多也不能少，一个变量代表一个td
//如果data接收服务器没有返回该字段信息，那么该字段一定要同时设置defaultContent属性
//例{'data':'a',"defaultContent":""},
"columns": [
{"data": "id"},
{"data": "username"},
{"data": function(data){
return '<button class="btn btn-info btn-sm" onclick="show_userinfo('+ data.id +')" data-id=' + data + '><i class="fa fa-pencil"></i>查看答案</button>';
} },
],
});
});
</script>
后台控制器代码：
public function index(){
return view();
}
public function getData(){
if(request()->isAjax()){
//实例化User模型，注意要在上面use
$UserModel = new User;
//接受请求
$datatables = request()->post();
//得到排序的方式
$order = $datatables['order'][0]['dir'];
//得到排序字段的下标
$order_column = $datatables['order'][0]['column'];
//根据排序字段的下标得到排序字段
$order_field = $datatables['columns'][$order_column]['data'];
//得到limit参数
$limit_start = $datatables['start'];
$limit_length = $datatables['length'];
//得到搜索的关键词
$search = $datatables['search']['value'];
//查询出所有用户数据
//如有搜索行为，则按照姓名进行模糊查询
if ($search){
$data = $UserModel
->order("$order_field $order")
->limit($limit_start,$limit_length)
->where('username','LIKE',"%$search%")
->select();
$keyword_all_data = $UserModel
->where('username','LIKE',"%$search%")
->select();
$total = count($keyword_all_data); //获取满足关键词的总记录数
}else{
//没有关键词，则查询全部
$data = $UserModel
->where('is_del',0) //查询未被标记为删除的数据，可选
->field('id,username,age')
->order("username $order")
->limit($limit_start,$limit_length)
->select();
$total = $UserModel->count(); // 数据总数
}
if($data){
$data = collection($data)->toArray();
}
$draw = request()->post('draw');
$AllData = [
// ajax的请求次数，创建唯一标识
'draw' => $draw,
// 结果数
'recordsTotal' => count($data),
// 总数据量
'recordsFiltered' => $total,
// 总数据
'data' => $data,
];
return json($AllData);
}else{
//如果不是ajax请求，自行处理
}
}
说明：此例：分为两个大步骤：
1.index方法展示index.html页面；
2.页面加载完成自动发起ajax请求getData，获取数据；
getData方法中的逻辑：首先判断是否为ajax请求，其次判断是否有搜索行为，最终将结果返回到index.html中。
在index.html中，动态生成了【点击查看】的按钮，当点击时会触发相应的show_userinfo函数，函数自行书写。
【注意】index.html中<tbody></tbody>中不可书写内容，里面的<td>为DataTables自动生成
至此，DataTables插件的使用已经基本完成，如需其他配置，请参考官网文档。
参考：DataTables官网
网友评论