jquery - tablesorterpager和自定义解析器不能一起工作

时间:2012-04-27 21:07:27

标签: jquery tablesorter

我正在写一段代码让用户创建和维护联系人列表。联系人列在表格中,第一个单元格是一个复选框,如果此联系人已在此联系人列表中,则会选中该复选框。

我正在使用tablesorterpager插件,因此用户可以轻松浏览联系人列表;我有一个自定义解析器用于复选框字段,它将根据是否选中复选框对联系人进行排序。

我的问题是我不能同时使这两个工作。

相关代码如下:

$(function() {
        $('#userTable')
                .tablesorter({
                        headers: {
                                0: {
                                        sorter: 'checkbox'
                                }
                        }
                })
                .tablesorterPager({container: $("#pager")});
});

如果我注释掉.tablesorter调用或.tablesorterPager调用,那么另一个工作正常。如果我让他们都没有注释,那么只有第二个调用实际上有效 - 似乎我可以有分页或自定义解析器,但不是两者。我已经交换了两个电话,它一直是第二个电话 - 第一个消失了。

我认为我错过了一些明显的东西,但我找不到什么。这两个电话本身都很好,因为它们在另一个被注释掉时起作用,但它们不能一起工作。

我正在使用tablesorter 2.1.19(from here);和jquery 1.7.1

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
  });

});​