上一篇的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為標准
