My page displays reports in the tables through AJAX - so my page doesn't reload.
How can I initialize my tables each time the data is populated into them via AJAX?
@romsok: When you say that you want to "initialise the table each time the data is populated into them via AJAX", have you tried the fnReloadAjax plug-in: http://datatables.net/plug-ins/api#fnReloadAjax ? This will reload data from the server from a different (or the same) source URL.
However, if you want to change the initialisation parameters (number of column, type etc) then you can't re-initialise a DataTable. What you need to do is destroy the old one (remove the DataTables wrapper from the DOM, and set the object to null if you have saved it to a variable) and then create a new HTML table and re-initialise it, rather like what Izzy has suggested.
I think for now I am going to take Izzy's approach since I already have JavaScript code in place to populate the tables from the AJAX response (responseXML). And deadlines are tight. And I don't even know where to start with fnReloadAjax.
But as per my earlier post - I tried Izzy's suggestion, but I must have gotten something wrong because the code I posted above, doesn't work.
So, can anyone please tell me what's wrong with my code?
It's failing for some reason, even though the function is reached...
[code]
function initMyDataTable()
{
$('#myTable').dataTable(
$(document).ready(function() {
initDatatable();
} );
[/code]
then it should be working fine. If not - then the most likely reason is that #myTable isn't in the DOM, or there might be a JS error somewhere.
The other thing that is curious, is that you originally specifically asked about Ajax support - but this example doesn't use Ajax at all.
Also regarding fnReloadAjax, the usage is fairly simple, and there are examples in the plug-in code, but it's better to concentrate on one thing at a time :-)
Yeah,
What happened is that I wrote AJAX code to populate data into several tables on my page - and afterward realized that after the table bodies/feet are emptied and populated again, I cannot use DataTables - so it is AJAX, but I am looking for a way to initialize DataTables after the AJAX response comes back.
As for the code:
[code]
function initMyDataTable()
{
$('#myTable').dataTable( {
"bPaginate": false,
"bInfo": false,
"bSortClasses": true,
"bJQueryUI": true
} );
}
[/code]
is defined in an external js file.
In the HTML I have:
and in the same external js - which also defines the callback function for AJAX response, initMyDataTable(); is called as part of the callback.
I used alert's and the function initMyDataTable(); is entered into, but is not exited from.
I used another alert box with document.getElementById("myTable"); and it returns an object table - not undefined.
Another thing I noticed.
When I do this:
[code]
alert("myTable = " + document.getElementById("myTable"));
alert("myTable = " + $('#myTable'));
[/code]
right before the problematic code in my function
the first alert prints out:
myTable = [object]
I looked at the DataTables js code at the error line:
[code]
else if ( typeof sData.charAt != 'function' )
[/code]
and took a SWAG: I assumed the code means that the table is there, but it cannot connect sData to the table cell.
So my next guess is that the fact that I have elements in table rows - i.e. horizontal column headers, was breaking the code. I replaced them with regular , and it looks like it works now.
So, I have a follow-up question.
How do I "un-initialize" a table?
What happens now is that every time my AJAX returns data, the tables get initialized, and they get another layer of column headers on top of them and another filter window, so as I call AJAX, all the add-ons stack up on top of eachother.
Okay - sounds like progress :-). You can't "un-initialise" a DataTable. As noted in my first post in this thread what you need to do is:
"However, if you want to change the initialisation parameters (number of column, type etc) then you can't re-initialise a DataTable. What you need to do is destroy the old one (remove the DataTables wrapper from the DOM, and set the object to null if you have saved it to a variable) and then create a new HTML table and re-initialise it, rather like what Izzy has suggested."
So basically - nuke the old table, and create a new one.
However, if the columns and basic initialisation parameters are the same, then it will be much easier to use fnReloadAjax.
Replies
I would sugest you put your initialisation into a function. then when your AJAX returns with its data recall the function to initialise it.
Something like this:
[code]
function initDatatable()
{
$('#example').dataTable();
}
$(document).ready(function() {
initDatatable();
} );
// in your ajax return put the following after you have changed your data
initDatatable();
[/code]
Hope this helps?
Regards,
Izzy
Thanks for the comments...
I added the following:
[code]
function initMyDataTable()
{
$('#myTable').dataTable(
{
"bPaginate": false,
"bInfo": false,
"bSortClasses": true,
"bJQueryUI": true
}
);
}
[/code]
And it doesn't work - I used alerts to trace the code, and when the JavaScript calls this function it fails.
@romsok: When you say that you want to "initialise the table each time the data is populated into them via AJAX", have you tried the fnReloadAjax plug-in: http://datatables.net/plug-ins/api#fnReloadAjax ? This will reload data from the server from a different (or the same) source URL.
However, if you want to change the initialisation parameters (number of column, type etc) then you can't re-initialise a DataTable. What you need to do is destroy the old one (remove the DataTables wrapper from the DOM, and set the object to null if you have saved it to a variable) and then create a new HTML table and re-initialise it, rather like what Izzy has suggested.
Hope this helps,
Allan
But as per my earlier post - I tried Izzy's suggestion, but I must have gotten something wrong because the code I posted above, doesn't work.
It's failing for some reason, even though the function is reached...
[code]
function initMyDataTable()
{
$('#myTable').dataTable(
{
"bPaginate": false,
"bInfo": false,
"bSortClasses": true,
"bJQueryUI": true
}
);
}
[/code]
Assuming you have something like:
[code]
function initMyDataTable()
{
$('#myTable').dataTable( {
"bPaginate": false,
"bInfo": false,
"bSortClasses": true,
"bJQueryUI": true
} );
}
$(document).ready(function() {
initDatatable();
} );
[/code]
then it should be working fine. If not - then the most likely reason is that #myTable isn't in the DOM, or there might be a JS error somewhere.
The other thing that is curious, is that you originally specifically asked about Ajax support - but this example doesn't use Ajax at all.
Also regarding fnReloadAjax, the usage is fairly simple, and there are examples in the plug-in code, but it's better to concentrate on one thing at a time :-)
Allan
What happened is that I wrote AJAX code to populate data into several tables on my page - and afterward realized that after the table bodies/feet are emptied and populated again, I cannot use DataTables - so it is AJAX, but I am looking for a way to initialize DataTables after the AJAX response comes back.
As for the code:
[code]
function initMyDataTable()
{
$('#myTable').dataTable( {
"bPaginate": false,
"bInfo": false,
"bSortClasses": true,
"bJQueryUI": true
} );
}
[/code]
is defined in an external js file.
In the HTML I have:
[code]
$(document).ready(function()
{
initMyDataTable();
} );
[/code]
and in the same external js - which also defines the callback function for AJAX response, initMyDataTable(); is called as part of the callback.
I used alert's and the function initMyDataTable(); is entered into, but is not exited from.
I used another alert box with document.getElementById("myTable"); and it returns an object table - not undefined.
So I am not sure where I went wrong.
[code]
function initMyDataTable()
{
alert("myTable = " + document.getElementById("myTable"));
$('#myTable').dataTable();
alert("initMyDataTable: end");
}
[/code]
And the first alert shows up, and the second one doesn't - so the error is in
[code]
$('#myTable').dataTable();
[/code]
[code]
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; WOW64; Trident/4.0; SLCC1; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)
Timestamp: Thu, 24 Dec 2009 18:51:00 UTC
Message: 'undefined' is null or not an object
Line: 701
Char: 9
Code: 0
URI: http://localhost:8080/js/jquery.dataTables.js
[/code]
When I do this:
[code]
alert("myTable = " + document.getElementById("myTable"));
alert("myTable = " + $('#myTable'));
[/code]
right before the problematic code in my function
the first alert prints out:
myTable = [object]
the second:
myTable = [object Object]
In firefox the first alert prints out:
myTable = [object HTMLTableElement]
I looked at the DataTables js code at the error line:
[code]
else if ( typeof sData.charAt != 'function' )
[/code]
and took a SWAG: I assumed the code means that the table is there, but it cannot connect sData to the table cell.
So my next guess is that the fact that I have elements in table rows - i.e. horizontal column headers, was breaking the code. I replaced them with regular , and it looks like it works now.
How do I "un-initialize" a table?
What happens now is that every time my AJAX returns data, the tables get initialized, and they get another layer of column headers on top of them and another filter window, so as I call AJAX, all the add-ons stack up on top of eachother.
Okay - sounds like progress :-). You can't "un-initialise" a DataTable. As noted in my first post in this thread what you need to do is:
"However, if you want to change the initialisation parameters (number of column, type etc) then you can't re-initialise a DataTable. What you need to do is destroy the old one (remove the DataTables wrapper from the DOM, and set the object to null if you have saved it to a variable) and then create a new HTML table and re-initialise it, rather like what Izzy has suggested."
So basically - nuke the old table, and create a new one.
However, if the columns and basic initialisation parameters are the same, then it will be much easier to use fnReloadAjax.
Regards,
Allan