jQuery DataTables:Ajax源数据无法呈现

时间:2016-06-03 21:51:15

标签: jquery datatables

我无法获取DataTables来呈现我的数据。这是我的JavaScript。请记住,我使用的是jQuery的.ajax()方法,因为一旦我发现这个问题,返回的数据就会改变,而一些新数据将用于另一个数据表。

现在,请你们帮我解决下面的错误吗?

$(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']]
    });
}

这是从AJAX调用返回的JSON:

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

1 个答案:

答案 0 :(得分:1)

在您尝试调用initDataTable的时间点,returnedData变量只是一个字符串,而不是一个对象。

$(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);
    });
});

注意:你也可以在你的函数调用中调用JSON.parse(),保留字符串不被修改,以便稍后你想做什么。

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