jQuery DataTables: Ajax sourced data not rendering

Question

I cannot get DataTables to render my data. Here is the JavaScript I have. Please keep in mind that I am using jQuery's .ajax() method because the returned data will change once I figure out this issue, and some of the new data will be used for another data table.

For now, can you guys please help me figure out what I have wrong below?

$(document).ready(function () {

    $.ajax({
        url: '/api/data/nodesummary/'
    }).done(function (returnedData) {
        console.log(returnedData);
        var dt1 = initDataTable('#nodesDownTable', returnedData);
    });
});

function initDataTable(tableId, ajaxData) {

    return $(tableId).DataTable({
        ajax: {
            data: ajaxData.NodesFullyDown
        },
        bAutoWidth: false,
        dom: 'Bfrtip',
        buttons: [
            {
                extend: 'excel',
                text: 'Export (Excel)'
            },

            {
                extend: 'csv',
                text: 'Export (CSV)'
            },

            {
                extend: 'pdf',
                text: 'Export (PDF)'
            }
        ],
        'columns': [
                        { data: 'Name', 'type': 'string' },
                        { data: 'IPAddress', 'type': 'string' },
                        { data: 'IssueTime', 'type': 'date' },
                        { data: 'LastStatusTime', 'type': 'date' }
        ],
        "columnDefs": [
                    {
                        "render": function (data, type, row) {
                            var mDate = moment.utc(data);
                            return mDate.tz(jstz.determine().name()).format('M/D/YYYY HH:mm:ss z');
                        },
                        'targets': 2
                    },
                    {
                        "render": function (data, type, row) {
                            var mDate = moment.utc(data);
                            return mDate.tz(jstz.determine().name()).format('M/D/YYYY HH:mm:ss z');
                        },
                        "targets": 3
                    }
        ],
        'order': [[1, 'desc']]
    });
}

Here is the JSON that is returned from the AJAX call:

{
    "NodesFullyDown": [{
        "Name": "node1",
        "IPAddress": "10.1.1.1",
        "LastStatusTime": "2016-06-03T21:31:37.5530000",
        "IssueTime": "2016-05-25T02:37:53.1070000"
    },
    {
        "Name": "node1",
        "IPAddress": "10.1.1.2",
        "LastStatusTime": "2016-06-03T21:31:37.5530000",
        "IssueTime": "2016-05-25T02:37:53.1030000"
    }]
}

shamsup · Accepted Answer · 2016-06-03 22:08:06Z

1

At the point in time that you try to call initDataTable, the returnedData variable is just a string, not an object.

$(document).ready(function () {
    $.ajax({
        url: '/api/data/nodesummary/'
    }).done(function (returnedData) {
        returnedData = JSON.parse(returnedData); // parse the string into an object
        console.log(returnedData);
        var dt1 = initDataTable('#nodesDownTable', returnedData);
    });
});

Note: You could also call JSON.parse() inside of your function call to leave the string unmodified for whatever you would like to do with it later.

var dt1 = initDataTable('#nodesDownTable', JSON.parse(returnedData));

answered Jun 3, 2016 at 22:08

shamsup

2,04215 silver badges19 bronze badges

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

3 Comments

shamsup Over a year ago

If you use $.getJSON(), the resulting data is automatically parsed into an object by the function, but this isn't true for $.ajax()

blgrnboy Over a year ago

No luck with the suggestion. The data is parsed, but when passed into the initDataTable(), datatables sends an alert that I am using invalid JSON (and to visit datatables.net/manual/tech-notes/1). I have validated my JSON, so I think my problem is somewhere in the ajax object of DataTables.

shamsup Over a year ago

ajax: {data: ajaxData.NodesFullyDown}, <-- here you are passing an array to the data option, and not a url. This is supposed to be the source of the JSON data, not an object. More Reference. I don't think you need to use the ajax option within datatables because you already have the data from the ajax call you performed previously

Collectives™ on Stack Overflow

jQuery DataTables: Ajax sourced data not rendering

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related