Tablesorter：要过滤的外部复选框答案

【问题标题】：Tablesorter: External Checkbox to FilterTablesorter：要过滤的外部复选框
【发布时间】：2016-06-24 16:54:58
【问题描述】：

我正在尝试使用外部复选框根据列的内容过滤表格。我发现的唯一相关问题/解决方案是处理表格中用于排序目的的复选框。

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

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

但就可用性而言，选择一个选项并没有意义。

有什么建议吗？

【问题讨论】：

标签： javascript jquery checkbox tablesorter

【解决方案1】：

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

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> 代替复选框也可以。

【讨论】：

太完美了！像魅力一样工作。一如既往，非常感谢。

【解决方案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() 
})

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

【讨论】：