DataTables 1.10.x使用指南
Mar 03, 2017
5178
DataTables是一个jQuery的表格插件。这是一个高度灵活的工具，依据的基础逐步增强，这将增加先进的互动控制，支持任何HTML表格。主要特点：
- 自动分页处理
- 即时表格数据过滤
- 数据排序以及数据类型自动检测
- 自动处理列宽度
- 可通过CSS定制样式
- 支持隐藏列
- 易用
- 可扩展性和灵活性
- 国际化
- 动态创建表格
- 免费的
安装
依赖
因为DataTables是依赖jquery，所以要先引入jquery，再引入jquery.dataTables.min.js。
//code.jquery.com/jquery-1.12.4.js
https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js
HTML
对于数据表能够增强HTML表格效果，表格必须是有效的，要有<thead>,<tbody>标签，可选的有<tfoot>标签。
<table id="table_id" 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>
安装javascript/css文件
共三种不同的方式安装
- 使用DataTables CDN
- 下载后本地引入
- 通过NPM或Bower包管理工具安装
CDN
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.js"></script>
本地安装
下载安装包
<link rel="stylesheet" type="text/css" href="/DataTables/datatables.css">
<script type="text/javascript" charset="utf8" src="/DataTables/datatables.js"></script>
NPM
npm install datatables.net # Core library
npm install datatables.net-dt # Styling
初始化表格
$(document).ready( function () {
$('#table_id').DataTable();
} );
数据
- 数据处理模式
- 数据类型
- 数据源
处理模式
分为两种：客户端处理模式和服务端处理模式。
客户端处理模式：完整的数据集加载和数据处理都是在浏览器中完成。
服务端处理模式：通过Ajax请求数据绘画表格，服务端只返回数据，数据处理由服务端来完成。
数据类型
分为数组（Array）、对象（Object）、实例（new MyClass()）。
- 数组：数组数据
var data = [ [ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$3,120" ], [ "Garrett Winters", "Director", "Edinburgh", "8422", "2011/07/25", "$5,300" ] ]
表格初始化
$('#example').DataTable( {
data: 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" } ]
效果图为$('#example').DataTable( { data: data, columns: [ { data: 'name' }, { data: 'position' }, { data: 'salary' }, { data: 'office' } ] } );
实例化：
function Employee ( name, position, salary, office ) {
this.name = name;
this.position = position;
this.salary = salary;
this._office = office;
this.office = function () {
return this._office;
}
};
$('#example').DataTable( {
data: [
new Employee( "Tiger Nixon", "System Architect", "$3,120", "Edinburgh" ),
new Employee( "Garrett Winters", "Director", "$5,300", "Edinburgh" )
],
columns: [
{ data: 'name' },
{ data: 'salary' },
{ data: 'office' },
{ data: 'position' }
]
} );
效果图如下
数据源
- DOM (html文件)
- Javascript
- Ajax 数据源
Ajax
加载数据
$('#myTable').DataTable( {
ajax: '/api/myData'
} );
可以使用json数据源，数组数据源，对象数据源。以下举例说明：
1.简单的数组数据
[ {
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$320,800",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
},
...
}
使用方法如下
$('#myTable').DataTable( {
ajax: {
url: '/api/myData',
dataSrc: ''
},
columns: [ ... ]
} );
2.对象数据
{
"data": [
{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$320,800",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
},
...
]
}
使用方法如下
$('#myTable').DataTable( {
ajax: '/api/myData',
columns: [ ... ]
} );
// or!
$('#myTable').DataTable( {
ajax: {
url: '/api/myData',
dataSrc: 'data'
},
columns: [ ... ]
} );
3.对象数据对应关系
{ "name": "Tiger Nixon",
"position": "System Architect",
"salary": "$320,800",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
}
$('#myTable').DataTable( {
ajax: ...,
columns: [
{ data: 'name' },
{ data: 'position' },
{ data: 'salary' },
{ data: 'state_date' },
{ data: 'office' },
{ data: 'extn' }
]
} );
4.嵌套对象关系
{
"name": "Tiger Nixon",
"hr": {
"position": "System Architect",
"salary": "$320,800",
"start_date": "2011/04/25"
},
"contact": {
"office": "Edinburgh",
"extn": "5421"
}
}
$('#myTable').DataTable( {
ajax: ...,
columns: [
{ data: 'name' },
{ data: 'hr.position' },
{ data: 'hr.salary' },
{ data: 'hr.state_date' },
{ data: 'contact.office' },
{ data: 'contact.extn' }
]
} );
在线例子
配置项
使用案例说明配置项，以下是常用的配置项，详细请到官网https://www.datatables.net/查询。
var reportMonthtable = $('#monthReport').DataTable({
retrieve: true, //防止多次初始化
data: dataSet, //数据集
columns: [
{ "data": "ruleName" },
{ "data": "mainWhere" },
{ "data": "UV" },
{ "data": "PV" },
{ "data": "sessions" }
], //表头名称
paging: true, //显示翻页
lengthChange: false, //关闭每页显示
"info": false, //关闭当前显示表格信息
searching: false, //关闭搜索框
scrollY: 200, //自定义滚动高度
iDisplayLength: jtPageSize, //每页显示条数
order: [], //插件bug 取代默认值
columnDefs: [{
orderable: false, //禁用排序
targets: [0, 1] //指定的列
},
// 将mainWhere列变为蓝色
{
targets: [1], // 目标列位置，下标从0开始
data: "mainWhere", // 数据列名
render: function(data, type, full) { // 返回自定义内容
return "" + data + "";
}
}
],
bProcessing: true, //加载进度条
stateSave: true, //保存翻页状态
//语言配置
language: {
sProcessing: "正在加载中......",
sLengthMenu: "每页显示 _MENU_ 条记录",
sZeroRecords: "该时间段无统计数据",
sEmptyTable: "该时间段无统计数据",
sInfoEmpty: "",
sInfo: "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
sInfoFiltered: "数据表中共为 _MAX_ 条记录",
sSearch: "",
oPaginate: {
sFirst: "首页",
sPrevious: "上一页",
sNext: "下一页",
sLast: "末页"
}
}
});
注意点
结合项目中与angularjs结合使用，angular通过service获取后端数据，将数据集导入初始化中，但是该插件暂时不支持promise，只能通过变量数据集，这将导致数据变化后表格的数据不能及时更新，需要刷新页面才可以，这不是我们想要的效果，可以通过ui-router中的$state服务的$state.reload来实现reload操作，无需刷新页面即可达到数据变化后页面能够更新重绘。
参考文章：
