Header corrupted when plugin was applied for hidden div.

I have functionality based on DataTables plugin integrated with JSF Richfaces. The main table in some cases becomes hidden, parent div for table has two states: shown and hidden. When state is hidden I'm trying to add Datatables.net plugin to table. No any issues with visible state, but when I going to change hidden div to visible the header is corrupted. If I place in search field any value and click search , the header will become normal.
jQuery v1.9.1
DataTables 1.9.4

The code to install plugin


function rerenderDataTable_#{id} () {


jQuery('.datatable_id}').dataTable( {
"bJQueryUI": true ,
"bStateSave": true ,
"oColReorder": { "iFixedColumns": 1 },
"sDom": 'RC<"clear">lfrtip',
"aoColumnDefs": [{ bVisible: false, aTargets: [1] }],
"bPaginate": #{not hidePageSizeSelector},
"bDestroy":true,
"bScrollAutoCss": false,
"sScrollX": "100%",
"sScrollXInner": "100%",
"bProcessing" : true,
"sPaginationType": "full_numbers",

"sScrollY": "300px",

"bScrollCollapse": true,
"oColVis": {"aiExclude": [ 0 ]},
oLanguage: { sUrl: "../scripts/language/locale-ru.txt" }
} );

I've traced script with Firefox debugger , and found that calculation from
function function _fnScrollDraw ( o )
with call of
iSanityWidth = $(o.nTable).outerWidth();
gets the 100 instead of current table width (1400 in visible mode). But Firebug shows value in pixels, for example 1400.

this table has properties:

<table class="column-table datatable_staff_case_listing_id dataTable" width="100%" cellspacing="0" cellpadding="2" border="0" style="margin-left: 0px; width: 100px;">

parent divs are:

<div class="dataTables_scroll">
<div class="dataTables_scrollHead ui-state-default" style="border: 0px none; width: 100%;">
<div class="dataTables_scrollHeadInner" style="width: 100px; padding-right: 0px;">
<table class="column-table datatable_staff_case_listing_id dataTable" width="100%" cellspacing="0" cellpadding="2" border="0" style="margin-left: 0px; width: 100px;">

When search is pressed, the value for header will become :

<div class="dataTables_scroll">
<div class="dataTables_scrollHead ui-state-default" style="border: 0px none; width: 100%;">
<div class="dataTables_scrollHeadInner" style="width: 1423px; padding-right: 0px;">
<table class="column-table datatable_staff_case_listing_id dataTable" width="100%" cellspacing="0" cellpadding="2" border="0" style="margin-left: 0px; width: 1423px;">


Plugins:

<script type="text/javascript" src="../scripts/ColVis.js"></script>
<script type="text/javascript" src="../scripts/ColReorder.js"></script>
<script type="text/javascript" src=../scripts/TableTools.js"></script>
<script type="text/javascript" src=../scripts/ZeroClipboard.js"></script>

How I can to avoid this calculation ?

Thanks for help.