Datatables是一个表格的插件，它的功能很强大，支持前端的分页、搜索、排序和导出，基本上用这个可以完成绝大多数的表格需求，特别是做后台系统，通常要展示数据表格，这个是我第一次做后台的时候引入的，现在已经在几个后台系统实践过。本篇简单介绍下它的几个主要的功能。
1. 安装
它的官网是这个：https://datatables.net/，可以打开它的官网感受一下它的几个demo。它的样式上使用了bootstrap。
最好是把它的文件下载下来，然后放到自己的服务器上，因为它提供的cdn是外国，网速比较慢。然后用html标签引入：
|
1 2 3 4 |
<link rel="stylesheet" href="/static/css/bootstrap.min.css"> <link rel="stylesheet" href="/static/DataTables/datatables.min.css"> <script src="/backend/static/DataTables/datatables.min.js"></script> |
2. 初始化
html用table，并且table里面一定要有thead/tbody，不然它会报错，正确的html：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<table id="status-table"> <thead> <tr> <th>Order Id</th> <th>Agent Name</th> </tr> </thead> <tbody> <tr> <td>12345</td> <td>yin</td> </tr> </tbody> </table> |
然后就可以初始化datatables，如下JS：
|
1 2 3 4 |
$("#status-table").DataTable({ pageLength: 10, order: [[ 2, "desc" ]], }); |
上面指定分页大小为10，按第2列降序排序，效果如下：
它还支持导出，导出Excel/pdf/csv等，一般导出exel就好了，可以添加以下初始化参数：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
let tableConfig = { searching: searching, //pageLength: 50, search: { // 大小写不敏感 caseInsensitive: false }, // 不分页 paging: false, // 把search的文案换成Keyword oLanguage: { "sSearch": "Keyword", }, // 分页、表格等dom的显示先后顺序，这个的效果是把搜索框放到表格的左上角 // 具体可查看 https://datatables.net/reference/option/dom: dom: 'Bfrtip', // 显示导出excel的按钮 buttons: [ { extend: "excel" } ] }; |
它是用的flash做的导出，由于Chrome已经默认不开启flash，所以需要在Chrome的设置里面打开，还有Safari不支持flash。由于后台一般是做给自己人用的，所以还好。效果如下：
3. 高级功能
（1）导出过滤
导出的时候，如果td里面有a标签：
|
1 |
<a href="/detail?id=155">foo</a> |
导出的时候会把a标签也带上，因为它会把td里面的内容都导出来，所以需要做下过滤，这个可以添加以下配置：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
//初始化data table插件 let tableConfig = { buttons: [ { extend: "excel", exportOptions: { // 只导出0到7列 columns: [0,1,2,3,4,5,6,7], format: { body: function(data, column, row, node){ //把agent id改成字符串，不然在excel里面可能会变成科学计数法 if(column === 1 && /"(\d+)"/.test(data)){ var idData = data.match(/"(\d+)"/); return idData ? idData[1].toString(10) : data; } else { // 把所有可能的会签符号都删掉，只留下文本内容 return data.replace(/<script>[^<]+<\/script>/g, '') .replace(/<button[^>]+>[^<]+<\/button>/g, '') .replace(/<a[^>]+>/g, '').replace(/<\/a>/g, '').trim() .replace(/<textarea>/g, '').replace(/<\/textarea>/g, '').trim() .replace(/^\$/g,'') .replace(/<br>/g, ';') .replace(/<script[^>]+>[^<]+<\/script>/g, '') .replace(/<div[^>]+>/g, '').replace(/<\/div>/g, '').trim() .replace(/ +/g, ' '); } } } } } ] }; |
上面还指定了导出列，因为有时候不想所有列都导出，有些列是按钮操作。
（2）指定默认排序列
有些表格可能需要按id列排序，有些可能要按名字的列排序，如下指定默认排序列：
|
1 2 3 |
let tableConfig = { order: [[ 3, "desc" ]] }; |
上面代码是按第3列（从0开始）降序排序。
有时候会遇到一个问题，就是按时间排序，但是时间显示的是年月日，这样就导致同一天的无法做区分，无法按实际生成的时间排序，可以使用ID排序，但是ID列不需要显示，那怎么办呢？可以用另外一个参数：
|
1 2 3 4 5 6 7 |
let tableConfig = { // 显示第5列排序，实际用的是第0列的排序 columnDefs: [ { targets: [5], orderData: [5, 0] } }; |
然后把0列的id给隐藏了，就可以了。
（3）按给定字段搜索
Datatables提供了一个默认的关键词全局搜索，如下图的Keyword输入框，只要当前行任意列能匹配这个字符串，当前行就显示。但是经常希望按某一列搜索，如下图所示：
那应该怎么办呢？Datatables支持添加自定义过滤函数，在这个函数里面会传当前行所有列的数据给你，然后自己判断是否符合要求，如果是的话就return true，返回return false表示不要这一列。
所以可以监听输入框的input/change事件，然后获取输入的内容触发Datatables的draw函数进行过滤，如下代码添加一个过滤函数：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// 搜索order status $.fn.dataTableExt.afnFiltering.push(function(oSettings, aData, iDataIndex) { // 如果输入框为空，则认为是搜索全部 if (!searchForm.orderStatus.value) { return true; } // 获取输入框的值 let searchStatus = searchForm.orderStatus.value.toLowerCase(), // 获取表格的值 tableStatus = aData[columnIndex.orderStatus].trim().toLowerCase(); // 返回表格的值是否和输入值对上 return searchStatus === tableStatus; }); |
然后再监听下拉输入框的change事件，在里面调dataTables的重绘API：
|
1 2 3 4 5 6 |
function drawTable(){ agentListTable.draw(); } // 搜索transaction状态 $(searchForm.transactionStatus).on("change", drawTable); |
目录: 框架组件
发表评论