Call Datatables again after AJAX

gheter

Hi,
I'm new to a lot of this. DataTables is working great. But I need some help, after the page loads and I then write a table triggered by the user using AJAX I am unable to get DataTables to apply to this new table. Any help would be great.
Thanks, Gabe

allan

How do you initialise the table after your Ajax call? I presume the table being written includes tbody, thead etc?

Allan

gheter

I do have tbody and thead. I'm using jQuery's .load for the ajax.
The dataTable is defined here...
[code]
oTable = jQuery('.dataTable').dataTable({
"sPaginationType": "full_numbers",
"aoColumns": [{ "sType": "html"},null,null],
"aaSorting": [[2,'asc'],[0,'asc']]
});
[/code]

AJAX call here...
[code]


Click here put it in content box 1
Click here put it in content box 2

CONT1
CONT2

<!-- #content -->
<!-- #container -->


jQuery.ajaxSetup ({
cache: false
});
var ajax_load = "";
var loadUrl = "http://10.0.2.73/aaa";


jQuery("#link1").click(function(){
jQuery("#content1").html(ajax_load).load(loadUrl, null);
oTable.fnDraw();
});

[/code]

The AJAX is working but when I try fnDraw the table is not rendered and I get an error on page.
'oFeatures is null or not an object'

Thanks for your help, Gabe

gheter

Correction, when calling fnDraw after .load the table is rendered but dataTables is not applied and I get the ofeatures error from above.
Thanks, Gabe

allan

Bare in mind that the .load() request is asynchronous (Ajax). You need to perform the actions on the table, after the load has completed, not after the load has been requested.

[code]
jQuery("#link1").click(function(){
jQuery("#content1").html(ajax_load).load(loadUrl, function() {
jQuery('#example').dataTable();
});
});
[/code]
Note that here I've re-initialised the table, not just fnDraw.

Allan

gheter

Sorry if I'm missunderstanding, but I've tried re-initializing the table as you have above and it does nothing. If I replace the re-initalization with an alert, the alert runs before the table is drawn.
Thanks, Gabe

gheter

Got it figued out, problem was a stupid mistake on my part. Not supprising. With all the php files I'm using I didn't notice that I have been assigning the wrong ID to the table with ajax. The callback is now functioning like expected. Appritiate your help!
THanks, Gabe

damekko

Hi Allan,

I know this is an old post but i'm having a similar problem with the re-initialization of the Datatable after loading some info using Ajax on one column of it so i can filter it.

Initialization Code is here:

[code]
$(document).ready(function() {
TableToolsInit.sSwfPath = "ZeroClipboard.swf";
TableToolsInit.sPrintMessage = "";
$('#tMonitoreo').dataTable({
"bJQueryUI": true,
"iDisplayLength": 1000,
"sDom": 'T<"clear">plfrtip',
"bStateSave": false
});
} );
[/code]

Then i load the table using ColdFusion and on one column/cell i make an Ajax call and use your previous code for reinitializing it using the succesful option in the .load:
[code]


Contrato
Estado / Ciudad
Producto
Estatus





#Orden_IndiceContrato#
#Identificacion_Enlace_Servicio#
#Instalacion_Estado#
#Instalacion_Ciudad#
#Servicio#



$('###CPA#').load('estatus_cpa.cfm?cpa=#CPA#', function() {
$('##tMonitoreo').dataTable();});






[/code]

This is an image representation of the table: http://img96.imageshack.us/i/datatable.png/

BTW Great Table Plug-In for Jquery i can't live without it anymore :)

Hope you can help me.. Thx!

allan

not quite sure I understand - if you want to create the table object first and then manipulate it - you should use the API methods - fnAddData etc, rather than writing the DOM manually - since DataTables won't be able to see that.

Allan

damekko

Hello Allan, thx for answering so fast.

Sorry for not making clear what i want to achieve...

What i am trying to do is to make Datatables Filter/sort the las table column which i populate with ajax, i understand that datatables is not seeing the info since data is loaded after datatables has been initialized.

Is there any function i can call after i've populated the last column so DT can filter/sort it? (i'll check up on fnAddData)

I've been trying to use fnDraw or even reinitialize the table after data has been loaded but no luck.

(sorry if i mispelled something, english not my native language)

Thank you.

Victor Sandoval.

allan

Here is an example of how to use fnAddData: http://datatables.net/examples/api/add_row.html . When you use fnAddData, DataTables will automatically do sorting and filtering for you. You shouldn't need to call fnDraw in this case either, since that will also be done automatically :-).

Allan

damekko

Oh wow, that clears things up for me :-)
i'll just need to wait till i get the data so i can add the whole row.

Thank you very much for all the help!!!

Regards.

Victor Sandoval