通过 API 动态更改数据表的列宽

【问题标题】：Dynamically change datatables column width via API通过 API 动态更改数据表的列宽
【发布时间】：2017-06-08 02:10:44
【问题描述】：

我知道我们可以通过columns.width 选项在数据表上设置列宽。但现在我想在 xhr 事件上更改该选项。

根据我从服务器获得的 ajax 响应，我想隐藏/显示一列并相应地调整其他列的宽度（它们都是固定大小）。有什么方法可以通过 API 实现吗？

我查看了所有文档，但似乎无法实现。

【问题讨论】：

您是在 ajax 响应后加载 Datatable 还是它已经加载并且您想在 ajax 响应后隐藏/显示一列并更改其他列的宽度大小？
我在数据表本身的 xhr 事件中这样做。基本上我想在从服务器检索所有数据后进行更改。
我认为这很容易。你可以通过 if else 条件检查。如果 foo 然后显示/隐藏栏并更改其他列的宽度。

标签： javascript jquery datatables

【解决方案1】：

一旦数据表初始化，您将无法更改设置。但是如果你正在使用column.width并且你已经关闭了autoWidth，那么每列的宽度很容易改变。这是一个例子：

var table = $('#example').DataTable({
   autoWidth: false,
   ajax: {
     url: 'https://api.myjson.com/bins/avxod'
   },
   columns: [
     { data: 'name', width: 50 },
     { data: 'position', width: 50 },
     { data: 'salary', width: 50 },
     { data: 'office',  width: 50}
  ]    
})  

$('#example').on('xhr.dt', function() {
  $('#example thead th:eq(1)').width('400');
})

演示 -> http://jsfiddle.net/cc7x6h64/

之所以有效，是因为 column.width 被注入到每个 <th> 作为 style="width: xxx;"

【讨论】：