dataTable在過濾數據時阻止列大小調整

Question

我有一個dataTable，我在初始化表后動態過濾。 我有一個JS函數，需要1個arg，這是用作過濾器的字符串。 我正在使用...在桌子上設置過濾器

oTable = fnFilter(strFilter);

這工作正常，但在過濾表后，列似乎重新調整大小。 我已經將bAutoWidth設置為false，所以我不確定我還能應用什么來防止列調整大小。 我希望無論存在什么數據，我在th標簽中定義的尺寸都會保留。

Answer 1

bAutoWidth只是一個標志，指示dataTables是否應自動計算寬度。 將其設置為false是一項優化功能，請參閱文檔 ：

啟用或禁用自動列寬計算。 如果使用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/，證明上述fnFilter 在調用fnFilter 之后也正在工作。

Answer 2

引用sScrollX和sWidth的答案是使用遺留DataTables API。 從v 1.10+開始，語法為：

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

參考：

• scrollx
• 列