Close button in header

Natty77

I need to add a close button or link in each column header which when clicked will hide that column. I searched the forum of DataTables and SO but did not find proper example to do it.
In one of the forum it was mentioned to use sDom I tried following variation but none succeeded
1) "sDom":'<"H"lfr>t<"F"<"#testbutton">ip>'
2) "sDom": 'R<"#buttonPlaceholder">H<"clear"><"ui-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>t<"ui-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ip>'

Can some one point me to proper example or tutorial for it?

Thanks in advance

colin

Hi @Natty ,

The dom wouldn't do, as that just changes the position of the various elements. You need either a column().header(), or something like this example . The example creates input cells in each header, it would be straightforward to change that to add a button.

Hope that helps,

Cheers,

Colin

Natty77

Thanks @colin there are few difference between the example you have provided any my actual use case. In my case I will be be dynamically creating the header and data. Then I need a button / link which will close/hide that column.

I was able to add an extra table header row to my table using "$(table.table().header()).html(headers1 + headers2);" where headers1 and headers2 contain the html code for the whole row. After adding this when I click the button I see a new header and an error message saying "cannot read property 'swidth' of undefined"