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.

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.

• javascript
• jquery
• datatables

• Are you loading Datatable after ajax response or It's already loaded and you want to hide/show a column and change the width size of others after ajax response ? – Basanta Matia Commented Jun 8, 2017 at 6:05
• I'm doing that on xhr event of datatables itself. basically I want to do my changes after all my data retrieval from the server. – AlfaTeK Commented Jun 8, 2017 at 12:14
• I think it's pretty easy. U can check by if else condition. If foo then show/hide bar and change the width of other columns. – Basanta Matia Commented Jun 8, 2017 at 12:17

1 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./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/cc7x6h64/

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