1、环境准备
首先准备需要的js和css,在官网的页面可以定制,https://datatables.net/download/
1.1 Choose a styling framework 选择需要样式骨架
1.2 Select packages 选择jQuery3或1和Data Tables,如果需要支持IE9之前的版本需要选择jQuery1
1.3 Extensions 提供的拓展包 比如自适应,导出成为excel,pdf等等
1.4 选择引用方式,当你选择后需要的文件和拓展后,官方会提供一个cdn的引用,或者可以选择下载下来(文件结合的方式or单个文件的方式)
2 写一个最简单demo
2.1 写一个最简单的表格
<table id="table_id" class="display">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
<!--<th>note</th>-->
</tr>
</thead>
</table>
2.2 初始化数据表
$(document).ready( function () {
$('#table_id').DataTable({
ajax: "resultDemo.txt"
});
} );
上面第一行代码的意思就是页面加载完成后执行初始化表格的操作。默认情况下,数据表将向您的表添加排序、搜索、分页和信息,使您的最终用户能够尽快找到他们想要的信息。
2.3 成果截图
如果要自定义数据表,可以通过在传递给dataTable()函数的对象中指定配置参数来实现。有关如何使用这些配置参数的信息,请参阅选项手册页。下面介绍一些常用的配置参数
3 常用功能介绍
3.1 汉化
根据官网提供的参数进行手动翻译;提供的参数地址是:https://datatables.net/reference/option/language
$(document).ready( function () {
$('#table_id').DataTable({
//汉化
language: {
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "对不起,查询不到任何相关数据",
"sInfo": "当前显示 _START_ 到 _END_ 条,共 _TOTAL_条记录",
"sInfoEmpty": "找不到相关数据",
"sInfoFiltered": "数据表中共为 _MAX_ 条记录)",
"sProcessing": "正在加载中...",
"sSearch": "搜索",
"oPaginate": {
"sFirst": "第一页",
"sPrevious": " 上一页 ",
"sNext": " 下一页 ",
"sLast": " 最后一页 "
},
"select": {
"rows": {
_: "选中了 %d 行",
0: "点击一行去选中",
1: "选择了 1 行"
}
}
}
});
} );
第二种方式是使用外部的汉化包
$('#example').dataTable( {
"language": {
"url": "/dataTables/i18n/de_de.lang"
}
} );
3.2 响应式(需要引入相关js,具体步骤按照上面提示)
在表格参数中加入responsive: true
即可,当屏幕尺寸渐渐缩小的时候,后面的列就会自动隐藏到+号里面。那么能不能定义优先级,让我去定义哪些列优先隐藏,哪些列后隐藏。当然可以,在columns
中定义responsivePriority
属性即可。如下:(引用网络提供的例子)
columns: [
{ "data": null, sortable: false, defaultContent: '' , responsivePriority: 2},
{ "data": "id" },
{ "data": "name", responsivePriority: 1},
{ "data": "price" , responsivePriority: 3},
{ "data": "column1" },
{ 'data': "column2" },
{ "data": "column3" },
{ "data": "column4" },
{ "data": null , defaultContent: '' ,responsivePriority: 4}
],
值越小,显示优先级越高,没有设置值的地方,按照列的先后顺序依次隐藏。
最后看结果:
3.3 按钮功能(同样需要引入相关js)
你可以添加复制表格,导出成为excel,导出成为pdf的功能
$(document).ready( function () {
$('#table_id').DataTable({
//需要同时设置dom和buttons,不然buttons容易把“每页显示X条记录”给覆盖
dom: '<lfB<t>ip>',
buttons: [
'copy', 'excel', 'pdf'
],
});
} );
结果截图