jQuery的dataTables頭最初不調整列值，但調整後，我拖動屏幕

Question

我正在開發一個響應頁面，其中我使用數據表來顯示我從服務器（消費休息服務）獲得的數據，我使用函數動態生成dataTables。

這裏是Util.js我用來生成數據表的代碼。

function setDataTableData(id, data) { 
var tHead, tBody; 
tHead = "<thead><tr>"; 
tBody = "<tbody>"; 
for (var i = 0; i < Object.keys(data[0]).length; i++) { 
    tHead = tHead + "<td>" + Object.keys(data[0])[i] + "</td>"; 
} 
for (var i = 0; i < data.length; i++) { 
    tBody = tBody + "<tr>"; 
    for (var j = 0; j < Object.keys(data[i]).length; j++) { 
     tBody = tBody + "<td>" + data[i][Object.keys(data[i])[j]] + "</td>"; 
    } 
} 
tHead = tHead + "</tr></thead>"; 
tBody = tBody + "</tr></tbody>"; 
console.log(tHead + tBody); 
$(id).html(tHead + tBody); 
var table = $(id).dataTable({ 
    "scrollY": "200px", 
    "scrollCollapse": true, 
    "paging": false, 
    "bFilter": true 
}); 
$(id).on('keyup', '.ui-input-text', function() { 
    table.search(this.value).draw(); 
}); 
//$('.dataTable').wrap('<div class="dataTables_scroll" />'); 

}

在的Index.html我已經包括

<script src="./cordova.js"></script> 
    <script src="./js/vendor/jquery-1.10.0.min.js"></script> 
    <script src="./js/vendor/jquery.mobile-1.3.1.min.js"></script> 
    <script src="./js/vendor/underscore.js"></script> 
    <script src="./js/vendor/less.min.js"></script> 
    <script src="./js/vendor/Bootdatepicker.js"></script> 
    <script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script> 
    <script src="./js/events.js"></script> 
    <script src="./js/util.js"></script> 
    <script src="./js/template.js"></script> 
    <script src="./js/function.js"></script> 

我用數據表js和css從這個網站datatables site

這是屏幕截圖我第號

但拖動屏幕後，標題部分自動調整。

即使在圖片中的默認搜索字段也不起作用。請幫助我，因爲它是項目的一部分。

Answer 1

我可以reproduce your code但不能複製行爲。我會用<th></th>代替<thead>而不是<td>。

但是，我很確定columns.adjust()將解決您的問題。畢竟，無論如何都是在拖動屏幕後發生的。

var table = $(id).dataTable({ 
    "scrollY": "200px", 
    "scrollCollapse": true, 
    "paging": false, 
    "bFilter": true 
}).DataTable().columns.adjust();