web-dev-qa-db-ja.com

jqueryデータテーブルを使用してローカルJSON変数をロードする方法

ローカルJSONデータセットがあります。 jquery datatableプラグインを使用して表示したいのですが。データを表示するために、datatableプラグイン内に設定または構成はありますか？私が見つけることができるのは、AJAX呼び出しとサーバー呼び出しを行うことだけです。

助けてくれてありがとう。

jquerydatatables
19
prgrmr

DataTablesにデータを提供するには4つの方法があります

あなたの状況では、2番目の（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"}
  ]
});
18
jessegavin

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/

1
Dmyan

DataSetを指すAjaxSourceパラメータを設定できます。

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

これにより、すべてのデータが一度読み込まれ、DataTableに配置されます。 http://www.datatables.net/examples/data_sources/ajax.html の詳細をご覧ください。

ヨバン

1
Jovan MSFT

いくつかの警告（ 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 */
});
0
Savino Sguera

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 を参照してください。

0
Gyrocode.com