我有一张这样的桌子：
| Update | Name | Code | modification date |
| | name1 | code1 | 2009-12-09 |
| | name2 | otehercode | 2007-09-30 |
更新列包含复选框的位置<input type='checkbox' />。
复选框初始状态在呈现表之前确定，但在从数据库中获取行之后（它基于一组条件，在服务器端）。
该复选框可以默认选中，默认不选中或禁用（disabled='disabled'作为input属性）。
我正在使用jQuery 的 Tablesorter对我的表格进行排序。而且我希望能够按包含复选框的列进行排序。input这怎么可能（如果有帮助的话，我可能会向我的元素传递一些额外的属性......）？
我应该编写自己的解析器来处理吗？
在输入之前添加一个隐藏跨度，并在其中包含一些文本（将用于对列进行排序）。就像是：
<td>
<span class="hidden">1</span>
<input type="checkbox" name="x" value="y">
</td>
如果需要，您可以将事件附加到复选框，以便在选中/取消选中时修改前一个兄弟（跨度）的内容：
$(document).ready(function() {
$('#tableid input').click(function() {
var order = this.checked ? '1' : '0';
$(this).prev().html(order);
})
})
注意：我没有检查代码，所以它可能有错误。
这是 Haart 答案的更完整/正确的版本。
$(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");});
});
我正在添加此响应，因为我正在使用具有新功能的受支持/分叉的 jQuery TableSorter 库。包括用于输入/选择字段的可选解析器库。
http://mottie.github.io/tablesorter/docs/
这是一个示例： http : //mottie.github.io/tablesorter/docs/example-widget-grouping.html 它是通过包含输入/选择解析器库“parser-input-select.js”来完成的，添加一个 headers 对象并声明列和解析类型。
headers: {
0: { sorter: 'checkbox' },
3: { sorter: 'select' },
6: { sorter: 'inputs' }
}
其他解析器包括：日期解析（w/Sugar 和 DateJS）、ISO8601 日期、月份、2 位数年份、工作日、距离（英尺/英寸和公制）和标题格式（删除“A”和“The”）。
您可以使用 tablesorter jQuery 插件并添加一个能够对所有复选框列进行排序的自定义解析器：
$.tablesorter.addParser({
id: 'checkbox',
is: function (s, table, cell) {
return $(cell).find('input[type=checkbox]').length > 0;
},
format: function (s, table, cell) {
return $(cell).find('input:checked').length > 0 ? 0 : 1;
},
type: "numeric"
});
您可以向 TableSorter 添加自定义解析器，如下所示：
$.tablesorter.addParser({
// set a unique id
id: 'input',
is: function(s) {
// return false so this parser is not auto detected
return false;
},
format: function(s) {
// Here we write custom function for processing our custum column type
return $("input",$(s)).val() ? 1 : 0;
},
// set type, either numeric or text
type: 'numeric'
});
然后在你的桌子上使用它
$("table").tablesorter(headers:{0:{sorter:input}});
我在其他答案中尝试了多种方法，但最终使用了 salgiza 接受的答案，以及 martin 关于更新表模型的评论。但是，当我第一次实现它时，我在复选框 onchange 触发器中设置了更新行，就像建议的措辞一样。这重新排列了我选中/取消选中复选框的行，我发现这很混乱。线条只是在点击时跳开。因此，我将更新功能绑定到实际的复选框列标题，这样只有在单击更新排序时才会重新排列行。它就像我想要的那样工作：
// checkbox-sorter is the assigned id of the th element of the checbox column
$("#checkbox-sorter").click(function(){
$(this).parents("table").trigger("update");
});
只需最后一步即可使 Aaron 的答案完整并避免堆栈溢出错误。因此，除了使用上述$.tablesorter.parser()功能外，我还必须在我的页面中添加以下内容，以使其在运行时使用更新的复选框值。
var checkboxChanged = false;
$('input[type="checkbox"]').change(function(){
checkboxChanged = true;
});
// sorterOptions is a variables that uses the parser and disables
// sorting when needed
$('#myTable').tablesorter(sorterOptions);
// assign the sortStart event
$('#myTable')..bind("sortStart",function() {
if (checkboxChanged) {
checkboxChanged = false;
// force an update event for the table
// so the sorter works with the updated check box values
$('#myTable')..trigger('update');
}
});
<td align="center">
<p class="checkBoxSorting">YOUR DATA BASE VALUE</p>
<input type="checkbox" value="YOUR DATA BASE VALUE"/>
</td>//javascript
$(document).ready(function() {
$(".checkBoxSorting").hide();
});