JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script>
<table class="alerts tablesorter" id="myTable" cellspacing="0" border="1">
<thead>
<tr class="header">
<th class="activity-header"> N </th>
<th class="activity-header"> Signed </th>
<th class="activity-header"></th>
</tr>
</thead>
<tbody>
<form action="" method="post">
<input name="anchor" value="2548" type="hidden">
<tr>
<td class="activity-data">2548</td>
<td class="checkbox"> <input name="signed" type="checkbox" checked > <span class="hidden">1</span> </td>
<td class="edit-column"> <input value="Save" type="submit"></td>
</tr>
</form>
<form action="" method="post">
<input name="anchor" value="7249" type="hidden">
<tr>
<td class="activity-data">7249</td>
<td class="checkbox"> <input name="signed" type="checkbox" > <span class="hidden">0</span> </td>
<td class="edit-column"> <input value="Save" type="submit"></td>
</tr>
</form>
<form action="" method="post">
<input name="anchor" value="49914" type="hidden">
<tr>
<td class="activity-data">4991</td>
<td class="checkbox"> <input name="signed" type="checkbox" checked > <span class="hidden">1</span> </td>
<td class="edit-column"> <input value="Save" type="submit"></td>
</tr>
</form>
</tbody>
</table>
JavaScript
$(document).ready(function() {
$("#myTable").tablesorter();
$('#myTable input').click(function() {
var order = this.checked ? '1' : '0';
$(this).next().html(order);
$(this).parents("table").trigger("update");
});
});
$.tablesorter.addParser({
id: 'input',
is: function(s) {
return s.toLowerCase().match(/<input[^>]*checkbox[^>]*/i);
},
format: function(s) {
var integer = 0;
if (s.toLowerCase().match(/<input[^>]*checked*/i)) {
integer = 1;
}
return integer;
},
type: "numeric"
});
$('form').live('submit', function() {
$.post($(this).attr('action'), $(this).serialize(), function(response) {
// do something here on success
}, 'json');
return false;
});