jQuery DataTables列搜索框未显示 重复显示表头问题

列搜索框渲染异常、重复显示表头标题，核心是配置冲突和执行时机问题：

• 开启orderCellsTop: true但未手动预留表头双行结构时，DataTables会自动克隆顶部表头文本填充下方行，直接覆盖后续插入的输入框节点
• 开启scroller虚拟滚动特性后，插件会强制固定表头、自动克隆表头DOM做滚动同步，若将搜索框插入footer而非表头预留行，scroller的DOM重绘逻辑会直接把对应位置内容替换为表头副本
• 若搜索框插入逻辑写在DataTables初始化完成回调外，执行时插件还未完成DOM渲染，插入的节点会被后续的表头、表体重绘流程直接冲掉

1. 手动给表格thead预留双行结构 #

不要依赖DataTables自动生成表头，直接在HTML的table标签内写死两层tr，避免自动克隆表头的问题：

<table id="detailTable" class="display" style="width:100%">
  <thead>
    <tr>
      <!-- 14个列表头和columns配置一一对应 -->
      <th>LOT_LOCATION</th>
      <th>Zone Attribute</th>
      <th>LOTID</th>
      <th>Design_ID</th>
      <th>Board_ID1</th>
      <th>QA_WORK_REQUEST_NO</th>
      <th>QA_CONTACT_NAME</th>
      <th>QA_PROCESS_NAME</th>
      <th>CURRENT_QTY</th>
      <th>Date</th>
      <th>Temperature</th>
      <th>Humidity</th>
      <th>Voltage</th>
      <th>Current</th>
    </tr>
    <tr>
      <!-- 14个空th预留放搜索框，不要填任何内容 -->
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

2. 调整初始化逻辑，将搜索框渲染放到initComplete回调 #

不要往footer插入搜索框，直接渲染到表头第二行的空th中，避开scroller的重绘逻辑：

const table = $('#detailTable').DataTable({
  // 原有ajax、scrollCollapse、deferRender、scroller、分页长度、默认排序配置全部保留
  orderCellsTop: true, // 该配置保留，排序事件会自动绑定到顶部第一行th，不影响第二行搜索框
  columnDefs: [
    // 原有第2列链接渲染、第9列moment日期格式化、10/11列单位追加配置全部保留
  ],
  rowCallback: function(row, data) {
    // 原有过期日期行背景色标记逻辑全部保留
  },
  initComplete: function() {
    // 等表格DOM完全渲染完成后再遍历列插入搜索框
    this.api().columns().every(function() {
      const column = this;
      const searchInput = $(`<input type="text" placeholder="Search" style="width:100%">`)
        .on('keyup change clear', function() {
          if (column.search() !== this.value) {
            column.search(this.value).draw();
          }
        });
      // 定位到当前列对应第二行的空th，插入输入框
      $(column.header()).parent().next().children().eq(column.index()).append(searchInput);
    });
  }
});

3. 补充样式避免输入框被默认样式隐藏 #

添加以下CSS，解决滚动容器下输入框被裁切、布局错位的问题：

#detailTable thead tr:nth-child(2) input {
  box-sizing: border-box;
  padding: 3px;
  margin: 2px 0;
}
.dataTables_scrollHead thead th {
  overflow: visible !important;
}

如果调整后仍有异常，按顺序检查：

• 确认开启scroller时没有同时开启fixedHeader，两个特性共用会触发重复DOM克隆
• 检查testing_getdetaildata.php返回的JSON字段数和columns配置完全匹配，14个字段不要多传、少传
• 浏览器F12查看第二行th的DOM结构，如果输入框节点存在但不可见，调高上述CSS中overflow:visible的优先级即可
• 不要在DataTables初始化代码外单独写table.columns().every()的搜索框逻辑，全部挪到initComplete回调内，避免执行时机过早

你之前在其他页面能正常运行的搜索框代码，大概率是没有开启scroller虚拟滚动的场景：scroller默认只会同步thead区域的DOM，不会处理tfoot内容，所以插在footer的输入框会被重绘逻辑覆盖。

内容的提问来源于stack exchange，提问作者GQS