Increase width of each datatable header by 20 px - datatable

Question

I have requirement to show icon in each datatable header.now problem is icon and text are not showing in same line because of column width.what i want to increase each header cell by 50px.
Below is my code to show icon and increase width.
"fnHeaderCallback": function( nHead, aData, iStart, iEnd, aiDisplay ) {
$.each($('.table tr th'),function(key,val){
var title=nHead.getElementsByTagName('th')[key].innerHTML;
var new_width=parseInt($(nHead.getElementsByTagName('th')[key]).attr('style').split(":")[1].split("px")[0])+50 +"px"
$(nHead.getElementsByTagName('th')[key]).attr('style','width:'+new_width)
nHead.getElementsByTagName('th')[key].innerHTML = "<i class='fa fa-cube'></i>"+title;
})
}
Note : I am using dataTables 1.9.4

Answer 1

fnHeaderCallback() is not the right callback to use here, since it is called on each and every redraw. It is called when the user sorts, change page and so on. You should use fnInitComplete() instead.
The reason for the header titles becoming multiline is mostly caused by the browser defaults and the CSS settings (or lack of same). Add this CSS :
.dataTable th {
white-space: nowrap;
}
and add the icons in the fnInitComplete() callback :
var table = $('#example').dataTable({
fnInitComplete: function() {
$("#example th").each(function() {
var $th = $(this);
$th.html("<i class='fa fa-cube'></i>"+$th.text());
})
}
});
demo -> http://jsfiddle.net/2hLn31gp/
There should be no reason at all for manipulating the width of the headers programmatically. The widths is either
User defined widths, i.e aoColumns :[ { sWidth: "10%" }] etc
Calculated widths, where dataTables calculate the minimum width required by each column to show its content based on the table width as 100%. An attempt to increase width programmatically as above (by adding 50px to each) will increase the width to 100%+(50px*columnCount) - that is not what you want.
A combination of 1 and 2.
If you need to recalculate the width of the columns, simply recalculate them by using fnAdjustColumnSizing() :
table.fnAdjustColumnSizing();
or force the widths "manually" :
aoColumns: [
{ sWidth: "100px" },
{ sWidth: "50px" },
{ sWidth: "250px" }
]