上一篇的table內容通過DOM數據源顯示,即寫死在代碼里,這次就說說如何動態地加載數據:
首先datatables可識別數據分三種:
數組(Arrays [])
對象(objects {})
實例(new myclass())
在給定table的header的情況下實現三種數據格式
(1)數組:首先你需要一個數組<數組>
var arr = [[1,2,3,4],[5,4,3,2]];
接下來通過data標簽獲取數組
$('#table_id').DataTable( { 'data': arr } );
就獲得了
數據從第一列到最后一列按下標號自己對號入座
(2)對象
對象除了需要data加載數據還需要columns將數據對號入座,一般來說PHP返回的數據傾向數組而java返回傾向對象
如果java類為MyColumns含有屬性column1,column2,column3,column4,column5……
那么首先你需要一個數組<對象>
var mycolumns = [ { "column1": "1", "column2": "2", "column3": "3", "column4": "4", "column5": "5" }, { "column1": "5", "column2": "4", "column3": "3", "column4": "2", "column5": "1" } ];
接着你需要data獲取對象 並通過columns標簽來對每一列賦值
$('#table_id_example').DataTable( { data: mycolumns, //使用對象數組,一定要配置columns,告訴 DataTables 每列對應的屬性 //data 這里是固定不變的,name,position,salary,office 為你數據里對應的屬性 columns: [ { data: 'column1' }, { data: 'column2' }, { data: 'column3' }, { data: 'column4' } ] } );
data:object_namecolumns:[{data:'column_name'}]
運行結果同(1)數組一樣
注意:object中有5個屬性 但是顯示以columns為標准