数据表单个列搜索与滚动不兼容答案

【问题标题】：Datatables Individual Column Search incompatible with scroll数据表单个列搜索与滚动不兼容
【发布时间】：2023-04-03 22:38:01
【问题描述】：

我正在使用Datatables 来显示一千多个表格行。我使用individual column search 搜索特定列。我用以下方式初始化表：

var table = $('#example').DataTable( {
        "scrollX": true,
        "scrollY": "400px",
        "paging": false
    });

但是，当我搜索一列时，左第二列被第一列（固定）溢出。（请看下图。）

我怀疑这是因为在每次搜索后重新分配了列的宽度：第一列过去也包含较长的用户名，但在搜索之后，它的宽度变小了。

我尝试为第一列设置右边距，但没有帮助。

有什么办法解决这个问题吗？

请找到一个演示问题的 jsfiddle here。您应该搜索“J”的职业。

【问题讨论】：

【解决方案1】：

数据表支持已经知道这个问题有一段时间了。（见thread）这个问题已经用this changeset修复了，据说是由于：

当启用滚动并切换列可见性时，Javascript 列宽计算方法克隆会出现错误错误的标题元素。

Datatables 的latest nightly release 已经修复了这个问题，但是修复是两行，也可以很容易地添加到当前版本中。

请注意，此问题也影响了 ColVis、单个列搜索和固定列。

【讨论】：

【解决方案2】：

Datatables 在 Ajax 渲染后重新计算列宽，所以我认为这是正常行为，但对于您的情况，您可以通过消除来防止溢出

new $.fn.dataTable.FixedColumns( table );

【讨论】：