datatables笔记

因为正好用到，自己慢慢摸索了很久，记下写有用的。

第一件事，上官网datatables。
我发现竟然还有个中文版的，但非官方，授权翻译的，走起中文版
api集合
配置选项

修改全局默认配置

$.extend( true, $.fn.dataTable.defaults, {
    processing: true,
    language: {
        processing:     "数据处理中...",
        search:         "",
        lengthMenu:     "显示 _MENU_ 项结果",
        info:           "显示第 _START_ 至 _END_ 条订单，共 _TOTAL_ 条",
        infoEmpty:      "没有显示条目",
        infoFiltered:   "(由 _MAX_ 项结果过滤)",
        infoPostFix:    "",
        loadingRecords: "数据读取中...",
        zeroRecords:    "无符合数据",
        emptyTable:     "没有数据",
        paginate: {
            first:      "首页",
            previous:   "前一页",
            next:       "后一页",
            last:       "最后"
        },
        aria: {
            sortAscending:  ": 升序排列",
            sortDescending: ": 降序排列"
        }
    },
    responsive: true,
    searching: false,
    ordering: false,
    lengthChange: false
})

ajax实用的参数

var table = $('#table').DataTable({      
        ajax: "url",
        "columns": [
            { "data": "key1" },
            { "data": "key2" }
        ],
        "columnDefs": [
            {
                "render": function ( data, type, row ) {
                    return row.key + data;//row.key指拿到的json里面的key对应的value，data值对应的"columns"中拿到的第几个值，这里就是第一个值"key1"对应的value
                },
                "targets": 0
            },
            {
                "render": function ( data, type, row ) {
                    return "hello 我是第二个值" + data;
                },
                "targets": 1
            }                
        ],
        "drawCallback": function( settings ) { //回调函数
            var api = new $.fn.dataTable.Api( settings );
            var num = api.rows().data().length;   //api.rows().data()就是指拿到的json值
            console.log(num);
        }               
});

重新加载ajax的url

var table = $('#example').DataTable( {
    ajax: "data.json"
} );
 
table.ajax.url( 'newData.json' ).load();

补充一个重点

关于json格式，最好写成如下方式，取值方便

{
    "data": { //尽量不要改名 就叫data
        "key1": "value1",
        "key2": "value2"
    }
}