Search code examples
jquerytablesorter

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

Forgive me, I'm a novice...I'm using TableSorter jQuery plugin. I have the external search box working which searches all columns. I also have buttons that will load a specific term, however these only work by filtering a certain column. I am trying to have these filter by all columns to no avail. Please help. See how I have my script set-up.

<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>
Solution

  • If you want the buttons to perform an "all" column search, add the query to the last column plus one. For example:

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

    So change your button click code to this (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;
});

    * NOTE * As I stated in the comment, while creating the demo I found a bug that causes a js error when using the any-match search when no external any-match input exists. I'll have it fixed in the next update; This bug is now fixed in 2.20.1!

    * NOTE 2 * This information is documented in the filter widget demo in the "Methods" section under "search".