隐藏div中的jquery-datatables页脚

Question

我在一个隐藏的div中使用jQuery-datatables (1.9版)。只要我没有页脚，它就会呈现得很好，但是当我添加一个页脚时，它不会以适当的宽度显示。当我通过firebug检查HTML中的宽度时，我发现所有列都设置为宽度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>

这是数据表

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();
            }                                
        }
        ...
    }
    ...
}

下面是firebug中显示的页脚HTML。

<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

对不起，这是我的一个愚蠢的错误。在尝试在隐藏的div上使用show之前，我正在使用fnAdjustColumnSizing。因此，我简单地更改了以下内容

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