Jquery tablesorter and check box in table header

Question

I have a table with the “Select All” checkbox as the first column of the heading and some simple code to select all the checkboxes on the page when I click on the heading heading.

$('#CheckAll').bind('click',function() { var checked = $(this).attr('checked'); $('input').attr('checked', checked); }); 

the code works fine, but as soon as I bind tablesorter to the table, the click event on #CheckAll no longer fires:

 $('#ResultsTable').tablesorter( headers: { 0: { sorter: false} }); 

Any ideas?

Answer 1

It is possible that tablesorter destroys / recreates the original Dom element. You can either AFTER your call to tablesorter, or you can try living instead of bind:

 $('#CheckAll').live('click',function() { var checked = $(this).attr('checked'); $('input').attr('checked', checked); }); 

Answer 2

You almost got it! Try the following:

  $("#tablesorter").tablesorter({headers:{0:{sorter:false}}});