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 )+'%';}}
]