datatables - Datatable - 向表中插入 JSON 数据

Question

我想将 JSON 数据插入到我的表中，但我可以让它工作，但我不断收到错误:

datatables requested unknown parameter 0 for row 0

var myTable = $('#my_logs').DataTable({
        "paging": true,
        "lengthChange": true,
        "searching": true,
        "ordering": true,
        "info": true,
        "autoWidth": true
    }); 


$( "#getResults" ).click(function() {

$.ajax({
            url: "http://www.myurl.com/data",
            data: {
                "from_date": from_date,
                "to_date": to_date
            },              
            type: "POST",
            timeout: 30000,
            dataType: "json", // "xml", "json"
            success: function(logs) {

            $.each(logs, function( index, value ) {
                myTable.clear().draw();
                myTable.row.add({
                   "Date": "1234",
                   "User Name": "1234",
                   "Class": "1234",
                   "Function": "1234",
                   "Action": "1234",
                   "Description": "1234"
                }).draw();
            }); 

            },
            error: function(jqXHR, textStatus, ex) {
                alert(textStatus + "," + ex + "," + jqXHR.responseText);
            }
        });
});

我从 AJAX 获得的数据响应是这样的:

[
{
"log_time":"2015-12-27 09:42:21",
"user_name":"Me",
"class_name":"login",
"class_function":"authentication",
"action_title":"User login",
"action_description":"I am logged in"
},
{
"log_time":"2015-12-27 09:42:21",
"user_name":"me",
"class_name":"dashboard",
"class_function":"index",
"action_title":"Admin dashboard",
"action_description":"I am logged in"
}
]

Answer 1

你快到了。我关于添加 columns 的想法是正确的，请参阅这个有效的 JSFiddle:https://jsfiddle.net/annoyingmouse/gx3ktawn/

基本上，您需要告诉 DataTable 如何处理您提供的数据，您还需要确保您不会在响应的每次迭代中清除数据 ;-)。

告诉 DataTable 您的数据结构也有助于您可以单独添加每一行。您也可以添加整个数组 (myTable.clear().rows.add(logs).draw();) 而不是清除表，遍历日志中的行并添加每一个然后绘制表格。

var jsonData = [{
    "log_time": "2015-12-27 09:42:21",
    "user_name": "Me",
    "class_name": "login",
    "class_function": "authentication",
    "action_title": "User login",
    "action_description": "I am logged in"
}, {
    "log_time": "2015-12-27 09:42:21",
    "user_name": "me",
    "class_name": "dashboard",
    "class_function": "index",
    "action_title": "Admin dashboard",
    "action_description": "I am logged in"
}];

var myTable = $('#my_logs').DataTable({
    "paging": true,
    "lengthChange": true,
    "searching": true,
    "ordering": true,
    "info": true,
    "autoWidth": true,
    "data": [],
    "columns": [{
        "title": "Date",
        "data": "log_time"
    }, {
        "title": "User Name",
        "data": "user_name"
    }, {
        "title": "Class",
        "data": "class_name"
    }, {
        "title": "Function",
        "data": "class_function"
    }, {
        "title": "Action",
        "data": "action_title"
    }, {
        "title": "Description",
        "data": "action_description"
    }]
});

$(document).ready(function() {
    $("#getResults").click(function() {
        $.ajax({
            url: '/echo/json/',
            data: {
                json: JSON.stringify(jsonData)
            },
            type: "POST",
            timeout: 30000,
            dataType: "json", // "xml", "json"
            success: function(logs) {
                myTable.clear();
                $.each(logs, function(index, value) {
                    myTable.row.add(value);
                });
                myTable.draw();
            },
            error: function(jqXHR, textStatus, ex) {
                alert(textStatus + "," + ex + "," + jqXHR.responseText);
            }
        });
    });
});

希望对您有所帮助。