DataTables简介
与EasyUI的Datagrid作用一样，比easyui更美丽
Datatables是一款jquery表格插件。它是一个高度天真的东西，能够将任何HTML表格增加高等的交互功用。
支撑分页、排序、搜刮
支撑4种数据源
支撑多种主题
具有多种扩大
文件引入
最少引入以下3个文件
<link rel="stylesheet" href="css/jquery.dataTables.min.css" />
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript" src="js/jquery.dataTables.min.js" ></script>多种款式
Bootstrap 3
Foundation
Semantic UI
jQuery UI
Base
Bootstrap 4
导入的文件差别，详细请看官网示例：https://www.datatables.net完全Table的HTML构造
<table id="example" cellspacing="0" width="100%">
<thead>
<tr>
<th>item1</th>
<th>item1</th>
<th>item1</th>
</tr>
</thead>
<tbody>
<tr>
<td>item1</td>
<td>item1</td>
<td>item1</td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</tfoot>
</table>想运用DataTables表格插件，最少要写
<table></table>标签，然后再经由过程js衬着
初始化与经常使用设置
默许初始化
$('#example').DataTable();设置初始化
$('#example').DataTable({
"scrollY" : 350,
"ajax" : 'http://wt.com',
"serverSide" : true
});经常使用设置项
info //是不是显现左下角信息
ordering //是不是开启排序
paging //是不是开启分页
searching //是不是开启查询
serverSide
ajax
data
lengthMenu: [ 10, 25, 50, 75, 100 ] //定义每页显现纪录数DataTables支撑四种数据源
HTML(DOM)数据源——背景模板拼接
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
</tbody>
</table>Javascript数据源(Array/Objects)——优先级比HTMLDOM高
有2种范例：
二维数组：
var dataSet = [
[ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ],
[ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ]
];
对象数组(必需合营columns设置项)：
var dataSet = [
{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$3,120",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
},
{
"name": "Garrett Winters",
"position": "Director",
"salary": "$5,300",
"start_date": "2011/07/25",
"office": "Edinburgh",
"extn": "8422"
}
];
$(document).ready(function() {
$('#example').DataTable( {
data: dataSet,
columns: [
{ title: "Name" },
{ title: "Position" },
{ title: "Office" },
{ title: "Extn." },
{ title: "Start date" },
{ title: "Salary" }
]
} );
} );Ajax with client-side processing数据源
服务器返回的数据格式必需是：
{
"data": [
[
"Howard Hatfield",
"Office Manager",
"San Francisco",
"7031",
"2008/12/16",
"$164,500"
],
[
"Hope Fuentes",
"Secretary",
"San Francisco",
"6318",
"2010/02/12",
"$109,850"
]
]
}
或许
{
"data": [
{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$3,120",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
},
{
"name": "Garrett Winters",
"position": "Director",
"salary": "$5,300",
"start_date": "2011/07/25",
"office": "Edinburgh",
"extn": "8422"
}
]
}
$(document).ready(function() {
$('#example').DataTable( {
"ajax": '../ajax/data/arrays.txt'
} );
} );
或
$(document).ready(function() {
$('#example').DataTable( {
"ajax": {
"url": "data.json",
"data": {
"user_id": 451
}
}
} );
} );Ajax with server-side processing数据源
服务器返回的数据格式：
{
"draw" : 1,
"recordsTotal" : 20,
"recordsFiltered" : 20,
"data" : [
[],[]
]
}自定义列
在DataTables表格初始化的时刻举行初始化，运用
columns或许columnDefs属性举行自定义列的信息能自定义列的题目、显现内容、款式、别号、数据绑定、是不是供应排序、是不是供应搜刮过滤、列宽、默许内容等等
示例
$('#example').DataTable({
"ajax" : '{:U("getList")}',
"serverSide" : true,
"columns": [
{
"searchable": false,
"name": "engine",
"title" : "wutao",
"orderable": false,
"className": "my_class",
"render": function ( data, type, full, meta ) {
return '<a href="'+data+'">Download</a>';
}
},
null
]
});服务器形式的要求参数
当运用服务器形式
"serverSide" : true时，浏览器会发出一个GET要求来猎取数据源要求的查询参数以下：
draw:1 //要求次数，用于响应是也要带回来
columns[0][data]:0 //第一列绑定的数据源标识，二维数组就是数字，对象数组就是key
columns[0][name]:engine //第一列别号
columns[0][searchable]:false //不可搜刮
columns[0][orderable]:true //不可排序
columns[0][search][value]: //搜刮的前提
columns[0][search][regex]:false //搜刮是不是运用正则
..... //有多少列就有多少个columns[n]
order[0][column]:0 //指定排序的列
order[0][dir]:asc //指定列的排序体式格局
start:0 //肇端下标
length:10 //每页纪录数
search[value]: //全局搜刮前提
search[regex]:false //全局搜刮是不是运用正则
_:1492657609627 //自带标示不必剖析国际化
在DataTables表格初始化时，运用
language属性对表格中的笔墨信息举行天真修正示例：
$('#example').dataTable( {
"language": {
"processing": "DataTables is currently busy",
"emptyTable": "No data available in table",
"info": "Showing page _PAGE_ of _PAGES_",
"lengthMenu": "每页显现 _MENU_ 条纪录",
"search": "搜刮:"
}
} );查询过滤（搜刮）
列表项目
自定义表格掌握元素
在DataTables表格控件初始化时，运用
dom属性和initComplete回调函数来一致设置
运用场景：把自定义按钮集成到DataTables上面
$('#example').dataTable( {
"dom": "l<'#customid'>ftip"，
"initComplete": function(){
$("#customid").append("<button></button>");
}
} );自定义表格DOM最好把栅格加进去
$('#example').dataTable( {
"dom": "<'.row'<'#customid.col-xs-4'><'.col-xs-8'f>><'.row'<'.col-xs-12't>>",
"initComplete": function(){
$("#customid").append("<button></button>");
}
} );drawCallback比initComplete优先实行
整合iCheck复选框
Html构造
<input type="checkbox" class="i-checks" id="checkAll"> //表头JS部份
$('#example').DataTable({
"ajax" : '{:U("getList")}',
"serverSide" : true,
"columns": [
{
"render": function ( data, type, row, meta ) {
return '<input type="checkbox" class="i-checks item" name="ids[]" value="'+row.id+'">';
}
},
null
],
"drawCallback": function(){
checkbox_init();
}
});
//全选，全不选
function checkbox_init(){
$(".i-checks").iCheck({checkboxClass:"icheckbox_square-green",radioClass:"iradio_square-green",})
$('#checkAll').on('ifChecked', function(event){
$(this).off('ifUnchecked');
$('.item').iCheck('check');
$(this).on('ifUnchecked', function(event){
$('.item').iCheck('uncheck');
})
});
$('.item').on('ifUnchecked',function(event){
$('#checkAll').off('ifUnchecked');
$('#checkAll').iCheck('uncheck');
}).on('ifChecked',function(event){
var state = true;
$('.item').each(function(i){
if(!$(this).is(':checked')){
state = false;
}
});
if(state){
$('#checkAll').iCheck('check');
}
});
}