JQuery Datatables 数据操作

JQuery Datatables 数据操作

DataTables有4种内置数据操作，每一个都可能使用正交（独立）数据源。这四种操作如下，重点看前三个。

display(string)//用于显示的数据
sort(string)//用于排序的数据
filter(string)//用于过滤的数据
type(string)//类型检测数据

 比如有如下类型的数据源：

{
    "name":       "Tiger Nixon",
    "position":   "System Architect",
    "start_date": {
        "display": "Mon 25th Apr 11",
        "timestamp": "1303682400",
        "filter":"2020-10-09"
    },
    "office":     "Edinburgh"
}

columns:[
    {
        data: 'start_date',
        render: {
            _: 'display',//‘_’等同于'display'
            sort: 'timestamp',
            filter:'filter'
        }
    }
    ...
    //其他列配置
]

 Datatables可以加载嵌套的数据源

{
    "name": "Tiger Nixon",
    "hr": {
        "position": "System Architect",
        "salary": "$320,800",
        "start_date": "2011/04/25"
    },
    "contact": {
        "office": "Edinburgh",
        "extn": "5421"
    }
}

针对上述代码，可以初始化如下代码： 

$('#myTable').DataTable( {
    ajax: ...,
    columns: [
        { data: 'name' },
        { data: 'hr.position' },
        { data: 'hr.salary' },
        { data: 'hr.state_date' },
        { data: 'contact.office' },
        { data: 'contact.extn' }
    ]
} );

 可以使用render方法进行数据操作

columns:[
    {
        data: 'price',
        render: function ( data, type, row ) {
            return '￥'+ data;
        }
    },
    {
        data: 'creator',
        render: function ( data, type, row ) {
            return data.firstName +' '+ data.lastName;
        }
    },
    {
        data: 'created',
        render: function ( data, type, row ) {
            var dateSplit = data.split('-');
            return type === "display" || type === "filter" ?
                dateSplit[1] +'-'+ dateSplit[2] +'-'+ dateSplit[0] :
                data;
        }
    },
    {
        data: null,
        render: function ( data, type, row ) {
            return Math.round( ( row.price - row.cost ) / row.price * 100 )+'%';
        }
    }
]