如何使用 jquery 数据表加载本地 JSON 变量答案

【问题标题】：how to load the local JSON variable using jquery datatable如何使用 jquery 数据表加载本地 JSON 变量
【发布时间】：2011-11-30 05:04:08
【问题描述】：

我有一个本地 JSON 数据集。我想使用 jquery 数据表插件来显示它。数据表插件内部是否有任何设置或配置来显示数据？我能找到的只是进行 AJAX 调用和服务器调用。

感谢您的帮助。

【问题讨论】：

你有没有想过这个问题？我还想用传递给 aaData 的本地对象数组进行初始化。我看到知道有人理解你的问题。我尝试使用 mData 属性，就像使用服务器端数据集一样，但它不起作用。

标签： jquery datatables

【解决方案1】：

您可以通过 4 种不同的方式为 DataTables 提供数据

在您的情况下，您需要使用第二个（Javascript 数组）选项。您需要能够将 JSON 对象的形状转换为数组对象。

这是一个例子

var json = {
  BrowserStats : [
    { engine: "Trident", browser: "IE 4.0", platform: "Win 95+", version: 4 },
    { engine: "Trident", browser: "IE 5.0", platform: "Win 95+", version: 5 },
    { engine: "Trident", browser: "IE 5.5", platform: "Win 95+", version: 5.5 }
  ]
};

var data = jQuery.map(json.BrowserStats, function(el, i) {
  return new [el.engine, el.browser, el.platform, el.version];
});

$('#example').dataTable( {
  "aaData": data,
  "aoColumns": [
    { "sTitle": "Engine" },
    { "sTitle": "Browser" },
    { "sTitle": "Platform" },
    { "sTitle": "Version"}
  ]
});

【讨论】：

我认为 BrowserStats 后面的等号应该是一个冒号，你应该删除第三行后面的逗号。谢谢你的回答。
此答案中的示例代码不起作用，请参阅this jsFiddle。
@JigarParekh 这个答案差不多是 6 年前的事了，DataTables API 可能已经改变了。如果您找到正确的解决方案，请随时编辑此答案。

【解决方案2】：

您可以让您的 json 本地文件执行正常的 ajax 调用，但有一些注意事项（请参阅 http://en.wikipedia.org/wiki/Same_origin_policy 或 jQuery's .getJSON using local files stopped working on Firefox 3.6.13，fwiw）

但绝对应该可以做到：

$.getJSON('page.json', function(data) {
    /* do something with each item in data */
});

【讨论】：

【解决方案3】：

您可以设置指向您的 DataSet 的 AjaxSource 参数：

$('#example').dataTable( {
    "sAjaxSource": 'dataset.json'
} );

这将一次性加载所有数据并将它们放入 DataTable。查看http://www.datatables.net/examples/data_sources/ajax.html的更多详细信息。

约万

【讨论】：

【解决方案4】：

用jessegavin answer解决问题：

$(document).ready(function (){

var json = {
  BrowserStats : [
    { engine: "Trident", browser: "IE 4.0", platform: "Win 95+", version: 4 },
    { engine: "Trident", browser: "IE 5.0", platform: "Win 95+", version: 5 },
    { engine: "Trident", browser: "IE 5.5", platform: "Win 95+", version: 5.5 }
  ]
};

var data = jQuery.map(json.BrowserStats, function(el, i) {
  return [[el.engine, el.browser, el.platform, el.version]];
});

$('#example').dataTable( {
  "aaData": data,
  "aoColumns": [
    { "sTitle": "Engine" },
    { "sTitle": "Browser" },
    { "sTitle": "Platform" },
    { "sTitle": "Version"}
  ]
 });
});

https://jsfiddle.net/byejn8ye/

【讨论】：

非常有用的解决方案。

【解决方案5】：

使用data 选项为表提供数据。

例如：

var table_data = [
    [ "Tiger Nixon", "System Architect", "$3,120", "2011/04/25", "Edinburgh", 5421 ],
    [ "Garrett Winters", "Director", "$8,422", "2011/07/25", "Edinburgh", 8422 ]
];

$('#example').DataTable( {
    data: table_data
} );

如果您的数据是 JSON 格式的字符串，您可能需要先使用 $.parseJSON() 或 JSON.parse() 对其进行解析。

有关代码和演示，请参阅 this jsFiddle。

【讨论】：