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

Question

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

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

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

Answer 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被注入(inject)每个 <th>作为style="width: xxx;"