使用ajax从外部文件中提取JSON数据

Question

我目前正在手动拉入JSON以测试引导表，但需要能够从外部文件拉入，类似于我在这里所做的事情：

    $(document).ready(function() {
        $('#content').dataTable( {
            "ajax": 'test.log'
        });
    });

我目前正在手动设置数据并像这样循环遍历：

$(document).ready(function () {
    var json = [{"data":{
        "Account": "1234",
            "Domain": "domain.com",
        "PlayerClass": "Player"},
        "level": "info",
        "message": "",
        "timestamp": "2015-06-11T15:11:03.425Z"
    },
               {"data":{
        "Account": "4567",
            "Domain": "domain.com",
        "PlayerClass": "Player"},
        "level": "info",
        "message": "",
        "timestamp": "2015-06-11T15:11:03.425Z"
    }];
    var tr;
    for (var i = 0; i < json.length; i++) {
        tr = $('<tr/>');
        tr.append("<td>" + json[i].data.Account + "</td>");
        tr.append("<td>" + json[i].data.Domain + "</td>");
        tr.append("<td>" + json[i].timestamp + "</td>");
        $('table').append(tr);
    }
});

显然，ajax的先前用法是应用DataTables，因此我需要编写它以仅应用.each()循环，或者将其放入DataTable中。

JSFIDDLE中的当前版本

Answer 1

以上述格式加载数据的正确方法是使用以下DataTables初始化选项：

$('#example').DataTable({
    "ajax": {
        "url": "test.log",
        "dataSrc": ""
    },
    "columns": [
        { "data" : "data.Account" },
        { "data" : "data.Domain" },
        { "data" : "timestamp" }
    ]
});

由于要在数据中使用对象 ，因此需要使用columns.data将对象属性与表列匹配。 可以使用点分表示法（例如data.Account ）来引用对象属性。

另外， ajax.dataSrc选项设置为空字符串以指示您的JSON数据是数据数组。

请参阅此JSFiddle进行演示。 请注意，该示例使用mockjax库来模拟通过Ajax加载JSON文件的目的，仅用于演示目的。 使用URL到url选项中的实际文件。