4

次のようにDataTablesをセットアップしています。

var pageData = [
    {
        "id":"2",
        "slug":"about\/history",
        "title":"History",
        "last_updated":"2013-04-21 09:50:41"
    },

    {
        "id":"3",
        "slug":"about",
        "title":"About",
        "last_updated":"2013-04-21 10:42:22"
    }
];

$(function () {
    $("#pageList").dataTable({
        "aaData"      : pageData,
        "aoColumns"   : [
            {
                "sTitle" : "slug"
            },
            {
                "sTitle" : "title"
            },
            {
                "sTitle" : "last_updated"
            },
            {
                "sTitle" : "id"
            }
        ]
    });
});

これを実行すると、次のエラーアラートが表示されます

DataTables warning (table id = 'pageList'): 
    Requested unknown parameter '0' from the data source for row 0

そして、列名の代わりにインデックスを使用してデータテーブルからデータにアクセスするためだと思いますpageData。私sTitleは仕事をするだろうと思ったが、そうではない。sName現在、サーバーにデータを送信するときにのみ使用される以外に、列名をデータテーブルに指定する適切なオプションが見つかりません。

解決策は、私が見落としていた単純なものになると思います。さて、私はここで何が欠けていますか？

4

1 に答える 1

3

jQuery データテーブルは、データを配列の配列として受け入れます。したがって、データをオブジェクトの配列から配列の配列に変換する必要があります。

var pageData = [{
    "id": "2",
        "slug": "about\/history",
        "title": "History",
        "last_updated": "2013-04-21 09:50:41"
},

{
    "id": "3",
        "slug": "about",
        "title": "About",
        "last_updated": "2013-04-21 10:42:22"
}];

var aaPageData = [];
for (var i = 0; i < pageData.length; i++) {
    var item = pageData[i];
    aaPageData[i] = [item.slug, item.title, item.last_updated, item.id];
}

$(document).ready(function () {
    $("#table").dataTable({
        "aaData": aaPageData,
        "aoColumns": [{
            "sTitle": "slug",
        }, {
            "sTitle": "title"
        }, {
            "sTitle": "last_updated"
        }, {
            "sTitle": "id"
        }]
    });
});

デモ: http://jsfiddle.net/BYcsk/

編集：変換する必要はありません。mDataこれは、列のプロパティを指定することで実現できます。あなたがそれを与えていないので、エラーが来ています。

var pageData = [{
    "id": "2",
        "slug": "about\/history",
        "title": "History",
        "last_updated": "2013-04-21 09:50:41"
},

{
    "id": "3",
        "slug": "about",
        "title": "About",
        "last_updated": "2013-04-21 10:42:22"
}];


$(document).ready(function () {
    $("#table").dataTable({
        "aaData": pageData,
        "aoColumns": [{
            "sTitle": "slug",
            "mData": "slug"
        }, {
            "sTitle": "title",
            "mData": "title"
        }, {
            "sTitle": "last_updated",
            "mData": "last_updated"
        }, {
            "sTitle": "id",
            "mData": "id"
        }]
    });
});

デモ: http://jsfiddle.net/BYcsk/3/

于 2013-04-21T14:27:22.460 に答える