web-dev-qa-db-ja.com

jQuery DataTablesのデータソースとしてローカルJSONオブジェクトを使用する方法

次のような形式のローカルJSONオブジェクトがあります。

[{
    "id": "58",
    "country_code": "UK",
    "title": "Legal Director",
    "pubdate": "2012-03-08 00:00:00",
    "url": "http://..."
},{
    "id": "59",
    "country_code": "UK",
    "title": "Solutions Architect,",
    "pubdate": "2012-02-23 00:00:00",
    "url": "http://..."
},{
    // ....more of the same......
}]

これをjQuery datatable のデータソースとして設定し、これを試しました。

testdata = '{{ jobsJSON | raw }}'; //twig template tag
console.log(testdata);
$('#test').dataTable({
    "aoData": testdata,
    "aoColumns": [
        { "mDataProp": "id" },
        { "mDataProp": "country_code" },
        { "mDataProp": "title" },
        { "mDataProp": "pubdate" },
        { "mDataProp": "url" }
    ]
});

DataTablesプラグインはテーブルをロードして描画しようとしますが、「テーブルにデータがありません」というエラーが表示されます

AJAXの呼び出しを行っておらず、ローカルJS変数からJSONオブジェクトにアクセスしたいだけです。

jqueryjsondatatables
20
codecowboy

独自のデータを提供するプロパティは、aaData NOT aoDataです。

testdata = [{"id":"58",...}]; // local object

$('#test').dataTable({
    "aaData": testdata,
    "aoColumns": [
        { "mDataProp": "id" },
        { "mDataProp": "country_code" },
        { "mDataProp": "title" },
        { "mDataProp": "pubdate" },
        { "mDataProp": "url" }
    ]
});

作業フィドル

41
Rory McCrossan

私は同じ問題に遭遇しました。解決策は次のとおりです。$('#list_table').dataTableコードをsetTimeout関数に配置して、dataTableアプリケーションを5秒間延期します。

setTimeout("$('#list_table').dataTable ...." , 5000);

テーブルがロードされた後にfirebugでdataTableプラグインを適用すると、「テーブルにデータがありません」というエラーが表示されないことに気付きました。

1
Kenji