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

Jquery 带有自定义按钮文本和多列的外部过滤器,jquery,filter,tablesorter,Jquery,Filter,Tablesorter,我正在使用Tablesorter,希望为我的用户添加一些快捷按钮,以帮助他们填写筛选框。如果按此处所述使用按钮,则按钮工作正常: 在这里: 我需要更改按钮的标签,即过滤与按钮标签不同的内容。我如何添加这个 另外:当按下不同的按钮时,如何启用多列过滤?现在,当按下一个按钮时,所有其他过滤器都会被清除 使用外部按钮的我的按钮jQuery代码如下所示: $('button').click(function(){ var $t = $(this), col

我正在使用Tablesorter,希望为我的用户添加一些快捷按钮,以帮助他们填写筛选框。如果按此处所述使用按钮,则按钮工作正常:

在这里:

我需要更改按钮的标签,即过滤与按钮标签不同的内容。我如何添加这个

另外:当按下不同的按钮时,如何启用多列过滤?现在,当按下一个按钮时,所有其他过滤器都会被清除

使用外部按钮的我的按钮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>
50-59
DIV

我希望用其他内容替换“DIV”文本,同时仍将实际读取“DIV”的筛选器应用于第0列,同时我不希望删除第一个按钮可能添加到第1列的“50-59”筛选器。

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

HTML


谢谢你的建议。不幸的是,这意味着我必须为每个可能的过滤器组合制作按钮。这两个按钮就是一个例子。我有10个预定义的按钮,可以为我的三个列添加不同的过滤器,如果我理解正确,你的建议会添加很多组合按钮?在查看示例时,我没有发现数据过滤器有问题,因此我将开始使用该过滤器。谢谢令人惊叹的。我试试看。非常感谢。为了结束这一切,第二个建议一针见血。非常感谢。喜欢Tablesorter脚本以及它是如何演变的,顺便说一句:-)
<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']
  });
});
$(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'
    }
  });
});