DataTables don't load right when using JQuery UI Tabs built in Ajax function.

kerblooy

Hello! I'm currently having trouble getting DataTables to work with Jquery UI Tab's built in Ajax function.
Basically, I have 5 different tabs, each tab has quite a bit of content so I've decided to implement Ajax. The content for each tab doesn't load until a user clicks on that tab. In each tab there is a DataTable, but the DataTable doesn't work at all in any of the tabs. Here's the javascript code:

[code]
$(document).ready(function() {
$( "#tabs" ).tabs({
beforeLoad: function( event, ui ) {
ui.jqXHR.error(function() {
ui.panel.html(
"Couldn't load this tab. We'll try to fix this as soon as possible. " +
"Sorry!" );
});
}
});
});

$('.example').dataTable( {
"sPaginationType": "full_numbers",
"bDestroy": true
} );
[/code]

I can't link to the page as it is sensitive information. Any help will be very much appreciated!
Let me know if I need to provide more information.

http://debug.datatables.net/odepoz

tangerine

If you look at the debugger you will see that you have no table.
Your table id is "example" but you're trying to initialize it with ".example". But I don't think that's your only problem - I don't use tabs but I don't see how that code would provide different tables in different tabs.