How to change the thead's html of the dataTables

Question

I need to add two <span> (clear and check all) to the thead cell(except the frist one).

I add this to fnDrawCallback

$("#authManageUserListTable thead tr th").each(function(){
     console.log($(this).html());
     $(this).html(".....");//change something here, but it does not help
}); 

I use the same method to the tbody and it does work. I look at the html dom and I found th within #authManageUserListTable does not have any text(html), instead, it has aria-label .

How should I add two button to the thead which can manipulate all the data at that column

Answer 1

Very hard to tell what you're trying to do from the explanation..

Something like https://jsfiddle.net/yo68wrgb/ maybe?

$(function() {
   $( "th:nth-child(2)" ).append( "<span><input type='checkbox'></input> Check all</span>" ); 
});

Answer 2

You can just add it directly as below:

<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Column 1</th>
                <th><span><input type="button" value="Clear"></span><span><input type='checkbox'></input> Check all</span> Column 2</th>
                <th><span><input type="button" value="Clear"></span><span><input type='checkbox'></input> Check all</span> Column 3</th>                </tr>

        </thead>

       //....Table body

       <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Salary</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>E-mail</th>
            </tr>
        </tfoot>
</table>