javascript - DataTables - 使用列名而不是索引

Question

我有一个 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 之外，我找不到合适的选项来为数据表指定列名，它仅在将数据发送到服务器时使用。

我觉得解决方案将是一个我忽略的简单解决方案。那么，我在这里缺少什么？

Answer 1

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/