上一篇的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为标准