Datatable - Insert JSON data to the table - datatables

Question

I would like to insert JSON data into my table but I can make it to work, I keep getting error:
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);
}
});
});
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"
}
]

Answer 1

You were nearly there. I was right about adding columns, see this working JSFiddle: https://jsfiddle.net/annoyingmouse/gx3ktawn/
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 ;-).
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);
}
});
});
});
Hope that helps.