DataTables - 使用列名而不是索引 [英] DataTables - Using Column Names Instead of Indexes

问题描述

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

现在，当我运行此命令时，我收到以下错误警告

Now, when I run this, I get the following error alert

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

我认为这是因为数据表使用索引而不是列名从 pageData 。我认为 sTitle 将完成工作，但事实并非如此。现在，我找不到合适的选项来为除 sName 之外的数据表指定列名，该名称仅在向服务器发送数据时使用。

And I assume it is because datatables using indexes instead of column names to access data from pageData. I thought sTitle will do the work, but it doesn't. Now, I can't find an appropriate option to specify column names to datatable other than sName which is used only when sending data to server.

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

I feel that the solution will be a simple one which I overlooked. Well, what am I missing here?

推荐答案

jQuery datatable接受数据为数组数组。因此，您必须将数据从对象数组转换为数组数组。

jQuery datatable accepts data as array of arrays. So you have to convert your data from array of objects to array of arrays.

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

demo： http://jsfiddle.net/BYcsk/

编辑：您无需转换。您可以通过为列指定 mData 属性来实现此目的。错误即将发生，因为你没有给出它。

You don't need to convert. You can achieve this by specifying mData property for columns. The error is coming as you haven't given it.

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

demo： http://jsfiddle.net/BYcsk/3/

这篇关于DataTables - 使用列名而不是索引的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！