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

?

?

?

?

?

?

?

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。