如何使用jquery datatable加载本地JSON变量 [英] how to load the local JSON variable using jquery datatable

问题描述

我有一个本地的JSON数据集。我想使用jquery datatable插件来显示它。在datatable插件中是否有任何设置或配置显示数据？所有我可以找到的是使AJAX调用和服务器调用。

感谢您的帮助。

解决方案

您可以为数据表提供数据4种不同的方式

• DOM


• Javascript数组


• Ajax源


• 服务器端处理

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

以下是示例

  var json = {
 BrowserStats：[
 {引擎：Trident，浏览器：IE 4.0，平台：Win 95+，版本： 4}，
 {引擎：Trident，浏览器：IE 5.0，平台：Win 95+，版本：5}，
 {引擎：Trident，浏览器：IE 5.5 ，平台：Win 95+，版本：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 } 
 {sTitle：浏览器}，
 {sTitle：Platform}，
 {sTitle：Version} 
] 
}）; 
  

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.

Thanks for the help.

解决方案

You can supply DataTables with data 4 different ways

• DOM
• Javascript array
• Ajax source
• Server side processing

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.

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"}
  ]
});

这篇关于如何使用jquery datatable加载本地JSON变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！