Can't get DataTables to work with jQuery.post ()
I am working on a form that uses date range selection to display information using DataTables.
When the user clicks on the button, the dates are sent through the jQuery.post () function and it gets the information as expected.
Here is a snippet of the associated code:
//Sending the dates range
$.post(url_route, datos, function(data,status){
if(status=='success'){
var response = jQuery.parseJSON(data);
//checking if data were found
if(response.list_events.length === 0){
console.log('No data available');
}
else{
//Let us display the info with DataTables inside div #list_events and
//table #table_id
$('#list_events').html('<table class="table table-striped table-hover" id="table_id"></table>');
$('#list_events table').append('<thead><tr><th>Event</th><th>Type</th><th>Attendance</th><th>Coordinators</th><th>Participants</th><th>Institutes</th><th>Talks</th></tr></thead><tbody></tbody>');
//retrieving the info for each row and append it to the table:
$.each(response.list_events,function(i,item)
{
$('#list_events').find('tbody').append('<tr>');
$('#list_events').find('tbody').append('<td>'+item.Event+'</td>');
$('#list_events').find('tbody').append('<td>'+item.Type+'</td>');
$('#list_events').find('tbody').append('<td>'+item.Attendance+'</td>');
$('#list_events').find('tbody').append('<td>'+item.Coordinator+'</td>');
$('#list_events').find('tbody').append('<td>'+item.Participant+'</td>');
$('#list_events').find('tbody').append('<td>'+item.Institute+'</td>');
$('#list_events').find('tbody').append('<td>'+item.Talk+'</td>');
});//end of each
//initializing DataTables
var table = $('#table_id').DataTable();
}//end of else (info found)
}//end of if success
}//end of post()
So far the information is displayed in DataTables, but it does not work completely as only information is displayed. The DataTables, next and previous search buttons and the number of drop-down results menus are not displayed.
The following error appears in console.log:
Uncaught TypeError: Cannot read property 'length' of undefined
Any ideas? Can anyone shed some light on this?
solved
The problem was the add function. If I type in just one addition with just the <tr>
following:
$('#list_events').find('tbody').append('<tr>');
Result in HTML <tr></tr>
That is, the tag is closed automatically ... no matter what. So the solution was to add everything to line one like below:
$('#list_events').find('tbody').append('<tr><td>'+item.Event+'</td><td>'+item.Type+'</td><td>'+item.Attendance+'</td><td>'+item.Coordinator+'</td><td>'+item.Participant+'</td><td>'+item.Institute+'</td><td>'+item.Talk+'</td></tr>');
And that was ☺
source to share
My first thought is that perhaps "response.list_events" is undefined. Of course your mistake:
"Uncaught TypeError: Cannot read property 'length' of undefined"
seems to imply this.
My second thought is that I recently did something like this where I had problems with the .post method and found success with the .ajax method.
Try something along these lines:
$.ajax({
type: "POST",
url: url_route,
data: datos,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(returned_from_server){
// your function here
}
});
My third thought is that I can't see where you put your closing tags.
$.each(response.list_events,function(i,item)
{
$('#list_events').find('tbody').append('<tr>');
$('#list_events').find('tbody').append('<td>'+item.Event+'</td>');
$('#list_events').find('tbody').append('<td>'+item.Type+'</td>');
$('#list_events').find('tbody').append('<td>'+item.Attendance+'</td>');
$('#list_events').find('tbody').append('<td>'+item.Coordinator+'</td>');
$('#list_events').find('tbody').append('<td>'+item.Participant+'</td>');
$('#list_events').find('tbody').append('<td>'+item.Institute+'</td>');
$('#list_events').find('tbody').append('<td>'+item.Talk+'</td>');
$('#list_events').find('tbody').append('</tr>'); // <--- I believe you might be missing this!!
});//end of each
Hope this was some help.
source to share
If you are using a remote source for your data, it is much more elegant and efficient to let DataTables display the data for you.
In your example, you retrieve data, create a table, and then turn it into a "DataTable". If it fits the bill and gets the job done, you've written perfectly fine code and you shouldn't read this answer anymore!
But the DataTables themselves are terribly clever about stripping the output of the data from the DOM and then expanding everything in its place. You benefit from more efficient updates while having cleaner code.
Here's a basic example. Without testing it in my environment, I cannot say for sure that it will do the job for you, but I think it should:
var myTable = $('#table_id').DataTable( {
"ajax": {
"url": url_route,
"data": function(customData) {
customData.datos = datos // need some way to have access to datos
}
}
});
And then on click, if you want newer data based on what changed (date range?) You just need to redraw.
myTable.draw();
I can think of several ways to get the data there - wrap it in a function that takes in and uses the data. Declare a named variable or some other quasi-global (or actually global, if you are that guy!) That myTable will have access to at any given time ... or even just destroy the current table and call an integer DataTable()
on it again.
source to share