具有自定義按鈕文本和多列的外部過濾器

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