jQuery - 第三方表格插件DataTables使用详解2(Ajax请求数据、服务端分页)
四、Ajax请求数据之:一次性全部获取
1,条目为数组的情况
(1)假设服务器上数据文件(data.txt)里的数据如下:
{ "data": [ [ "001", "张三", "2011-11-23" ], [ "002", "李四", "2001-11-23" ], [ "003", "刘士元", "2021-08-21" ], [ "004", "赵四", "2008-08-08" ], [ "005", "赵五", "2008-08-08" ], [ "006", "赵六", "2008-08-08" ], [ "007", "赵七", "2008-08-08" ], [ "008", "赵八", "2008-08-08" ], [ "009", "赵九", "2008-08-08" ], [ "010", "赵一零", "2008-08-08" ], [ "011", "赵双一", "2008-08-08" ] ] }
(2)我们只需要通过 ajax 配置项制定请求的地址即可。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.1.1.js" type="text/javascript"></script> <script src="media/js/jquery.dataTables.js" type="text/javascript"></script> <link rel="stylesheet" href="media/css/jquery.dataTables.css" type="text/css" /> <script type="text/javascript"> $(document).ready(function() { $('#myTable').DataTable({ "ajax": 'data.txt' }); }); </script> </head> <body> <table id="myTable"> <thead> <tr> <th>编号</th> <th>姓名</th> <th>出生日期</th> </tr> </thead> </table> </body> </html>
(3)运行结果如下:

2,条目为对象的情况
(1)假设服务器上数据文件(data.txt)里的数据如下:
{ "data": [ { "id": "001", "name": "张三", "birthday": "2015-12-31" }, { "id": "002", "name": "李四", "birthday": "2001-11-31" }, { "id": "003", "name": "王五", "birthday": "2011-12-31" } ] }
$('#myTable').dataTable({ "ajax": 'data.txt', columns: [ { data: 'id'}, { data: 'name'}, { data: 'birthday'} ] });
五、Ajax请求数据之:服务端分页
前面的样例中,分页都是在客户端这边做的。但如果数据量特别大(上万条),建议在后台做分页。也就是说前台每次只读取当前一页的数据。虽然这样做会增加代码复杂度,但可以让页面响应更快。
1,客户端代码
- 这次的 Ajax 我们使用对象来配置。这种方式更加灵活且功能更强大些。
- 服务端返回的数据条目同上面一样,可以是数组也可以是对象,这里我以对象为例。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.1.1.js" type="text/javascript"></script> <script src="media/js/jquery.dataTables.js" type="text/javascript"></script> <link rel="stylesheet" href="media/css/jquery.dataTables.css" type="text/css" /> <script type="text/javascript"> $(document).ready(function() { $('#myTable').DataTable({ //表示翻页时是否显示 processing信息(正在加载中),这个信息可以修改 "processing": true, // 服务器端处理方式 "serverSide": true, "ajax": { // url可以直接指定远程的json文件 url: "data.php", type: 'POST', // 传给服务器的数据,可以添加我们自己的查询参数 data: function (param) { param.toke = "hangge.com" console.log("请求的参数:", param); return param; }, }, "columns": [ { data: 'id'}, { data: 'name'}, { data: 'birthday'} ] }); }); </script> </head> <body> <table id="myTable"> <thead> <tr> <th>编号</th> <th>姓名</th> <th>出生日期</th> </tr> </thead> </table> </body> </html>
2,服务端代码(data.php)
<?php /****************************** 下面是客户端发过来的数据 *******************************/ // draw:计数器,返回数据的时候用这个值设定 // start:开始记录(0 besed index) // length:每页条数 // search[value]:检索文字 // order[i][column]:int 排序列的序号 例如: // 2,代表第3列排序 i代表有几个排序,一个的话服务器端这样写“order[0][column]” // order[i][dir]:排序的方式"desc","asc" // 下面comuns中的i取值从0~columns.length,所有的columns信息都发送到了服务器 // columns[i][data]:columns上定义的data属性值 // columns[i][name]:columns上定义的name属性值 // columns[i][searchable]:列能不能检索 // columns[i][orderable]:列能不能排序 // columns[i][search][value]:列的检索值 string $draw = $_POST["draw"]; //计数器(传过来什么下面也要返回什么) $start = $_POST["start"]; $length = $_POST["length"]; $toke = $_POST["toke"]; /****************************** 下面是获取列表数据 *******************************/ $recordsTotal = 56; //假设记录总是是56条 $data = []; for($i=0; $i<$length && ($start+$i)<$recordsTotal; $i++){ array_push($data, array('id' => $start + $i + 1, 'name' => '张三', 'birthday' => '2015-12-31')); } /****************************** 下面是服务器返回的数据 *******************************/ // draw:和Request的draw设定成一样的值 // recordsTotal:所有的总件数 // recordsFiltered:筛选后的总件数 // data:返回的数据 // 每一行数据上面,可以包含这几个可选项 // DT_RowId:加在行上的ID值 // DT_RowClass:加在行上的Class // DT_RowData:加在行上的额外数据(object) // DT_RowAttr:加在行上的属性(object) // error:如果有错误,就设定这个值,没有错误,不要包含这个值 $resut = array('draw' => $draw, 'recordsTotal' => $recordsTotal, 'recordsFiltered' => $recordsTotal, 'data' => $data); echo json_encode($resut, JSON_PRETTY_PRINT); ?>
3,效果图
(1)运行效果如下:
(2)同时通过请求抓取可以发现:不管是进行翻页操作、或是改变每页条目数、或是输入搜索内容、或是点击列头排序,表格都会发起请求并刷新数据。

(3)而服务端返回的数据如下:

附一:对返回的数据进行处理
1,基本介绍
有时从服务器上获取到的数据可能无法直接用于表格显示,需要先做些转换处理。这个只需通过 ajax.dataSrc 配置属性即可实现。
2,使用样例
(1)这里我们将返回结果中,所有的姓名前都加个“@”符号。

(2)代码如下:
$('#myTable').DataTable({ //表示翻页时是否显示 processing信息(正在加载中),这个信息可以修改 "processing": true, // 服务器端处理方式 "serverSide": true, "ajax": { // url可以直接指定远程的json文件 url: "data.php", type: 'POST', "dataSrc": function(json) { for(var i=0, length=json.data.length ; i<length ; i++) { json.data[i]["name"] = "@" + json.data[i]["name"]; } return json.data; } }, "columns": [ { data: 'id'}, { data: 'name'}, { data: 'birthday'} ] });
附二:刷新数据(重新加载数据)
1,不改变原来的 url
注意:第二个参数设为 false 的话,会保持当前的选中页。
var table = $('#myTable').DataTable(); table.ajax.reload(function(json) { console.log(json); }, true);
2,改变 url
var table = $('#myTable').DataTable(); table.ajax.url('newData.txt').load();
附三:禁止表格初始化时就去自动请求数据
1,问题描述
默认情况下,如果我们配置了 ajax 地址,当表格初始化后它便会自动发起 ajax 请求去获取数据。但有的时候我们并不希望它一开始就自动请求数据,而是手动控制它去请求(比如点击一个按钮后再发起请求)。2,解决办法
(1)首先通过 iDeferLoading 和 serverSide 这两个属性设置,让表格不会自动发起请求。
$('#myTable').DataTable({ "ajax": 'data.txt', "iDeferLoading": 0, "serverSide": true, });
(2)后面如果想请求数据时,调用 draw() 方法即可。
$('#myTable').DataTable().draw();
(3)除了 draw() 方法,使用前面介绍的刷新数据方法也是可以的。
//不改变原来的 url var table = $('#myTable').DataTable(); table.ajax.reload(function(json) { console.log(json); }, true); //改变 url var table = $('#myTable').DataTable(); table.ajax.url('newData.txt').load();