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，解決辦法

bootstrap側邊導航欄的實現

實戰|使用Spark結構化流寫入Hudi

Apache Hudi：統一批和近實時分析的存儲和服務

ES的Query、Filter、Metric、Bucketing使用詳解

Elasticsearch：ES 倒排索引爲什麼查詢速度會這麼快

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結