如何使用 jquery 数据表加载本地 JSON 变量
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7640204/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to load the local JSON variable using jquery datatable
提问by prgrmr
I have a local JSON dataset. I want to use jquery datatable plugin to display it. Is there any setting or configuration inside datatable plugin to display data? All I can find is to make AJAX calls and server calls.
我有一个本地 JSON 数据集。我想使用 jquery 数据表插件来显示它。数据表插件中是否有任何设置或配置来显示数据？我所能找到的就是进行 AJAX 调用和服务器调用。
Thanks for the help.
谢谢您的帮助。
采纳答案by jessegavin
You can supply DataTables with data 4 different ways
您可以通过 4 种不同的方式为 DataTables 提供数据
In your situation, you will want to use the second (Javascript Array) option. You will need to be able to translate the shape of your JSON object into an array objects.
在您的情况下，您将需要使用第二个（Javascript 数组）选项。您需要能够将 JSON 对象的形状转换为数组对象。
Here's an example
这是一个例子
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"}
]
});
回答by Jovan MSFT
You can set the AjaxSource parameter that points to your DataSet:
您可以设置指向您的数据集的 AjaxSource 参数：
$('#example').dataTable( {
"sAjaxSource": 'dataset.json'
} );
This will load all data once and place them into the DataTable. See more details on the http://www.datatables.net/examples/data_sources/ajax.html.
这将一次性加载所有数据并将它们放入数据表中。在http://www.datatables.net/examples/data_sources/ajax.html上查看更多详细信息。
Jovan
约万
回答by Dmyan
Solving the problem with the jessegavinanswer:
用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"}
]
});
});
回答by Gyrocode.com
Use dataoption to supply data for a table.
使用data选项为表提供数据。
For example:
例如：
var table_data = [
[ "Tiger Nixon", "System Architect", ",120", "2011/04/25", "Edinburgh", 5421 ],
[ "Garrett Winters", "Director", ",422", "2011/07/25", "Edinburgh", 8422 ]
];
$('#example').DataTable( {
data: table_data
} );
If your data is a string in JSON format, you may want to parse it first with either $.parseJSON()or JSON.parse().
如果您的数据是 JSON 格式的字符串，您可能希望首先使用$.parseJSON()或解析它JSON.parse()。
See this jsFiddlefor code and demonstration.
有关代码和演示，请参阅此 jsFiddle。
回答by Savino Sguera
You can get your json local file doing a normal ajax call, with some caveats (see http://en.wikipedia.org/wiki/Same_origin_policy, or jQuery's .getJSON using local files stopped working on Firefox 3.6.13, fwiw)
您可以让您的 json 本地文件执行正常的 ajax 调用，但有一些警告（请参阅http://en.wikipedia.org/wiki/Same_origin_policy或jQuery 的 .getJSON 使用本地文件在 Firefox 3.6.13 上停止工作，fwiw）
But it should definitely be possible to do:
但绝对应该可以这样做：
$.getJSON('page.json', function(data) {
/* do something with each item in data */
});
