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

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列的过滤器，同时我不想删除第50页的“50-59”过滤器可能已添加到列1中。

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' 
    } 
    }); 
});