jQueryUI Tabs with AJAX via link URL - DataTable Does Not Display At All

jQueryUI Tabs with AJAX via link URL - DataTable Does Not Display At All

jchristopherjchristopher Posts: 1Questions: 0Answers: 0
edited October 2012 in DataTables 1.9
All,

I've read several of the threads dealing with DataTables and jQueryUI Tabs however, none seem to address my issue. I do not want to use the scroller as in the DataTables Tabs example page does.

In my case, the table is rendered however, the DataTable rendering is not. Of note, that the DataTable does work with my code when I do not use the tabs.

I am using jQuery UI tabs to display several different DataTables and I fill the tabs via the URL:

[code]



My Assigned Orders
All Assigned Orders
All Unassigned Orders
All On Hold Orders



[/code]

My JS is as follows:

[code]
(function() {
// Variables
var lowTables = $('.oTable'),
lowTabs = $('#lowTabs');

// Initialize Tabs
lowTabs.tabs({
cache: true,
fx: { opacity: 'toggle' },
show: function(event, ui) {
var table = $.fn.dataTable.fnTables(true);
if ( table.length > 0 ) {
$(table).dataTable().fnAdjustColumnSizing();
}
},
selected: 0,
spinner: "Retrieving data..."
});

lowTables.dataTable({
"bDeferRender": true,
//sScrollY: "300px",
bScrollCollapse: true,
bSortClasses: false,
bProcessing: true,
bPaginate: false,
aoColumnDefs: [
{ "bSearchable": true, "bSortable": true, aTargets: [ 0 ] },
{ "bSearchable": true, "bSortable": true, aTargets: [ 1 ] },
{ "bSearchable": true, "bSortable": true, aTargets: [ 2 ] },
{ "bSearchable": true, "bSortable": true, aTargets: [ 3 ] },
{ "bSearchable": true, "bSortable": true, aTargets: [ 4 ] },
{ "bSearchable": true, "bSortable": true, aTargets: [ 5 ] },
{ "bSearchable": true, "bSortable": true, aTargets: [ 6 ] },
{ "bSearchable": true, "bSortable": true, aTargets: [ 7 ] },
{ "bSearchable": true, "bSortable": true, aTargets: [ 8 ] },
{ "bSearchable": false, "bSortable": false, aTargets: [ 9 ] }
],
bJQueryUI: false,
bStateSave: false
});
})();
[/code]

My guess is that the DataTable JS is trying to render the table before the AJAX completes so when I added the .datatable() to the $.ajaxComplete() it still does not work.

Any assistance is much appreciated.

Thanks,
J
This discussion has been closed.