TableSorter

Question

原谅我，我是新手...我正在使用 TableSorter jQuery 插件。我有外部搜索框可以搜索所有列。我也有加载特定术语的按钮，但这些按钮只能通过过滤特定列来工作。我试图让所有列的这些过滤器都无济于事。请帮忙。看看我是如何设置脚本的。

<script>
$(document).ready(function() 
    { 
    $("#myTable1").tablesorter({
    sortList: [[0,0]],
    widgets: ["zebra", "filter"],
    // change the default striping class names
    // updated in v2.1 to use widgetOptions.zebra = ["even", "odd"]
    // widgetZebra: { css: [ "normal-row", "alt-row" ] } still works
    widgetOptions : {
      // filter_anyMatch replaced! Instead use the filter_external option
      // Set to use a jQuery selector (or jQuery object) pointing to the
      // external filter (column specific or any match)
      filter_external : '.search',
      // add a default type search to the first name column
      filter_defaultFilter: { 1 : '~{query}' },
      // include column filters
      filter_columnFilters: true,
      filter_placeholder: { search : 'Search...' },
      filter_saveFilters : false,
      filter_reset: '.reset'

    }
  }); 

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

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

    } 
); 
</script>

......

<!--Main Search box - Filters all column-->

    <input class="search" style="font-size:18px; height:35px" data-column="all" type="search" placeholder="Search...">  

    <button style="font-size:18px; height:43px; margin-left:10px" type="button" class="reset">Reset Parts Listing</button><br />

<!--Buttons that load search. Currently they only filter by column 1...I want them to filter by all columns-->

    <button type="button" class="search" data-filter-column="1" data-filter-text="Collision">Collision</button>

    <button type="button" class="search" data-filter-column="1" data-filter-text="Import">Import</button>

    <button type="button" class="search" data-filter-column="1" data-filter-text="Heavy Duty">Heavy Duty</button>

Answer 1

如果您希望按钮执行“所有”列搜索，请将查询添加到最后一列加一。例如：

In v2.15, one additional parameter can be added to the array to perform an "any-match" of the table; Warning! please note that if no external input (with a data-column="all" is attached using bindSearch function) is visible, the user will not know that a filter has been applied.
// in a table with 4 columns; set the 5th parameter to any-match
// find orange in any column
$('table').trigger( 'search', [['', '', '', '', 'orange']] );

所以将您的按钮点击代码更改为 (demo):

$('button').click(function(){
    var $t = $(this),
        $table = $('table'),
        totalColumns = $table[0].config.columns,
        col = $t.data('column'), // zero-based index or "all"
        filter = [];

    // text to add to filter
    filter[ col === 'all' ? totalColumns : col ] = $t.attr('data-query');
    $table.trigger('search', [ filter ]);
    return false;
});

* 注意 * 正如我在评论中所述，在创建演示时我发现了一个错误，当不存在外部任意匹配输入时使用任意匹配搜索时会导致 js 错误。我会在下一次更新中修复它；此错误现已在 2.20.1 中修复！

* 注 2 * 此信息记录在 "Methods" section“搜索”下的过滤器小部件演示中。

TableSorter - 外部搜索，尝试从按钮搜索以过滤所有内容，而不仅仅是列

TableSorter - External Search, Trying to search from button to filter all, not just column

jquery