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

Posted 2023-05-07

【中文标题】如何使用 jquery 数据表加载本地 JSON 变量

【英文标题】：how to load the local JSON variable using jquery datatable

【发布时间】：2011-11-30 05:04:08

【问题描述】：

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

感谢您的帮助。

【问题讨论】：

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

【参考方案1】：

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

DOM javascript array Ajax source Server side processing

在您的情况下，您需要使用第二个（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】：

用jessegavinanswer解决问题：

$(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。