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

【问题标题】：How can I use a local JSON object as a data source for jQuery DataTables如何使用本地 JSON 对象作为 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 }}');

标签： jquery json datatables

【解决方案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 之后添加一个标题属性来设置列标题。 stackoverflow.com/a/22486279/119829
如果我有另一个我想设置为列的变量，我可以在不将该变量添加到该testdata json 的情况下执行此操作吗？

【解决方案2】：

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

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

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

【讨论】：