如何使用jquery datatable加载本地JSON变量
我有一个本地JSON数据集。 我想使用jquery datatable插件来显示它。 数据表插件中是否有任何设置或配置来显示数据？ 我能找到的就是进行AJAX调用和服务器调用。
谢谢您的帮助。
您可以通过4种不同的方式为DataTables提供数据
- DOM
- Javascript数组
- Ajax源码
- 服务器端处理
在您的情况下，您将需要使用第二个（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"} ] }); 您可以设置指向DataSet的AjaxSource参数：
$('#example').dataTable( { "sAjaxSource": 'dataset.json' } );
这将加载所有数据一次并将它们放入DataTable。 有关http://www.datatables.net/examples/data_sources/ajax.html的更多详细信息，请参阅。
约万
你可以让你的json本地文件进行正常的ajax调用，但需要注意一些警告（参见http://en.wikipedia.org/wiki/Same_origin_policy ，或jQuery的.getJSON使用本地文件停止在Firefox 3.6.13上工作 ，fwiw）
但绝对可以这样做：
$.getJSON('page.json', function(data) { /* do something with each item in data */ });
用jessegavin 答案解决问题：
$(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"} ] }); });
使用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()来解析它。
有关代码和演示，请参阅此jsFiddle 。