1
我在隱藏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>
請幫忙。