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

最新推荐文章于 2025-08-07 16:14:07 发布

转载最新推荐文章于 2025-08-07 16:14:07 发布 · 1k 阅读

Jquery datatables.js 专栏收录该内容

23 篇文章

订阅专栏

本文介绍了如何使用Datatables处理三种不同类型的数据：数组、对象及实例。重点讲解了如何配置数组和对象以匹配表格的列头，并展示了具体的JavaScript代码示例。

首先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为标准