How can I sort columns having input elements?
Add a hidden span just before the input, and include in it some text (that will be used to sort the column). Something like:
<td>
<span class="hidden">1</span>
<input type="checkbox" name="x" value="y">
</td>
If needed, you can attach an event to the checkbox so that it modifies the content of the previous sibling (the span) when checked/unchecked:
$(document).ready(function() {
$('#tableid input').click(function() {
var order = this.checked ? '1' : '0';
$(this).prev().html(order);
})
})
Note: I haven't checked the code, so it might have errors.
This is the more complete/correct version of Haart's answer.
$(document).ready(function() {
$.tablesorter.addParser({
id: "input",
is: function(s) {
return false;
},
format: function(s, t, node) {
return $(node).children("input[type=checkbox]").is(':checked') ? 1 : 0;
},
type: "numeric"
});
sorter = $("#table").tablesorter({"headers":{"0":{"sorter":"input"}}});
// The next makes it respond to changes in checkbox values
sorter.bind("sortStart", function(sorter){$("#table").trigger("update");});
});
I'm adding this response because I'm using a supported/forked jQuery TableSorter library with new features. An optional parser library for input/select fields is included.
http://mottie.github.io/tablesorter/docs/
Here's an example: http://mottie.github.io/tablesorter/docs/example-widget-grouping.html and it's done by including the input/select parser library "parser-input-select.js", adding a headers object and declaring the columns and parsing type.
headers: {
0: { sorter: 'checkbox' },
3: { sorter: 'select' },
6: { sorter: 'inputs' }
}
Additional parsers included are: date parsing (w/Sugar & DateJS), ISO8601 dates, months, 2 digit years, weekdays, distance (feet/inches & metric) and title format (removes "A" & "The").