1.安裝
需引入三個(gè)文件，即jQuery庫(kù)饺律，一個(gè)DT的核心js文件和一個(gè)DT的css文件，注意jQuery庫(kù)的引用在DT的js文件之前。
官網(wǎng)參考文檔 http://datatables.club/manual/install.html
<!-- 引入jQuery -->
<script src="js/jquery-1.11.2.min.js"></script>
<!-- Datables引入文件 -->
<link href="css/jquery.dataTables.css" rel="stylesheet">
<script src="js/jquery.dataTables.js"></script>
<!-- 添加Table -->
<table id="sample_1">
<thead>
<tr>
<th>Name</th>
<th>age</th>
</tr>
</thead>
<tr>
<td>Joe</td>
<td>18</td>
</tr>
<tr>
<td>Grace</td>
<td>16</td>
</tr>
</table>
<script>
var mytable = $('#sample_1').DataTable();
</script>
若需要應(yīng)用bootstrap到datatables則可以引入datatable中bootstrap相關(guān)的css文件和js文件眉撵，順序?yàn)閎ootstrap.css、dataTables.bootstrap.css醒串、jQuery.js执桌、jquery.dataTables.js、dataTables.bootstrap.js
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- Datables引入文件 -->
<link href="css/dataTables.bootstrap.css" rel="stylesheet">
<script src="js/jquery.dataTables.js"></script>
<script src="js/dataTables.bootstrap.js"></script>
2.配置
- 常用配置
官方參考文檔： http://datatables.club/reference/option/
var sampleTable2 = $('#sample_2').DataTable({
"lengthMenu": [5, 10, 20, 40],//定義在每頁(yè)顯示記錄數(shù)的select中顯示的選項(xiàng)
"searching": true,//是否禁用搜索
"lengthChange": true,//是否允許用戶改變表格每頁(yè)顯示的記錄數(shù)
"paging": true,//開啟表格分頁(yè)
"processing": true,//是否顯示處理狀態(tài)(排序的時(shí)候芜赌，數(shù)據(jù)很多耗費(fèi)時(shí)間長(zhǎng)的話仰挣，也會(huì)顯示這個(gè))
"autoWidth": false,//是否自適應(yīng)寬度
"deferRender": true,//延遲渲染，可以提高初始化的速度
"stateSave": true, //保存狀態(tài) - 在頁(yè)面重新加載的時(shí)候恢復(fù)狀態(tài)（頁(yè)碼等內(nèi)容,如在第三頁(yè)刷新頁(yè)面缠沈，會(huì)自動(dòng)到第一頁(yè)
"dom": '<l<\'#topPlugin\'>f>rt<ip><"clear">',//定義DataTables的組件元素的顯示和顯示順序
"ordering": true,//全局禁用排序
"serverSide":false,//是否開啟服務(wù)器模式
"ajax": {
"url": "data/objects_root_array.txt", //從一個(gè)ajax數(shù)據(jù)源讀取數(shù)據(jù)給表格內(nèi)容
"dataSrc": "" //數(shù)據(jù)屬性或操作表數(shù)據(jù)的方法
},
columns: [{
"data": "name",
"orderable": true, // 啟用排序
"defaultContent": "",
"width": "10%"
}, {
"data": "position",
"orderable": true, // 啟用排序
"defaultContent": "",
"width": "10%"
}, {
"data": "office",
"orderable": false, // 禁用排序
"defaultContent": "",
"width": "10%"
}, {
"data": "extn",
"orderable": false, // 禁用排序
"defaultContent": "",
"width": "5%"
}, {
"data": "salary",
"orderable": false, // 禁用排序
"defaultContent": "",
"width": "10%"
}, {
"data": "start_date",
"orderable": false, // 禁用排序
"defaultContent": "",
"width": "10%"
}
],
"oLanguage": { // 國(guó)際化配置
"sProcessing": "正在獲取數(shù)據(jù)膘壶，請(qǐng)稍后...",
"sLengthMenu": "顯示 _MENU_ 條",
"sZeroRecords": "沒有找到數(shù)據(jù)",
"sInfo": "從 _START_ 到 _END_ 條記錄 總記錄數(shù)為 _TOTAL_ 條",
"sInfoEmpty": "記錄數(shù)為0",
"sInfoFiltered": "(全部記錄數(shù) _MAX_ 條)",
"sInfoPostFix": "",
"sSearch": "搜索",
"sUrl": "",
"oPaginate": {
"sFirst": "第一頁(yè)",
"sPrevious": "上一頁(yè)",
"sNext": "下一頁(yè)",
"sLast": "最后一頁(yè)"
}
}
});
- dom
官方參考文檔：
http://datatables.club/reference/option/dom.html
http://datatables.club/manual/daily/2016/05/11/option-dom.html
Datatables有以下定義：
l代表 length，左上角的改變每頁(yè)顯示條數(shù)控件
-
f代表 filtering洲愤，右上角的過(guò)濾搜索框控件 -
t代表 table颓芭，表格本身 -
i代表 info，左下角的表格信息顯示控件 -
p代表 pagination柬赐，右下角的分頁(yè)控件 -
r代表 processing亡问，表格中間的數(shù)據(jù)加載等待提示框控件 -
B代表 button，Datatables可以提供的按鈕控件肛宋，默認(rèn)顯示在左上角
dom的默認(rèn)值為lfrtip州藕，因此默認(rèn)效果如下：
datatables默認(rèn)的dom效果
若只是想改變現(xiàn)有控件的位置，可以直接重新組合
lfrtip的順序酝陈，但如果要對(duì)其做更靈活的排列或者要在現(xiàn)有的基礎(chǔ)上增加一些元素床玻，如常見的增加一些按鈕，則需要通過(guò)以下方式：
-
< >- div elements 代表一個(gè)div元素 <div><div> -
<"#id" >- div with an id 指定了id的div元素 <div id='id'><div> -
<"class" >- div with a class 指定了樣式名的div元素 <div class='class'><div> -
<"#id.class" >- div with an id and class 指定了id和樣式的div元素 <div id='id' class='class'><div>
如"dom": '<"wrapper"flipt>'沉帮，則datatables初始化后的結(jié)構(gòu)如下：
<div class="wrapper">
{filter}
{length}
{information}
{pagination}
{table}
</div>
如"dom": '<"top"i>rt<"bottom"flp><"clear">'锈死，則datatables初始化后的結(jié)構(gòu)如下：
<div class="top">
{information}
</div>
{processing}
{table}
<div class="bottom">
{filter}
{length}
{pagination}
</div>
<div class="clear"></div>
若要在表格上面添加button，可以將dom的值賦為"dom": '<l<\'#topPlugin\'>f>rt<ip><"clear">'穆壕，然后在配置中加“initComplete”：initButton待牵，initButton是一個(gè)函數(shù)，實(shí)現(xiàn)這個(gè)函數(shù)在其中添加button喇勋，如
function initButton(data) {
var topPlugin = '<button class="btn btn-primary btn-sm float-r"><i class="fa fa-plus"></i> 新 增</button>';
$("#topPlugin").append(topPlugin);//在表格上方topPlugin DIV中追加HTML
}
- 默認(rèn)配置（Setting defaults）
默認(rèn)配置修改后會(huì)應(yīng)用到所有的表格中缨该，但優(yōu)先級(jí)會(huì)低于進(jìn)行表格初始化時(shí)傳入的配置參數(shù)。
使用以下方法修改默認(rèn)配置：
//配置DataTables默認(rèn)參數(shù)
$.extend(true, $.fn.dataTable.defaults, {
"language": {
"url": "/assets/Chinese.txt"
},
"dom": "<'row'<'col-md-6'l<'#toolbar'>><'col-md-6'f>r>" +
"t" +
"<'row'<'col-md-5 sm-center'i><'col-md-7 text-right sm-center'p>>"
});
