weird jQuery dataTables rendering issue

Hi all,

I'm working on a web app that uses menus (fg.menu) and jQuery UI tabs. These work great. I'm now trying to apply the dataTables plugin to the tables that I'm loading (via Ajax) in my tabs. The tables are generated on the server side (JSON is not an option right now) and sit in static files that I load into the tabs. The tables have drill-down links to other tables. These get loaded into the current tab via this event handling in my tab options:

load: function(event, ui) 
{
  //alert ("load is called");

  $('a', ui.panel).live('click', function() 
  {      
      // now load the href into the tab
      $(ui.panel).load(this.href);
      // alert ("live click is called");

      // Set up the dataTable
      oTable = $('.my_table').dataTable( 
      { 
         "sScrollX": "100%",
         "bPaginate": false,
         "bJQueryUI": true,
         "bInfo": false,
         "bDestroy": true,
         "bRetrieve": true,
         "sDom": '<"H"r>t'
       } );

  return false;
  });

}  // end of load:

I also initialize the dataTables via the menu link loader (has a different event), which works fine, as does any initial tab select rendering.

When I click the links in the table, the sub-table will display in the tab, but the dataTable does not take effect. I noticed that when I clicked over to a new tab, the table would briefly flash the dataTable rendering before the new tab loaded. So, I added the alert (commented out in the code above) to see how the events were firing and lo and behold, the dataTables started rendering properly. When I remove the alert, it goes back to the plain table.

I've tried moving the dataTable init everywhere I can think of, calling fnDraw() explicitly in various places, and replicating the dataTable init everywhere, but nothing seems to make it render except the alert.

I'm using the dataTables 1.7.3, jQuery 1.4.2, and jQuery UI 1.8.5 in Firefox 3.6.12.

I'm guessing this is some kind of event issue, but I'm not aware of anything that alert does that would force the dataTables render to occur. Any ideas? Am I missing something stupidly obvious? :-)

ansaurus

tags:

views:

answers:

weird jQuery dataTables rendering issue

related questions