JQuery UI Tabs and datatables

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):

// 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 );
        }

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)