Datatables(2)动态加载数据类型


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

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM