JQuery UI Tabs and datatables

MDW

Lots of topics on here involving ui tabs and datatables, but none that seem to be having the problem I am having. It is quite an odd one, maybe a bit difficult to explain but worth a shot.

2 tabs, each with ajax-loaded table html, and both using datatables.

The two files that are called on to load the ajax content return full, valid html table code.

The javascript (excerpt):
[code]
// jquery ui tabs
$(".tabs").tabs({
cache: true,
active: $.cookie($(".tabs").attr("id")),
activate: function( event, ui ) {
var activeTab = $(this).tabs( "option", "active" );
$.cookie($(".tabs").attr("id"), activeTab, { expires: 1 });
},
load : function ( event, ui) {
var activeTab = $(this).tabs( "option", "active" );
if ( activeTab == 3 ) {
initTableBookings();
}
if ( activeTab == 4 ) {
initTableMatrix();
}
}
});

// 2 functions to initialise datatables on the returned html.

function initTableBookings() {
initSortColumn = 0;
initSortOrder = "asc";
var tableConfigBookings = $.extend( true, dataTablesCustomConfig, {
"iDisplayLength": 20,
"aaSorting": [[ initSortColumn, initSortOrder ]],
"aoColumnDefs": [
{ "bSortable": true, "bSearchable": true, "bVisible": true, "sWidth": "30%", "aTargets": [ 0 ] },
{ "bSortable": true, "bSearchable": true, "bVisible": true, "sWidth": "40%", "aTargets": [ 1 ] },
{ "bSortable": true, "bSearchable": true, "bVisible": true, "sWidth": "20%", "aTargets": [ 2 ] },
{ "bSortable": false, "bSearchable": true, "bVisible": true, "sWidth": "10%", "aTargets": [ 3 ] }
]
});
oTable = $("#bookingsTable").dataTable( tableConfigBookings );
}

function initTableMatrix() {
initSortColumn = 0;
initSortOrder = "asc";
var tableConfigMatrix = $.extend( true, dataTablesCustomConfig, {
"iDisplayLength": 10,
"aaSorting": [[ initSortColumn, initSortOrder ]],
"aoColumnDefs": [
{ "bSortable": true, "bSearchable": true, "bVisible": true, "sWidth": "20%", "aTargets": [ 0 ] },
{ "bSortable": false, "bSearchable": true, "bVisible": true, "sWidth": "80%", "aTargets": [ 1 ] }
]
});
oTable2 = $("#matrixTable").dataTable( tableConfigMatrix );
}
[/code]

I am using a cookie to retain the last viewed tab so I can load the page with eiter of those two tabs pre-secleted.

It all works fine, both tabs work as they should if they are they are pre-selected and the page is reloaded. If I switch between tab 4 and tab 3, the datatables on tab 3 works perfectly. However, if I switch to tab 4 at any point, the table re-draws itself and databases stops working with the following error:

TypeError: nCell is undefined

I have tried all manner of things, including trimming down the data in the tab-4 table to be very simple. Still has the same errors.

Debug here:
http://debug.datatables.net/iveqin

Many thanks in advance.

Mark

(edit, p.s. if I remove the datatables init from tabs 3, tab 4 works pefectly, so perhaps I am just misnderstaning how to have multiple tables on one page)

allan

Hi Mark,

> $.extend( true, dataTablesCustomConfig, {

This is the bit that looks 'interesting' to me. You are extending `dataTablesCustomConfig` potentially twice - firstly in `initTableBookings` and subsequently in `initTableMatrix` . This is modifying your `dataTablesCustomConfig` object, so if the bookings table is initialised first, it defines four columns, which obviously won't make sense to the matrix table.

This is a bit of a quirk of how $ extend works, but if I am correct, then you can fix this by simply extending a new object:

[code]
$.extend( true, {}, dataTablesCustomConfig, {
[/code]

That will leave your original custom config object pristine for the next table init to use it.

Allan

MDW

Hi Allan,

Thank you very much. That has indeed fixed the problem.