Configuring DataTables for nested objects in JSON Array

Configuring DataTables for nested objects in JSON Array

rwkiiirwkiii Posts: 13Questions: 5Answers: 0
edited July 2014 in Free community support

I'm using Ajax GET to call an MVC Controller Action that returns Json. The Json result is returned like this:

[{
"User":
    {
        "Name":"John Doe",
        "Company":"EXAMPLE.COM",
        "CountryCode":"USA",
        "StateCode":"IA",
        "Language":"en-US",
        "CreatedDate":"\/Date(1404523831720)\/",
        "LastLoginDate":"\/Date(1404523831720)\/",
    },

"RoleNames":
    ["Employee","Coordinator"]
},

    ...etc, etc...

]

When I load my page I see that DataTables has the correct number of table rows (15), but none of them have any data. Of course, the following error is a tell-all:

DataTables warning: table id=jsonajaxtable - Requested unknown parameter '0' for row 0. For more information about this error, please see http://datatables.net/tn/4

But I am not sure how (in DataTables' expectations) how to configure the jQuery for the nested objects in my result array (User and RoleNames).

Here is my HTML:

    <table id="jsonajaxtable">
        <thead></thead>
        <tbody></tbody>
        <tfoot></tfoot>
    </table>

and here is my jQuery so far:


$(document).ready(function () { userList = []; $.ajax({ url: "/Admin/UsersList/", data: { data: 5 }, // parameter not needed currently... success: function (data) { alert("success"); userList = data; }, error: function (data) { alert("error"); alert(data); }, type: 'GET' }); $('#jsonajaxtable').dataTable({ "aaData": userList.User, "aoColumns": [ { "bSortable": true, "sTitle": "Company", "Company": "Company" }, { "bSortable": true, "sTitle": "Name", "Name": "Name" } ] }); // Add event listener for opening and closing details $('#jsonajaxtable tbody').on('click', 'td.details-control', function () { var tr = $(this).closest('tr'); var row = table.row(tr); if (row.child.isShown()) { // This row is already open - close it row.child.hide(); tr.removeClass('shown'); } else { // Open this row row.child(format(row.data())).show(); tr.addClass('shown'); } }); });

My eventual configuration of DataTables will be to use some of the data in the returned Json to populate Child Rows. I've only been experimenting with DataTables today, so don't be too critical of my coding. I know it's not right. ;-)

Can anyone provide me with an example (given my Json structure) of how to configure the DataTables jQuery to see the data inside of the User object?

Also, what would I need to add to see just one piece of data in a Child Row?

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 63,205Questions: 1Answers: 10,415 Site admin
    Answer ✓

    You need to use columns.data to tell DataTables where to get the data from, since the object is not ordered in anyway. See also the data source manual page for information about using objects as the data source.

    Allan

This discussion has been closed.