数据表阻止在筛选数据时调整列大小

dataTable prevent column resizing when filtering data

本文关键字：调整 数据 筛选 数据表      更新时间：2023-09-26

我有一个dataTable，一旦表初始化，我就会动态过滤它。 我有一个 JS 函数，它需要 1 个参数，这是要用作过滤器的字符串。 我正在使用表格设置过滤器...

oTable = fnFilter(strFilter);

这工作正常，但在过滤表后，列似乎会自行调整大小。我已经将 bAutoWidth 设置为 false，所以我不确定我还能应用什么来阻止列调整大小。 我希望无论存在什么数据，我在 th 标签中定义的大小都能保留。

bAutoWidth只是一个标志，指示dataTables是否应该自动计算宽度。将其设置为 false 是一项优化功能，请参阅文档：

启用或禁用自动列宽计算。这可以是 禁用作为优化（计算 widths），如果使用 aoColumns 传入表宽度。

但是浏览器仍然会根据其内容扩展/缩小<td>。这就是表的工作方式。要实现您想要的，诀窍是使用这样的sScrollX和aoColumns：

var dataTable = $('#example').dataTable({
  sScrollX: "100%",
  aoColumns: [ 
    { "sWidth": "50px" },
    { "sWidth": "50px" },
    { "sWidth": "50px" },
    { "sWidth": "50px" },
    { "sWidth": "50px" }
  ]
});

这给出了一个宽度为 250px 的表格，每列 50px - 无论内容如何。 sScrollX强制 dataTable 保持表和列的宽度。

看到这个小提琴 -> http://jsfiddle.net/MW8Ku/证明上面的apporach在调用fnFilter后也在工作。

关于sScrollX和sWidth的答案是使用传统的DataTables API。 从 v 1.10+ 开始，语法为：

$('#example').dataTable( {
  "scrollX": true,
  "columns": [
    { "width": "50px" },
    { "width": "50px" },
    { "width": "50px" },
    { "width": "50px" },
    { "width": "50px" }
  ]
});

裁判：

  • 滚动条X
  • 列
相关文章：