如何使用本地 JSON 对象作为 jQuery DataTables 的数据源

Posted 2023-05-07

【中文标题】如何使用本地 JSON 对象作为 jQuery DataTables 的数据源

【英文标题】：How can I use a local JSON object as a data source for jQuery DataTables

【发布时间】：2012-03-29 00:20:49

【问题描述】：

我有一个格式如下的本地 JSON 对象：

[
    "id": "58",
    "country_code": "UK",
    "title": "Legal Director",
    "pubdate": "2012-03-08 00:00:00",
    "url": "http://..."
,
    "id": "59",
    "country_code": "UK",
    "title": "Solutions Architect,",
    "pubdate": "2012-02-23 00:00:00",
    "url": "http://..."
,
    // ....more of the same......
]

我想将此设置为 jQuery datatable 的数据源并尝试过：

testdata = ' jobsJSON | raw '; //twig template tag
console.log(testdata);
$('#test').dataTable(
    "aoData": testdata,
    "aoColumns": [
         "mDataProp": "id" ,
         "mDataProp": "country_code" ,
         "mDataProp": "title" ,
         "mDataProp": "pubdate" ,
         "mDataProp": "url" 
    ]
);

DataTables 插件加载并尝试绘制表格，但出现错误“表格​​中没有可用数据”

我没有进行 AJAX 调用，只是想从本地 JS 变量访问 JSON 对象。

【问题讨论】：

console.log(testdata); 给你一个字符串还是一个数组/对象？ （如果您无法区分，请使用typeof testdata。

它是一个字符串。我也尝试过使用 $.parseJSON() 。

谢谢 - 这对它进行了排序。 testdata = $.parseJSON(' jobsJSON | raw ');

【参考方案1】：

提供您自己数据的属性是aaData而不是aoData：

testdata = ["id":"58",...]; // local object

$('#test').dataTable(
    "aaData": testdata,
    "aoColumns": [
         "mDataProp": "id" ,
         "mDataProp": "country_code" ,
         "mDataProp": "title" ,
         "mDataProp": "pubdate" ,
         "mDataProp": "url" 
    ]
);

Working fiddle

【讨论】：

谢谢。这是这种情况的组合，并且 json 没有被正确解析： testdata = $.parseJSON( ' jobsJSON | raw ');

我知道这是一个旧回复，但我如何才能显示列标题？它目前是空的。谢谢！

@Ali 在你的 mDataProp 之后添加一个标题属性来设置列标题。 ***.com/a/22486279/119829

如果我有另一个我想设置为列的变量，我可以在不将该变量添加到该testdata json 的情况下执行此操作吗？

【参考方案2】：

我遇到了同样的问题，解决方法是这样的： 将$('#list_table').dataTable代码放入setTimeout函数中，延迟dataTable申请5秒：

setTimeout("$('#list_table').dataTable ...." , 5000);

我注意到在加载表格后在 firebug 中应用 dataTable 插件，它不会显示错误为“表格中没有可用数据”。