使用Datatables做后台小结">使用Datatables做后台小结

Datatables是一个表格的插件,它的功能很强大,支持前端的分页、搜索、排序和导出,基本上用这个可以完成绝大多数的表格需求,特别是做后台系统,通常要展示数据表格,这个是我第一次做后台的时候引入的,现在已经在几个后台系统实践过。本篇简单介绍下它的几个主要的功能。

1. 安装

它的官网是这个: https://datatables.net/ ,可以打开它的官网感受一下它的几个demo。它的样式上使用了bootstrap。

最好是把它的文件下载下来,然后放到自己的服务器上,因为它提供的cdn是外国,网速比较慢。然后用html标签引入:

<link rel="stylesheet" href=http://www.tuicool.com/articles/"/static/css/bootstrap.min.css">

 

2. 初始化

html用table,并且table里面一定要有thead/tbody,不然它会报错,正确的html:

<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:

$("#status-table").DataTable({
     pageLength: 10,
     order: [[ 2, "desc" ]],
});

上面指定分页大小为10,按第2列降序排序,效果如下:

它还支持导出,导出Excel/pdf/csv等,一般导出exel就好了,可以添加以下初始化参数:

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标签:

<a href=http://www.tuicool.com/articles/"/detail?id=155">foo

导出的时候会把a标签也带上,因为它会把td里面的内容都导出来,所以需要做下过滤,这个可以添加以下配置:

//初始化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 = http://www.tuicool.com/articles/data.match(/"(/d+)"/);
                            return idData ? idData[1].toString(10) : data;
                        } else {
                            // 把所有可能的会签符号都删掉,只留下文本内容
                            return data.replace(//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列排序,有些可能要按名字的列排序,如下指定默认排序列:

let tableConfig = {
    order: [[ 3, "desc" ]]
};

上面代码是按第3列(从0开始)降序排序。

有时候会遇到一个问题,就是按时间排序,但是时间显示的是年月日,这样就导致同一天的无法做区分,无法按实际生成的时间排序,可以使用ID排序,但是ID列不需要显示,那怎么办呢?可以用另外一个参数:

let tableConfig = {
    // 显示第5列排序,实际用的是第0列的排序
    columnDefs: [ {
        targets: [5],
        orderData: [5, 0]
    }
};

然后把0列的id给隐藏了,就可以了。

(3)按给定字段搜索

Datatables提供了一个默认的关键词全局搜索,如下图的Keyword输入框,只要当前行任意列能匹配这个字符串,当前行就显示。但是经常希望按某一列搜索,如下图所示:

那应该怎么办呢?Datatables支持添加自定义过滤函数,在这个函数里面会传当前行所有列的数据给你,然后自己判断是否符合要求,如果是的话就return true,返回return false表示不要这一列。

所以可以监听输入框的input/change事件,然后获取输入的内容触发Datatables的draw函数进行过滤,如下代码添加一个过滤函数:

// 搜索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:

function drawTable(){
    agentListTable.draw();
}
 
// 搜索transaction状态
$(searchForm.transactionStatus).on("change", drawTable);

以上就是Datatables的一些用法,如果不能满足需求的,可以继续查找其它的使用方法。

如果后台的数据不多,可以让后端把全部数据都返回给你,然后自己做分页、搜索、排序、导出,就不用什么都调接口了,这样可以省去很多麻烦。

浏览量: 32

赞 (0) 评论 分享 ()