DataTables前端插件以及其使用方式详解

作为一个表格工具可以说是很强大了
在公司里用了几天，还算是比较熟练了。
记录一下
 
首先前端得有个表格。
我这用的JQuery选中的表格#table_plan_all就是我这个代码对应的表格。
 
最主要的参数，data，该参数后面接的是表格中需要展示的数据。JSON数组格式。我这里初始化为一个空数组是因为业务需要。搜索完毕后在重新加载。
一般先获取到JSON数组格式的数据，直接初始化datatbles。
 
columns，看名字就明白，列
该参数主要用来定义该表格中每列的数据（首先页面的table得有个表头。th数量和这里面放的长度要一致）。
会从数组中的每一个JSON对象中取出来。
 
columnDefs该参数则是要对数据进行的处理，不进行处理的话就直接将columns定义的列对应属性往td里塞。
该参数下边还有几个参数
targets:对哪列的数据进行处理，datatables索引从0开始。负数就是倒着数从1开始，比如-1是倒数第一行
render：进行处理的方法，写个function
该function可以注入很多参数。我只知道第一个参数是columns定义的对象属性。第三个可以直接通过该参数点出该行其他列的数据，假设第三个入参叫row，则可以书写:row.xxxx,然后获取到该行叫做xxxx的那列数据
 
在下面的不需要管了，直接用就行。我是没有研究
 
示例代码:

//初始化datatables
function dataTableInit(){
    var dataName = $("#table_plan_all").DataTable({
        data: [],
        "columns": [
            {"data": "planId"},
            {"data": "userNick"},
            {"data": "planTypeEnum"},
            {"data": "createTime"},
            {"data": "planTime"},
            {"data": "FastListingPlanStausEnum"},
            {"data": "planId"}
        ],
        "columnDefs": [
            {
                "targets": [3, 4],
                "render": function (data) {
                    if (data == null) {
                        return '';
                    }
                    return new Date(data).Format("yyyy-MM-dd HH:mm:ss");
                }
            },
            {
                "targets": 5,
                "render": function (data) {
                    if (data == null) {
                        return '待执行';
                    }
                    return data;
                }
            },
            {
                "targets": -1,
                "render": function (data) {
                    var delBtn = '<span class="btn btn-primary btn-sm" ' +
                        'onclick="deleteListPlan(this,' + data + ')">删除计划</span>';
                    return delBtn;
                }
            }
        ],
        //lengthMenu: [5, 10, 20, 30],
        // 这里也可以设置分页，但是不能设置具体内容，只能是一维或二维数组的方式，所以推荐下面language里面的写法。
        'processing': true,
        'paging': true,
        pagingType: 'full_numbers',
        'lengthChange': true,
        'searching': true,
        'ordering': true,
        'autoWidth': false,
        'responsive': true,
        'aaSorting': [[1, "desc"]],
        language: {
            lengthMenu: '<select class="form-control input-xsmall">' + '<option value="5">5</option>'
            + '<option value="10">10</option>' + '<option value="20">20</option>' + '<option value="30">30</option>'
            + '<option value="50">50</option>' + '</select>条记录',//左上角的分页大小显示。
            paginate: {//分页的样式内容。
                previous: "上一页",
                next: "下一页",
                first: "第一页",
                last: "最后"
            },
            //table tbody内容为空时，tbody的内容。
            zeroRecords: '<img src="/dist/img/status-no-data.png" style="margin-top:50px;max-width:90px">'
            + '<div style="margin-top:50px;"><span>没有数据！</span></div>',
            //下面三者构成了总体的左下角的内容。
            info: "总共_PAGES_ 页，显示第_START_ 到第 _END_ ，筛选之后得到 _TOTAL_ 条，初始_MAX_ 条 ",
            infoEmpty: "0条记录", //筛选为空时左下角的显示。
            infoFiltered: "" //筛选之后的左下角筛选提示，
        }
    });
}