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

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

此外，ajax.dataSrc选项设置为空字符串，表示您的JSON数据是一个数据数组。

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

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

1 个答案: