jquery-datatables footer in a hidden div

我在隐藏div中使用jQuery-datatables（版本1.9）。只要我没有页脚，它就会呈现正常，但是当我添加页脚时，它不会以适当的宽度显示。当我通过萤火虫检查HTML的宽度时，我发现所有列设置为宽度0.jquery-datatables footer in a hidden div

我已经在表上使用了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 
});

这里是处理表数据

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

这里是页脚AJAX调用的部分如萤火虫所示的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>

请帮忙。

来源

2016-01-23 bvnbhati

对不起，这是我的一个愚蠢的错误。在使用show隐藏div之前，我正在使用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); 
}

来源

2016-01-26 05:57:18 bvnbhati

jquery-datatables footer in a hidden div

回答

相关问题