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

如果您希望按钮执行＆＃34; all＆＃34;列搜索，将查询添加到最后一列加一。例如：

在v2.15中，可以向阵列添加一个附加参数以执行＆＃34;任意匹配＆＃34;的表;警告！请注意，如果没有外部输入（使用bindSearch函数附加数据列=＆＃34;所有＆＃34;），则用户将不知道已应用过滤器。
// 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＆＃34;搜索＆＃34;中的过滤器小部件演示中。

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

1 个答案: