Tablesorter：要过滤的外部复选框

Question

我正在尝试使用外部复选框根据列的内容过滤 table。我发现的唯一相关 questions/solutions 是处理用于排序目的的 table 内的复选框。

所需功能： 为了简单起见，假设第 4 列包含 0 或 1。选中此外部复选框后，我希望它过滤结果（其中第 4 列包含值 1）。

替代方案： 使用外部 select（下拉菜单）时，我可以实现所需的功能。 select 元素 (<select id="test_select" name="test_select" class="search" data-column="4">) 有一个选项 (<option value="1">1</option>)，然后在 "widgetOptions" 配置中，有 filter_external: '.search'.

但是 select 只有一个选项就可用性而言没有意义。

有什么建议吗？

Answer 1

使用 "search" method 对 table 数据执行任何查询。

Here is an example

HTML

<label><input id="findzeroes" type="checkbox"> Find Zeroes</label>

脚本

$(function() {

  $('#findzeroes').on('change', function(){
    var query = [];
    if (this.checked) {
      // target 4th column (zero-based index)
      query[3] = '0';
    }
    $('table').trigger('search', [ query ]);
  });

  $('table').tablesorter({
    theme: 'blue',
    widgets: ['zebra', 'filter']
  });
});

使用 <select> 而不是复选框也可以。

Answer 2

我想用复选框打开和关闭多列过滤器，但发现@Mottie 的回答没有用，因为它不允许 filter_external 和 data-column="7,8" 类型过滤。

所以我刚刚创建了一个具有 data-column="7,8" 属性的隐藏字段，并使用 jQuery 在复选框更改时更改其值，并触发 keyup 事件。

$('#checkboxId').on('change', function(){
    var filterTerm = $(this).prop('checked') ? '?' : ''
    $('#hiddenFieldId').val(filterTerm).keyup() 
})

我使用过滤值“?”这是一个非 space 字符，可以是您在普通筛选字段中输入的任何内容。

Tablesorter：要过滤的外部复选框

Tablesorter: External Checkbox to Filter

javascript

checkbox

jquery

tablesorter