Jquery Tablesorter – 按元素的列排序
我有这样一张桌子：
| Update | Name | Code | modification date | | | name1 | code1 | 2009-12-09 | | | name2 | otehercode | 2007-09-30 | 更新列包含复选框 。
复选框初始状态在呈现表之前确定，但是在从数据库获取行之后（它基于条件集，在服务器端）。
默认情况下可以选中该复选框，默认情况下取消选中或禁用（ disabled='disabled'作为input属性）。
我正在使用JQuery的Tablesorter对表格进行排序。 我希望能够按包含复选框的列进行排序。 怎么可能（我可以将一些额外的属性传递给我的input元素，如果它有帮助……）？
我应该编写自己的解析器来处理吗？
在输入之前添加隐藏的跨度，并在其中包含一些文本（将用于对列进行排序）。 就像是：
1
如果需要，您可以将一个事件附加到复选框，以便在选中/取消选中时修改前一个兄弟（跨度）的内容：
$(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");}); });
您可以使用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" });
我正在添加此响应，因为我正在使用具有新function的受支持/分叉jQuery TableSorter库。 包含用于输入/选择字段的可选解析器库。
http://mottie.github.io/tablesorter/docs/
这是一个例子： http ：//mottie.github.io/tablesorter/docs/example-widget-grouping.html它是通过包含输入/选择解析器库“parser-input-select.js”完成的，添加了一个头对象并声明列和解析类型。
headers: { 0: { sorter: 'checkbox' }, 3: { sorter: 'select' }, 6: { sorter: 'inputs' } }
其他解析器包括：日期解析（带糖和DateJS），ISO8601日期，月份，2位数年份，工作日，距离（英尺/英寸和公制）和标题格式（删除“A”和“The”）。
您可以向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}});
只需最后一步即可完成Aaron的答案并避免堆栈溢出错误。 因此，除了使用上面描述的$.tablesorter.parser()function外，我还必须在页面中添加以下内容，以使其在运行时使用更新的复选框值。
var checkboxCahnged = 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'); } });
YOUR DATA BASE VALUE
我在其他答案中尝试了多种方法，但最终使用了salgiza的接受答案，以及马丁关于更新表格模型的评论。 但是，当我第一次实现它时，我在更改触发器的复选框内设置更新行，就像建议的措辞一样。 这会在检查/取消选中复选框时重新排列我的行，我发现这非常令人困惑。 这些线条在点击时跳开了。 因此，我将更新function绑定到实际的复选框列标题，以便在单击以更新排序时仅重新排列行。 它就像我想要的那样工作：
// checkbox-sorter is the assigned id of the th element of the checbox column $("#checkbox-sorter").click(function(){ $(this).parents("table").trigger("update"); });