Datatable-将JSON数据插入表 [英] Datatable - Insert JSON data to the table

问题描述

我想将JSON数据插入到表中，但是我可以使其工作，但不断出现错误：

I would like to insert JSON data into my table but I can make it to work, I keep getting error:

请求的数据表第0行的未知参数0

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获得的数据响应如下：

The data I am getting from the AJAX respond it's something like that:

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

推荐答案

你快到了。我对添加列是正确的，请参阅此工作的JSFiddle：> https ：//jsfiddle.net/annoyingmouse/gx3ktawn/

You were nearly there. I was right about adding columns, see this working JSFiddle: https://jsfiddle.net/annoyingmouse/gx3ktawn/

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

Basically you need to tell the DataTable what to do with the data you give it, you also need to make sure you don't clear the data in each iteration of your response ;-).

告诉DataTable数据的结构也可以帮助您增加每行分别。您也可以添加整个数组（ myTable.clear（）。rows.add（logs）.draw（）; ），而不是清除表，然后遍历

Telling the DataTable the structure of your data also helps in taht you can add each row individually. You could also add the whole array as well (myTable.clear().rows.add(logs).draw();) rather than clear the table, iterate over the rows in your log and add each one and then draw the table.

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

希望有帮助。

这篇关于Datatable-将JSON数据插入表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！