Question

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

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

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

但就可用性而言，选择一个选项并不合理。

有什么建议吗？

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

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

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

Tablesorter：要过滤的外部复选框

2 个答案: