DataTables有4種內(nèi)置數(shù)據(jù)操作，每一個都可能使用正交（獨(dú)立）數(shù)據(jù)源。這四種操作如下，重點(diǎn)看前三個。

display(string)//用于顯示的數(shù)據(jù) sort(string)//用于排序的數(shù)據(jù) filter(string)//用于過濾的數(shù)據(jù) type(string)//類型檢測數(shù)據(jù)

?比如有如下類型的數(shù)據(jù)源：

{"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可以加載嵌套的數(shù)據(jù)源

{"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方法進(jìn)行數(shù)據(jù)操作

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

?

?

?

?

?

?

?

?

總結(jié)

以上是生活随笔為你收集整理的JQuery Datatables 数据操作的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。