Sort column with checkboxes. Does not work. I am stuck

Question

I would like the Signed button in this JSfiddle to sort the checkbox column as if it's really great.

http://jsfiddle.net/littlesandra88/DSRmg/

I noticed that tinySort , the library used to sort tables, cannot sort a column using only checkboxes, so I added   (or X in JSfiddle for visibility) for those <td> that have a checkbox, and it can sort the column.

Problem

The problem is that when you click the "Save" button, in this case you should add   or X, so when you click the Signature button, the column is sorted correctly.

This post found out how to add & remove   or X.

It seems to me that jQuery cannot find <label> because it is inside <td> .

How to reproduce the problem

Try undoing one of the checkboxes and click Signature. Now the checkbox column is no longer sorted.

Question

How do I get Save buttons to add   so that you can sort the column?

Update

In this, I followed Rakesh's answer on tablesort. But I still can't get it to work.

Answer 1

I suggest you use the tablesorter plugin, which gives you the opportunity to have your own parser logic for sorting.

Take a look at the code - http://jsfiddle.net/srakesh/DSRmg/8/

HTML:

 <td class="checkbox"> <input name="signed" type="checkbox" checked ><span class="hidden">1</span> </td> 

JavaScript:

 $(document).ready(function() { $("#myTable").tablesorter(); $('#myTable input:checkbox').click(function() { var order = this.checked ? '1' : '0'; $(this).next().html(order); $(this).parents("table").trigger("update"); }) }); 

Answer 2

missing colon:

 $('#myTable input:checkbox').click(function() { var order = this.checked ? '1' : '0'; $(this).next().html(order); $(this).parents("table").trigger("update"); }); //try putting a semicolon here