DataTables 自動動態列寬

Question

我有一個數據表，通過 ajax 填充了 json 數據。 我將 autoWidth 屬性設置為 false。 我要做的是根據返回的內容將某些列設置為具有寬度。

在分頁期間發生的情況是表格正在重繪或我 go 到的每一頁。 這會導致列在不同位置反彈和/或改變該列的寬度。 我似乎找不到我需要做的事情。

我正在尋找的是一旦表中第一次加載數據，每列 min-width 設置為該行中返回的最大數據內容。 我希望我解釋正確。 我最終想要的是第一次加載數據后不調整寬度的列。 所以不要對列進行分頁或排序。

我唯一嘗試的是 table.columns.adjust().draw(); 但我輸入了drawCallback function，因為我不知道還能在哪里做。 這似乎對我沒有任何幫助。

我已經用谷歌搜索了足夠長的時間，並希望有人至少可以為我指出正確的方向或提供一點幫助。

Answer 1

我想不出使用 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;
    });

寬度將自動應用於與具有寬度 styles 的<th>元素相同的列中的所有<td>元素。

另請注意，DataTables 為每個<th>元素分配一個width樣式屬性。