我有一个通过 ajax 由 json 数据填充的数据表。我将 autoWidth 属性设置为 false。我要做的是根据返回的内容将某些列设置为具有宽度。
在分页期间发生的情况是表格正在被重绘或我进入的每一页都发生了什么。这会导致列在不同位置反弹和/或改变该列的宽度。我似乎找不到我需要做的事情。
我正在寻找的是，一旦表格第一次加载数据，每列 min-width 设置为该行中返回的最大数据内容。我希望我解释正确。我最终想要的是第一次加载数据后不调整宽度的列。所以不是分页或列的排序。
我唯一尝试的是 table.columns.adjust().draw();但我输入了 drawCallback 函数，因为我不知道还能在哪里做。这似乎对我没有任何作用。
我已经在谷歌上搜索了足够长的时间，希望有人至少可以为我指出正确的方向或提供一点帮助。
【问题讨论】：
标签： javascript datatables
我想不出使用 DataTables 本身的好方法，因为必须在初始化时声明列宽。
但是，在加载完所有内容后，您可以使用 vanilla JavaScript 和 CSS 执行类似的操作：
// get the table headers into an array
let tableHeaders = document.querySelectorAll("#YOUR-TABLE-ID thead th");
tableHeaders.forEach((element) => {
// get the computed width for the column
const computedWidth = window.getComputedStyle(element).getPropertyValue("width");
// set CSS min-width on element
element.style.minWidth = computedWidth;
});
宽度将自动应用于与具有宽度样式的 <th> 元素相同的列中的所有 <td> 元素。
还要注意，DataTables 会为每个 <th> 元素分配一个 width 样式属性。
【讨论】：
computedWidth var 在浏览器呈现时获取每列的宽度，然后将其设置为min-width。您是否试图防止列缠绕成两行或类似的东西？我不确定我是否理解您在此处尝试执行的操作。