jQuery - 第三方表格插件DataTables使用详解2（Ajax请求数据、服务端分页）

https://www.hangge.com/blog/cache/detail_1980.html

四、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"

}

]

}

（2）页面代码如下。可以看到除了通过 ajax 配置项指定请求的地址，还要设置下每列绑定的属性。

$('#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

1 2	`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() 方法即可。

1	`$('#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();

原文出自：www.hangge.com 转载请保留原文链接：https://www.hangge.com/blog/cache/detail_1980.html

jQuery - 第三方表格插件DataTables使用详解2（Ajax请求数据、服务端分页）

四、Ajax请求数据之：一次性全部获取

1，条目为数组的情况

2，条目为对象的情况

五、Ajax请求数据之：服务端分页

1，客户端代码

2，服务端代码（data.php）

3，效果图

附一：对返回的数据进行处理

1，基本介绍

2，使用样例

附二：刷新数据（重新加载数据）

1，不改变原来的 url

2，改变 url

附三：禁止表格初始化时就去自动请求数据

1，问题描述

2，解决办法

相关推荐