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



原谅我,我是个新手。。。我使用的是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>

如果您希望按钮执行;所有";列搜索,将查询添加到最后一列加一。例如:

在v2.15中,可以将一个附加参数添加到数组中;任何匹配";表的;警告请注意,如果没有可见的外部输入(使用bindSearch函数附加了一个数据列="all"),则用户将不知道已经应用了过滤器。

// in a table with 4 columns; set the 5th parameter to any-match
// find orange in any column
$('table').trigger( 'search', [['', '', '', '', 'orange']] );

因此,将您的按钮点击代码更改为(演示):

$('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*该信息记录在";方法";根据";搜索";。

相关内容

最新更新