CODEWITHSUNDEEP
jquerydatatables
blgrnboy
blgrnboy

Reputation: 5167

jQuery DataTables: Ajax sourced data not rendering

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

Upvotes: 0

Views: 1210

Answers (1)

shamsup
shamsup

Reputation: 2042

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));

Upvotes: 1

Related Questions