DataTables - Using Column Names Instead of Indexes

Question

I have a DataTables setup as follows.

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

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?

Diode · Accepted Answer · 2013-04-21 14:38:46Z

3

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/

EDIT: 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/

edited Apr 21, 2013 at 14:38

answered Apr 21, 2013 at 14:27

Diode

25.2k8 gold badges43 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jomoos Over a year ago

Is there any way I can persist with the column names?

mpen Over a year ago

mData does not appear to be used for the sortCol parameters the client sends :-(

Collectives™ on Stack Overflow

DataTables - Using Column Names Instead of Indexes

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related