jQuery DataTables滚动条与列搜索功能异常问题求助

我太懂你遇到的这个坑了——开了横向滚动后，自定义的表头搜索框一排序就消失，搜索功能还完全没用。这其实是DataTables在scrollX模式下的典型问题，我来帮你把它搞定。

修复后的完整代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="example" class="display nowrap" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>First name</th>
      <th>Last name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
      <th>Extn.</th>
      <th>E-mail</th>
    </tr>
  </thead>
  <tbody>
    <!-- 你的表格数据 -->
  </tbody>
</table>

<script>
$(document).ready(function() {
  var table = $('#example').DataTable({
    "scrollX": true,
    // 核心：等表格完全初始化好再处理表头
    "initComplete": function() {
      var api = this.api();
      
      // 操作用户实际能看到的克隆表头
      api.table().header().querySelectorAll('th').forEach(function(th) {
        var title = $(th).text();
        $(th).html('<input type="text" placeholder="' + title + '" />');
      });
      
      // 绑定搜索事件到正确的输入框
      api.columns().every(function() {
        var that = this;
        $('input', this.header()).on('keyup change', function() {
          if (that.search() !== this.value) {
            that
              .search(this.value)
              .draw();
          }
        });
      });
    }
  });
});
</script>

为啥之前会出问题？ #

当你开启scrollX: true时，DataTables会偷偷创建一个克隆的表头，把原始的<thead>藏起来——这么做是为了让表头在横向滚动时固定住。你之前的代码直接改了原始表头的<th>，但用户实际点的、看的都是克隆后的表头：

• 排序时DataTables只会更新克隆表头的状态，不会同步你加的输入框，所以看起来表头“消失”了；
• 搜索事件绑在了原始表头的输入框上，而用户输入的是克隆表头的输入框，自然没反应。

关键修改点 #

• 用initComplete回调：等表格彻底初始化（包括克隆表头生成）后再改表头，确保操作的是用户能看到的那个；
• 通过API拿表头：用api.table().header()获取正确的表头元素，别直接选原始的#example thead th；
• 事件绑定对应正确元素：用this.header()拿到当前列的表头输入框，绑定事件才会生效。

这么改完之后，横向滚动、表头搜索、排序功能就能正常配合工作，再也不会出现表头消失的情况了。

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