datatables in tabs with Fixed column problems

techpb

Hi I am using Jquery Tabs , Inside Each Tab there is table ..... I am using JqueryUI option Enable for Jquery UI look & Feel. Also My Requirement is that it should have rowspan & scroller . Initial Tab is loaded Properly but When I clicked on the second TAB , table in that tab get distracted , My code is as follows
Please suggest me what wrong with my code . I am pasting my HTML code , included JS & Javascript code


HTML Code ::::::



Income Statement
Balance Sheet
Cash Flow
Ratios







Year
Companies


Company 1
Company 2
Company 3
Company 4
Company 5




Total Revenue($mil)
2008
10.5
5.5
95+
5.5
A


<?php
//echo count($item) ."
";
//endforeach;
?>

Total Revenue($mil)
2009
22
5.0
98+
5
C


Total Revenue($mil)
2010
12
4.0
95+
4
X


Total Revenue($mil)
2011
23
5.0
95+
5
C














Year
Companies


Company 1
Company 2
Company 3
Company 4
Company 5




Total Current Assets($mil)
2008
Trident
Internet Explorer 5.5
Win 95+
5.5
A


Total Current Assets($mil)
2009
Trident
Internet Explorer 5.0
Win 95+
5
C


Total Current Assets($mil)
2010
Trident
Internet Explorer 4.0
Win 95+
4
X



Total Current Assets($mil)
2011
Trident
Internet Explorer 5.0
Win 95+
5
C







Work is in Progress ..... Be patience
Work is in Progress ..... Be patience


JS Files Used :::::::::::::

$this->template->add_css('assets/public/css/TableTools_JUI.css');
$this->template->add_js('assets/public/js/libs/jquery.ui.tabs.js');
$this->template->add_js('assets/public/js/libs/jquery.dataTables.js');
$this->template->add_js('assets/public/js/libs/ZeroClipboard.js');
$this->template->add_js('assets/public/js/libs/TableTools.js');
$this->template->add_js('assets/public/js/libs/FixedColumns.js');

JS Code ::::


var oTable = $('#example1').dataTable( {
"sScrollY": "200px",
"sScrollX": "100%",
"sScrollXInner": "150%",
"bScrollCollapse": true,
"bPaginate": false,
"bJQueryUI": true,
"aoColumnDefs": [{ "sWidth": "10%", "aTargets": [ -1 ]}]
});

var oTable1 = $('#example2').dataTable( {
"sScrollY": "200px",
"sScrollX": "100%",
"sScrollXInner": "150%",
"bScrollCollapse": true,
"bPaginate": false,
"bJQueryUI": true,
"aoColumnDefs": [{ "sWidth": "10%", "aTargets": [ -1 ]}]
});

$("#tabs").tabs( {
"show": function(event, ui) {
var oTable = $('div.dataTables_scrollBody>table.display', ui.panel).dataTable();
if ( oTable.length > 0 ) {
oTable.fnAdjustColumnSizing();
}
}
} );

new FixedColumns( oTable, {
"iLeftColumns": 2,
"iLeftWidth": 350
});

new FixedColumns( oTable1, {
"iLeftColumns": 2,
"iLeftWidth": 350
});