DataTables 常用技巧

1. 数据

1.1 设置自定义的数据源：dataSrc

"ajax": {
    "dataSrc": "DATA", //默认是data，必须设置
    "url": OkHttp.GET_TASK_LIST_URL,
    "data": function (d) {  // data就是ajax中的data参数
        d.extra_search = "" //可以添加自定义的搜索字段
    }
复制代码

1.1. 查询所有数据：lengthMenu

lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
复制代码

1.2 列数据设置

"columns": [
    {"data": KEY.ID, "visible": true, "orderable": true}, // 设置列不可见，排序

   {
    "data": KEY.TASK_START_TIME,
    render(data, type, row, meta) {  // 自定义渲染数据
        return (new Date(data)).Format(TIME_FORMAT);
    }
],
复制代码

1.3 排序

默认排序

order:[[11,"desc"]], /*默认按创建时间排序*/
复制代码

1.4 数据重新加载

taskTable.ajax.reload(); // 重新加载 taskTable.order([11, 'desc']).draw(); // 按指定列排序

2. 操作数据

2.1 CURD

columnDefs: [{
    data: null,
    targets: 11,
    render: function (data, type, row, meta) {
        let status = parseInt(row["TASK_STATUS"]) === STATUS_CLOSE ? "disabled" + " " : ""; 
        // 根据状态控制button是否显示
        var updateBtn = `<button type="button" class=" ` + status + ` btn-update btn btn-primary btn-xs action-title-center"
                        data-toggle="modal" >更新</button>`;
        var discardBtn = `<button type="button"  class=" ` + status + ` btn-discard btn btn-primary btn-xs action-title-center"
                        data-toggle="modal">废弃</button>`;
        return updateBtn + discardBtn;
    }
}],
复制代码

2.2 导出excel

dom: 'lBfrtip',
buttons: [{
    extend: 'excelHtml5',
    text: '导出Excel',
    className: 'excelButton',
    exportOptions: { // 导出列配置
       columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    }
}],
// 设置样式
.excelButton {
    border-radius: 3px !important;
    -webkit-box-shadow: none !important;
    margin-left: 2rem !important;
    background-color: #3c8dbc !important;
    border-color: #3c8dbc !important;
    color: #fff !important;
    background-image: none !important;

    /*任务模块添加*/
    display: inline-block;
    padding: 0.4rem;
}
// 设置每页显示条数为行内，与导出按钮同一行
.dataTables_length{
    display: inline-block;
}
复制代码

3. 服务器模式

"serverSide": true
复制代码

当你打开服务器模式的时候，每次绘制表格的时候，DataTables 会给服务器发送一个请求（包括当前分页，排序，搜索参数等等）。DataTables 会向 服务器发送 一些参数 去执行所需要的处理，然后在服务器组装好 相应的数据 返回给 DataTables

服务器处理模式

转载于:https://juejin.im/post/5ad56cb2f265da23830b6093