我正在写一段代码让用户创建和维护联系人列表。联系人列在表格中,第一个单元格是一个复选框,如果此联系人已在此联系人列表中,则会选中该复选框。
我正在使用tablesorterpager插件,因此用户可以轻松浏览联系人列表;我有一个自定义解析器用于复选框字段,它将根据是否选中复选框对联系人进行排序。
我的问题是我不能同时使这两个工作。
相关代码如下:
$(function() {
$('#userTable')
.tablesorter({
headers: {
0: {
sorter: 'checkbox'
}
}
})
.tablesorterPager({container: $("#pager")});
});
如果我注释掉.tablesorter调用或.tablesorterPager调用,那么另一个工作正常。如果我让他们都没有注释,那么只有第二个调用实际上有效 - 似乎我可以有分页或自定义解析器,但不是两者。我已经交换了两个电话,它一直是第二个电话 - 第一个消失了。
我认为我错过了一些明显的东西,但我找不到什么。这两个电话本身都很好,因为它们在另一个被注释掉时起作用,但它们不能一起工作。
我正在使用tablesorter 2.1.19(from here);和jquery 1.7.1
答案 0 :(得分:7)
当您使用该解析器时,它使用“updateCell”方法来更改单元格内容,但由于该方法使用rowIndex和cellIndex确定单元格位置,因此当寻呼机处于活动状态时,它可能无法获得准确的信息。因此,最简单的解决方案是将寻呼机removeRows
选项设置为false
。
这是a demo
// add parser through the tablesorter addParser method
$.tablesorter.addParser({
id: 'checkbox',
is: function(s) {
return false;
},
format: function(s, table, cell, cellIndex) {
var $c = $(cell);
// return 1 for true, 2 for false, so true sorts before false
if (!$c.hasClass('updateCheckbox')) {
$c.addClass('updateCheckbox').bind('change', function() {
// resort the table after the checkbox status has changed
var resort = false;
$(table).trigger('updateCell', [cell, resort]);
});
}
return ($c.find('input[type=checkbox]')[0].checked) ? 1 : 2;
},
type: 'numeric'
});
$(function() {
$('table')
.tablesorter({
widgets: ['zebra'],
headers: {
0: { sorter: 'checkbox' }
}
})
.tablesorterPager({
// target the pager markup - see the HTML block below
container: $(".pager"),
// remove rows from the table to speed up the sort of large tables.
// setting this to false, only hides the non-visible rows; needed
// if you plan to add/remove rows with the pager enabled.
removeRows: false
});
});