jquery表格插件Datatables使用、快速上手
- 2021 年 1 月 13 日
- 筆記
- datatables, js
Datatables使用
一、簡介
官網：//datatables.net/ 中文官網：//datatables.club/
Datatables是一款jquery表格插件。它是一個高度靈活的工具，可以將任何HTML表格添加高級的交互功能。操作DOM的
- 分頁，即時搜索和排序，
- 幾乎支援任何數據源：DOM， javascript， Ajax 和 伺服器處理
- 支援不同主題 DataTables, jQuery UI, Bootstrap, Foundation
- 各式各樣的擴展: Editor, TableTools, FixedColumns ……
- 豐富多樣的option和強大的API
- 支援國際化
- 超過2900+個單元測試
- 免費開源
- 更多特性請到官網查看
二、使用
1、引入相關js和css文件
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css"
href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="//cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8"
src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
2、添加HTML程式碼
table標籤中thead、tbody必須存在
<table id="table_id_example" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table>
3、初始化Datatables
$(document).ready( function () {
$('#table_id_example').DataTable();
} );
4、效果
三、常用選項
order
應用於表的初始順序（排序） stateSave
# 參數1 列索引按順序排列 從0開始
# 參數2 排序的規則
"order": [[ 1, "asc/desc" ],...]
stateSave
狀態保存 – 頁面重新載入時恢復表狀態 啟用或禁用狀態保存。啟用後，DataTables將存儲狀態資訊，例如分 頁位置，顯示長度，過濾和排序。當最終用戶重新載入頁面時，表的狀態將被更改以匹配他們之前設置的狀 態。
# 默認值 false
stateSave: true/false
columnDefs
設置列定義初始化屬性 此參數允許您為表中的列指定特定選項，但在這種情況下，定義的列選項可應用於一 個或多個列
"columnDefs":[
//索引第4列，不進行排序
{targets:[4],orderable:false}
]
lengthMenu
定義在每頁顯示記錄數的select中顯示的選項
$('#example').DataTable({
"lengthMenu": [ 10, 25, 50, 75, 100 ]
});
# 或
$('#example').DataTable({
"lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "所有"] ]
});
paging
是否允許表格分頁 true/false
默認：true
searching
是否允許Datatables開啟本地搜索 true/false
默認：true
ordering
是否允許Datatables開啟排序 true/false
默認：true
processing
是否顯示正在處理的狀態 true/false
默認：false
四、Ajax使用遠程數據
有時從DOM讀取數據太慢或太笨重，特別是在處理數千或數百萬個數據行時。為了解決這個問題， DataTables的伺服器端處理功能提供了一種方法，可以讓伺服器端的資料庫引擎完成所有「繁重的工作」 。
當使用伺服器端處理時，DataTables將在頁面上每次繪製資訊時向伺服器發出Ajax請求（即，在分頁，排 序，搜索等時）。DataTables將向伺服器發送許多變數，以允許它執行所需的處理，然後以DataTables所需 的格式返回數據。
1、客戶端
$('#example').DataTable( {
// 開啟伺服器模式
serverSide: true,
// ajax發起請求
ajax: {
// 請求地址
url: '/data-source',
// 請求方式 get/post
type: 'get',
// 頭信資訊 laravel post請求時 csrf
//headers: { 'X-CSRF-TOKEN' : '{{ csrf_token() }}' },
// 請求的參數
/*
data: {
"user_id": 451
},
*/
/*
// 兩者寫法效果一致 但是它用於搜索
data: function ( d ) {
d.user_id = $('#user_id').val();
}
*/
},
// columns要對tr中的td單元格中的內容進行數據填充
// 注意：如果data接收類似a或b的資訊，實際伺服器沒有返回該資訊，那麼一定要同時設置
//defaultContent屬性，否則報錯
columns: [
// 總的數量與表格的列的數量一致，不多也不少
// 欄位名稱與sql查詢出來的欄位時要保持一致，就是伺服器返回數據對應的欄位名稱
// defaultContent 和 className 可選參數
{'data':'欄位名稱1',"defaultContent": "默認值",'className':'類名'},
{'data':'欄位名稱n',"defaultContent": "默認值",'className':'類名'}
],
/*
創建tr/td時的回調函數，可以繼續修改、優化tr/td的顯示，裡邊有遍歷效果，會依次掃描生成的每個tr
row:創建好的tr的dom對象
data:數據源，代表伺服器端返回的每條記錄的實體資訊
dataIndex:數據源的索引號碼
*/
createdRow:function(row,data,dataIndex){}
} );
2、服務端
/*
draw: 客戶端調用伺服器端次數標識
recordsTotal: 獲取數據記錄總條數
recordsFiltered: 數據過濾後的總數量
data: 獲得的具體數據
注意：recordsTotal和recordsFiltered都設置為記錄的總條數
*/
$result = [
'draw' => $request->get('draw'),
'recordsTotal' => $count,
'recordsFiltered' => $count,
'data' => $data
];
return json_encode($result);
3、搜索
var table = $('#example').DataTable( {
ajax: "data.json"
} );
$('#search').on('click',function(){
table.api().ajax.reload();
});
4、實例
以laravel為例
伺服器
public function index(Request $request){
if ($request->ajax()){
//排序索引
$orderArr = $request->get('order')[0];
//排序索引
$column = $orderArr['column'];
//排序方式
$dir = $orderArr['dir'];
//排序欄位
$orderColumn = $request->get('columns')[$column]['data'];
//開啟位置
$start = $request->get('start',0);
//搜索關鍵字
$title = $request->get('title');
$query=Article::where('id','>',0);
if (!empty($title)){
$query->where('title','like',"%$title%");
}
//獲取記錄數
$length = min(100,$request->get('length',10));
$count = $query->count();
$articles = $query->orderBy($orderColumn,$dir)->offset($start)->limit($length)->get()->toArray();
/**
* draw:客戶端調用服務端標識
* recordsTotal：獲取數據記錄總條數
* recordsFiltered：數據過濾後的總數量
* data：獲取具體的數據
*/
return [
'draw' => $request->get('draw'),
'recordsTotal' => $count,
'recordsFiltered'=>$count,
'data'=>$articles
];
}
return view('admin.article.index');
}
blade模板
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css"
href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
</head>
<body>
<form onsubmit="return search()">
<input type="text" name="title" id="title" placeholder="請輸入搜索關鍵字">
<input type="submit" value="搜索">
</form>
<div class="page-container">
<table class="table table-border table-bordered table-bg table-sort">
<thead>
<tr>
<th scope="col" colspan="7">文章列表</th>
</tr>
<tr class="text-c">
<th>ID</th>
<th>文章標題</th>
<th>創建時間</th>
<th>更新時間</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="//cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
<script type="text/javascript">
var table = $('.table-sort').DataTable({
"order": [[ 0, "desc" ]],
"columnDefs":[
{targets:[4],orderable:false}
],
"lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "所有"] ],
"processing" : true,
serverSide: true,
ajax: {
url: '',
type: 'get',
data:function (ret) {
ret.title = $('#title').val()
}
},
columns: [
{'data':'id'},
{'data':'title'},
{'data':'created_at'},
{'data':'updated_at'},
{'data':'updated_at'}
],
createdRow:function(row,data,dataIndex){
var id = data.id;
var td = $(row).find('td:last-child');
var html = `<a>編輯</a>
<a >刪除</a>`;
td.html(html)
}
});
function search(){
table.ajax.reload();
return false;
}
</script>
</html>
