Replies

• allan Posts: 63,514Questions: 1Answers: 10,472 Site admin

  August 2010

  How do you initialise the table after your Ajax call? I presume the table being written includes tbody, thead etc?
  
  Allan
• gheter Posts: 5Questions: 0Answers: 0

  August 2010

  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 Posts: 5Questions: 0Answers: 0

  August 2010

  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 Posts: 63,514Questions: 1Answers: 10,472 Site admin

  August 2010

  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 Posts: 5Questions: 0Answers: 0

  August 2010

  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 Posts: 5Questions: 0Answers: 0

  August 2010

  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 Posts: 4Questions: 0Answers: 0

  April 2011

  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 Posts: 63,514Questions: 1Answers: 10,472 Site admin

  April 2011

  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 Posts: 4Questions: 0Answers: 0

  April 2011

  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 Posts: 63,514Questions: 1Answers: 10,472 Site admin

  April 2011

  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 Posts: 4Questions: 0Answers: 0

  April 2011

  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