jQuery dataTables 标题最初不调整为列值，而是在拖动屏幕后调整

Question

我正在开发一个响应式网页，我在其中使用函数从服务器端响应动态生成数据表。

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

在Index.html中，我包含了如下的js库

<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>

我使用了 official datatables 中的数据表 js 和 css网站

这是我的页面显示方式的屏幕截图

有趣的是，如果我拖动或调整屏幕，标题部分会自动调整。

图片中的默认搜索字段也不起作用。

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