具有自定义按钮文本和多列的外部过滤器

Question

我正在使用 Tablesorter 并想为我的用户添加一些快捷按钮以帮助他们填写筛选框。如果按此处所述使用，按钮可以正常工作：

https://mottie.github.io/tablesorter/docs/example-widget-filter-custom-search.html#how_to_add_custom_filter_types

这里：

https://mottie.github.io/tablesorter/docs/example-widget-filter-custom-search2.html

我需要更改按钮的标签，即过滤与按钮标签不同的内容。我该如何添加？

另外：当按下不同的按钮时，如何启用多列过滤？现在按下按钮时所有其他过滤器都会被删除

我的按钮 jQuery 使用外部按钮的代码如下所示：

$('button').click(function(){
        var $t = $(this),
          col = $t.data('filter-column'), // zero-based index
          filter = [];

        filter[col] = $t.text(); // text to add to filter
        $('#sorttable').trigger('search', [ filter ]);
        return false;
      });

我会使用

添加过滤器

<button class="btn btn-sm btn-primary" data-filter-column="1">50 - 59</button>
<button class="btn btn-sm btn-primary" data-filter-column="0">DIV</button>

我想用其他内容替换 "DIV" 文本，同时仍然应用实际上读取 "DIV" 的过滤器到第 0 列，同时我不想删除第一个按钮可能已添加到第 1 列的“50 - 59”过滤器。

Answer 1

您可以设置代码以通过一个按钮获取一个或多个查询(demo)

HTML

<button class="btn btn-sm btn-primary" data-filter-column="0,1" data-filter-query="abc,>50">Combo</button>

脚本

$(function() {

  $('button').click(function() {
    var i,
      $t = $(this),
      col = $t.attr('data-filter-column').split(/\s*,\s*/), // zero-based index
      query = $t.attr('data-filter-query').split(/\s*,\s*/),
      filter = [];

    for (i = 0; i < col.length; i++) {
      var n = parseInt(col[i], 10);
      filter[n] = query[i]; // text to add to filter
    }
    $('#sorttable').trigger('search', [filter]);
    return false;
  });

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

或者，您可以使用内置方法搜索一系列列 - 请参阅 this demo。

更新：尝试 this demo 每次单击按钮都会更新现有过滤器。使用重置按钮清除所有内容

$(function() {

  var $table = $('#sorttable');

  $('button:not(.reset)').click(function() {
    var i,
      $t = $(this),
      col = $t.data('filter-column'), // zero-based index
      query = $t.attr('data-filter-query'),
      // get the current filter values
      filter = $.tablesorter.getFilters($table);
    filter[col] = query; // text to add to filter
    $table.trigger('search', [filter]);
    return false;
  });

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

具有自定义按钮文本和多列的外部过滤器

External filter with custom button text and multi-column

jquery

tablesorter

filter