2021-05-12 14:32:11
jquery表格外掛Datatables使用、快速上手
2021-01-13 20:00:12
Datatables使用
一、簡介
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="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8"
src="http://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="http://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="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://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>
相關文章