jquery-datatables нижний колонтитул в скрытом div

Question

Я использую jQuery-datatables (версия 1.9) в скрытом div. Он отлично отображает, пока у меня нет нижнего колонтитула, но когда я добавляю нижний колонтитул, он не отображается с надлежащей шириной. Когда я проверяю ширину в HTML через firebug, я нахожу, что все столбцы установлены на ширину 0.

Я уже использовал fnAdjustColumnSizing на столе, но все тот же вопрос.

Вот мой HTML таблица

<div id="Report" style="display: none"> 
    <table id="rpt" class="display"> 
     <thead> 
     <tr style="background-color:#B9C9FE;color:#0033BB;"> 
     <th>Col1</th> 
     <th>Col2</th> 
     ... 
     </tr> 
    </thead> 
    <tbody></tbody> 
    <tfoot> 
     <tr style="background-color:#B9C9FE;color:#0033BB;"> 
     <th>Col1</th> 
     <th>Col2</th> 
     ... 
     </tr> 
    </tfoot> 
    </table>  
    <br/> 
</div> 

Вот DataTable

var rptTable = $("#rpt").dataTable({ 
    "bProcessing" : true, 
    "bDestroy": true, 
    "bJQueryUI": true, 
    "oTableTools": { 
     "sSwfPath" : "/js/DataTables/extras/TableTools/media/swf/copy_csv_xls_pdf.swf", 
     "aButtons": ["csv"]          
    }, 
    "sDom": '<"H"fp><tr><"F">T',     
    "aoColumns": [ 
      { "sWidth": "60px" },           
      { "sWidth": "100px" },           
      { "sWidth": "65px" },         
      { "sClass": "right","sWidth": "65px"},  
      { "sClass": "right","sWidth": "65px"},  
      { "sClass": "right","sWidth": "65px" },  
      { "sClass": "right","sWidth": "65px" },  
      { "sClass": "right","sWidth": "65px"},  
      { "sClass": "right","sWidth": "65px"},  
      { "sClass": "right","sWidth": "65px"},  
      { "sClass": "right","sWidth": "65px" },  
      { "sWidth": "25px" }         

    ], 
    "bAutoWidth": false, 
    "sScrollX": "100%", 
    "bSort": true, 
    "bPaginate": true, 
    "iDeferLoading": 0, 
    "iDisplayLength": 25 
}); 

А вот часть AJAX вызова, который обрабатывает табличные данные

success: function(returnData){ 
    var json = $.parseJSON(returnData); 
    rptTable.fnClearTable(); 
    if(json){ 
     if(json.Result === 'OK') { 
      if(json.Records.length > 0){ 
       rptTable.fnAddData(json.Records); 
       rptTable.fnAdjustColumnSizing(false); 
       $("#Report").show(); 
      }         
     } 
     ... 
    } 
    ... 
} 

Вот сноска HTML, как показано в firebug.

<div class="dataTables_scrollFootInner" style="width: 100px; padding-right: 0px;"> 
<table class="display dataTable" style="margin-left: 0px; width: 100px;"> 
<tfoot> 
<tr style="background-color:#B9C9FE;color:#0033BB;"> 
<th class="ui-state-default" rowspan="1" colspan="1" style="width: 0px;">Col1</th> 
<th class="ui-state-default" rowspan="1" colspan="1" style="width: 0px;">Col2</th> 
... 
</tr> 
</tfoot> 
</table> 
</div> 

Помогите.

Answer 1

Извините, это была глупая ошибка. Я использовал fnAdjustColumnSizing перед тем, как попробовать show на скрытом div. Так что я просто изменил следующий

if(json.Records.length > 0){ 
    rptTable.fnAddData(json.Records); 
    rptTable.fnAdjustColumnSizing(false); 
    $("#Report").show(); 
} 

в

if(json.Records.length > 0){ 
    rptTable.fnAddData(json.Records); 
    $("#Report").show(); 
    rptTable.fnAdjustColumnSizing(false); 
}