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上尝试fnAdjustColumnSizing之前使用show。所以我只是改变了以下内容

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

jquery-datatables页脚隐藏在div中

1 个答案: