Change column labels (not column name) programmatically

fendyaritonang

Hello everyone,

I managed to change the column label (including the sorting) using the following code

var idx = 6
instance.$table.fnSettings().aoColumns[idx].nTh.innerHTML = '[New Label] <span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s"></span>';

The above code will change the label of column at position 6.

However this code doesn't change the column label at the "Show / Hide" column tool.

Is there any way that I can change the label at "Show / Hide" tool as well, or maybe there's already a native function that can change the column label

Thank you.

allan

I would suggest never using the fnSettings method - it provides access to the private data store that DataTables uses.

The API method you want is column().header() to access the node for the column header. You can then write to its innerHTML to use jQuery as appropriate.

Allan

jwdyvig

I've used column().header() to update the header text, but the corresponding ColVis label does not pick up this update. How can I update the ColVis label?

allan

The rebuild function I think should do it.

Allan

jwdyvig

The rebuild function isn't grabbing the updated html/text from the header. Here's a fiddle example: http://jsfiddle.net/9w4umtwq/2/

allan

Ah yes, you are right. This line (and the next) would need to be changed to be $( columns[ a.__columnIdx ].nTh ).text();.

The replacement for ColVis that I've been working on, and will release in a couple of weeks, does exactly that.

Allan