Dynamically change datatables column width via API

Question

I know we can set the columns width on a datatable via the columns.width option. But now I want to change that option on the xhr event.

Based on the ajax response I get from the server I want to hide/show a column and adjust the other columns width accordingly (they are all fixed size). Is there any way to achieve that via API?

I looked around all docs but seems it's not possible to achieve.

Answer 1

You cannot change settings once the dataTable is initalised. But if you are using column.width and you have turned autoWidth off, then the width of each column is easy to change. Here is an example :

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');
})

demo -> http://jsfiddle.net/cc7x6h64/

It works because column.width is injected into each <th> as style="width: xxx;"