TableSorter: Filter Results Based on Search Query

So, you want to use the TableSorter jQuery plugin and you want to be able to search the table and filter the results. Attached is a companion plugin we’ve written, called tablesorterFilter, which will extend tablesorter to provide real-time filtering of rows which match a search query!

Usage

<script type="text/javascript">
  jQuery(document).ready(function() {
    $("#myTable")
      .tablesorter({debug: false, widgets: ['zebra'], sortList: [[0,0]]})
      .tablesorterFilter({filterContainer: $("#filter-box"),
                          filterClearContainer: $("#filter-clear-button"),
                          filterColumns: [0],
                          filterCaseSensitive: false});
  });
</script>
Search: <input name="filter" id="filter-box" value="" maxlength="30" size="30" type="text">
<input id="filter-clear-button" type="submit" value="Clear"/>
 
<table id="myTable">
  <thead>
    <tr>
      <th>Last Name</th>
      <th>First Name</th>
      <th>Email</th>
      <th>Web Site</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Smith</td>
      <td>John</td>
      <td>jsmith@gmail.com</td>
      <td>http://www.jsmith.com</td>
    </tr>
    <tr>
      <td>Doe</td>
      <td>Jason</td>
      <td>jdoe@hotmail.com</td>
      <td>http://www.jdoe.com</td>
    </tr>
  </tbody>
</table>

Configuration

tablesorterFilter takes up to six parameters:

  • filterContainer – The DOM id of the input box where the user will type the search string.
  • filterClearContainer – (optional) The DOM id of the button, image, or whatever which will clear the search string and reset the table to it’s original, unfiltered state.
  • filterColumns – An array of columns, starting at 0, which will be searched.
  • filterCaseSensitive – (optional) Boolean stating whether the search string is case sensitive. The default is false.
  • filterWaitTime – (optional) Time after last key press to start filtering. The default is 500 (milliseconds).
  • filterFunction – (optional) Custom function to filter by column text. The default is the plugin function has_words.

Requirements

jQuery version 1.2.1 or higher and a slightly modified jquery.tablesorter.js version 2.0.3.

The modification to the original tablesorter plugin is the addition of a few lines which will cache all of the rows so they can be searched. You can download the modified jquery.tablesorter.js code below.

Download

jquery.tablesorter.filter.js

jquery.tablesorter.js 2.0.3 (modified for tablesorterFilter)

Updated blog post on 1-April-2009 to reflect two additional configuration parameters.

Tags: ,

Friday, August 22nd, 2008 Programming

143 Comments to TableSorter: Filter Results Based on Search Query

  • Chag says:

    Great plugin. I tried to add an activity indicator (small animated gif) because my table is very big (more than 2000 lines) but coul only get the indicator to appear once the search is finished. If you have an idea…

    Chag

    • Hello Chag,

      Just recently found this plugin and am getting my hands a little dirty. Here is what I did to add the loading.

      1) Added a line of code in the doFilter function (starts on line 33)

      $(table).trigger(“filterStart”);

      2) Chaining two binds after calling tablesorterFilter on my table

      $(“#myTable”)
      .tablesorter()
      .tablesorterFilter()
      .bind(“filterStart”,function(){$(“#loading-filter”).show()})
      .bind(“filterEnd”,function(){$(“#loading-filter”).hide()});

      3) Added to my html and made it pretty with css.

  • Cool plugin!

    There seems to be one problem:
    after filtering has been done, instead of the current sorting the order of the rows in the HTML is used (maybe because of using the first table.config.cache).

    And a feature request: support multiple filterContainers including their own filterFunction to allow customized filtering of several columns like date fields.

  • Penguin says:

    I have the same problem as René, when you apply sorting to the table and start filtering data the columns are not sorted anymore. Is there a way around it?

    Apart from that, great plugin,

    Kind regards,

    Penguin

  • Justin says:

    Rene, Penguin: I’m aware of the bug, but don’t yet have a solution. I’ll try to make some time to fix this … in the meantime, if you are able to fix it feel free to fork my github repository, make the change, and send me a pull request.

    Cheers,
    Justin

  • Ed says:

    Justin,

    Cool add-on. You know every good deed goes unpunished. If you write a good add-on, we come back and ask for more. :-)

    I wonder if the following are options:
    (a) allowing Boolean searches (ie, “OR” and “AND” tags within the box)
    (b) allowing comparison searches (eg “>”, “<”, “CONTAINS”, “EQUALS”, etc)
    (c) allowing multiple boxes to sort (eg, if I wanted to search on records in a certain state (state box) for users with last name Smith (name box) with incomes between 40,000 and 50,000 (income box)

    Email me if and when any of these changes are being looked at. Thanks.

  • Brandon Jones says:

    Hi! I actually had an issue similar to yours on the sort not retaining whenever I changed something about my table. It’s actually a fairly simple thing to do when you find where tablesorter stores that information. To fix it all you have to do is this:

    $(table).trigger(“sorton”, [table.config.sortList]);

    I added that to your code and now it works perfectly. I’m also looking forward to seeing if you ever try to implement something like what Ed has suggested.

    Thanks,
    Brandon Jones

  • Brandon, thank you for your fix, replacing line 85
    // $(table).trigger(“sorton”, 1, table.config.sortList);
    by your
    $(table).trigger(“sorton”, [table.config.sortList]);
    did the job!

    Is there a way to avoid the resorting?
    Because before doFilter() the table already contains the correctly sorted data.

    And I hope that the small modification to 2.0.3 will be included in the next version of jquery.tablesorter.js.

  • byron says:

    Thanks for the plugin and the fix. In addition to searching with the text box – I’d like a user to be able to click on a link and have the table update based on that.

    I tried: onclick=”document.getElementById(‘filter-box’).value=this.innerHTML”

    That puts the text in the box, but the table doesn’t adjust. Does anyone have an idea how to do that?

  • Lisa says:

    Hi Justin,

    Nice plugin and very well documented! I am just experiencing one issue. When typing a Search string that does not exist in the table, I get an out of memory error instead of no results. Do you have any suggestions?

    Thanks!

    • Sundar Rajan says:

      // Walk through all of the table’s rows and search.
      // Rows which match the string will be pushed into the resultRows array.
      var allRows = table.config.cache.row;

      for (var i = 0; i 0 ){
      ………
      …..
      return table;

      }
      else
      {
      /*some thing you want (ex:No record)*/
      }

      • Sundar Rajan says:

        oops, I meant to paste this:

        below sollution for out of memory message ie if there is no records while searching.

        in doFilter function
        // Walk through all of the table’s rows and search.
        // Rows which match the string will be pushed into the resultRows array.
        var allRows = table.config.cache.row;

        for (var i = 0; i 0){………… return table;}else{ /*No record*/}};

  • byron says:

    Lisa – I had the same issue. Look near the bottom of the doFilter function and add in this if statement:

    $(table).trigger(“update”);
    if (resultRows.length != 0) {
    $(table).trigger(“appendCache”);
    $(table).trigger(“sorton”, [table.config.sortList]);
    }
    return table;

    • Jason says:

      I’m having the same problem but can’t find the doFilter function (I’m looking in the aspx file and converted it to coldfusion (.cfm) Can you tell me where to put it with the code attached please:
      $(document).ready(function() {

      $(“#tableTwo”).tablesorter({ debug: false, sortList: [[0, 0]], widgets: ['zebra'] })
      .tablesorterPager({ container: $(“#pagerTwo”), positionFixed: false })
      .tablesorterFilter({ filterContainer: $(“#filterBoxTwo”),
      filterClearContainer: $(“#filterClearTwo”),
      filterColumns: [0, 1],
      filterCaseSensitive: false
      });

      $(“#tableTwo .header”).click(function() {
      $(“#tableTwo tfoot .first”).click();
      });
      });

      • Jason says:

        I downloaded the latest files. Bit of a learning curve to figure that out as the names of the origonal files had changed. Everything seems to be working with the exception of the loading gif file showing during loading. Is there a new fix for this? Great work, this is exactly what I’ve been looking for.

  • Sean says:

    What would be nice is if you could set up multiple rows to accept searches from different filter containers. I’m hiding them and populating with js from checkboxes. I’m working around it, but my code is getting complex. Great plugin regardless, good work!

    Thanks
    Sean

    $(“.tablesorter”)
    .tablesorter()
    .tablesorterPager({container: $(“#pager”), size:10})
    .tablesorterFilter({filterContainer: $(“#filter-box”),
    filterClearContainer: $(“#filter-clear-button”),
    filterColumns: [[3]],
    filterCaseSensitive: false,
    filterContainer: $(“#filter-box2″),
    filterClearContainer: $(“#filter-clear-button2″),
    filterColumns: [[4]],
    filterCaseSensitive: false});

  • Jon P says:

    First off Fantastic Plug in!!

    My question / request, is there a way to trigger the filter on page load if there is a preset value, set by some server-side code, in the filter containter?

    Thanks!!

  • I am wondering when an updated version will be released which contains the fixes from the comments?
    Or is it possible to send patches for the git branch?

    And the second most important point would be a new tablesorter release which provides the needed changes for the filter plugin ;)

    Here is a code snippet which supports negation for dash prefixed search words:

    for (var i=0; i < words.length; i++) {
    if(words[i][0] == ‘-’) {
    if (text.indexOf(words[i].substr(1)) !== -1) return false; // Negated word must not be in text
    } else if (text.indexOf(words[i]) === -1) return false;
    }

  • Jubair says:

    In Firefox everything works perfectly. but in IE I am getting a Stack Overflow error when I enter search text that does not match anything in the table.

    now is there a way to resolve what ever this issue is and also add a text to the table stating:

    No Match found, please search again.

    or something along those lines?

  • I added several fixes and improvements to the code, please test.
    http://github.com/rleonhardt/jquery-tablesorter-filter/tree/master

    @Penguin: current sorting is re-applied after filtering.

    @Sean: multiple filters are now supported.
    @Ed: custom filter functions are now supported.

    @byron and Jon P: trigger filter-box “keyup” or table “doFilter”.

    @Jubair: empty filter result should not lead to IE errors anymore.

  • I’m using ASP.NET’s GridView to generate a table. I have added the footer and header like this:

    if (this.MyGrid.Rows.Count > 0)
    {
    MyGrid.UseAccessibleHeader = true;
    MyGrid.HeaderRow.TableSection = TableRowSection.TableHeader;
    MyGrid.FooterRow.TableSection = TableRowSection.TableFooter;
    }

    When I press enter in the filter field. The page refreshes and I lose the Thead mark up. Has anyone experienced and if so how did they fix this?

    Thanks
    BTW awesome plugin!

  • Justin says:

    I have integrated René’s excellent additions. You can find the updated TableSorter Filter plugin at:

    http://github.com/jbritten/jquery-tablesorter-filter/tree/master

  • Nick says:

    Hi I’m trying to use your plugin and I keep getting config.filter being undefined on line 151 in tablesorter_filter.js.

    I’ve tried initialising the variable before hand but I just get errors else where. Is this a bug or am I just using it wrong?

    Thanks
    Nick

    • Buddy Casino says:

      @Nick: I got this error, too. Looks like this is a bug.

      • Buddy Casino says:

        Created a patch to fix this:

        Index: tablesorter_filter.js
        ===================================================================
        — tablesorter_filter.js (revision 9572)
        +++ tablesorter_filter.js (working copy)
        @@ -148,6 +148,7 @@

        return this.each(function() {
        this.config.filter = new Array(settings.length);
        + var config = this.config;
        config.filter = new Array(settings.length);

        for (var i = 0; i < settings.length; i++)

  • Try adding a line between 150 and 151:

    this.config.filter = new Array(settings.length); // line 150
    var config = this.config; // line 151
    config.filter = new Array(settings.length); // line 152

  • angiedelgado says:

    how do the following??
    Make your search by selecting the column

    Search by Column:
                    Name
                    Major
                    Sex
                    English
                    Japanese
                    Calculus
                    Geometry
    

    http://beckelman.net/demos/jqueryTableSorterConPaging/default.aspx

  • You have to define one filter per column, at least providing the different container and column options:
    .tablesorterFilter({filterContainer: “#filter-box-date0″, filterColumns: [0]}, {filterContainer: “#filter-box-date1″, filterColumns: [1]}, …)

    The containers may be hidden and you just have to activate them on so just the selected filter container is accessible and automatically fires the filter event for it’s own single column.

    • I’ve tried the syntax you have suggested, but only the first column appears to be active.

      I’ve also tried in the form:

      $(document).ready(function() {
      $(“#ssi-report-table”)
      .tablesorter({ widgets: ['cookie', 'zebra'] })
      .tablesorterPager({ container: $(“#pager”), size: 100 })
      .bind(“sortStart”,function() { $(“#overlay”) .show(); })
      .bind(“sortEnd”,function() { $(“#overlay”) .hide(); })
      .columnManager({listTargetID:’targetone’})
      .tablesorterFilter({filterContainer: $(“#filter-box0″), filterColumns: [0] })
      .tablesorterFilter({filterContainer: $(“#filter-box1″), filterColumns: [1] })
      .tablesorterFilter({filterContainer: $(“#filter-box2″), filterColumns: [2] })
      .tablesorterFilter({filterContainer: $(“#filter-box3″), filterColumns: [3] })
      .tablesorterFilter({filterContainer: $(“#filter-box4″), filterColumns: [4] })
      .tablesorterFilter({filterContainer: $(“#filter-box5″), filterColumns: [5] })
      .tablesorterFilter({filterContainer: $(“#filter-box6″), filterColumns: [6] })
      .tablesorterFilter({filterContainer: $(“#filter-box7″), filterColumns: [7] })
      .tablesorterFilter({filterContainer: $(“#filter-box8″), filterColumns: [8] })
      .tablesorterFilter({filterContainer: $(“#filter-box9″), filterColumns: [9] })
      .tablesorterFilter({filterContainer: $(“#filter-box10″), filterColumns: [10] })
      .tablesorterFilter({filterContainer: $(“#filter-box11″), filterColumns: [11] })
      } );

      But I get a (FF3+IE7) JS error:

      container[0] is undefined
      [Break on this error] container[0].filterIndex = i;

      Anyone else had a similar problem or a different method of using distinct search boxes per column?

      Thanks

      Andy

      • Hello Andrew,

        please try the multiple filter syntax like I have demonstrated above:
        .tablesorterFilter({filterContainer: “#filter-box0″, filterColumns: [0] },
        {filterContainer: “#filter-box1″, filterColumns: [1] },
        {filterContainer: “#filter-box2″, filterColumns: [2] },
        {filterContainer: “#filter-box3″, filterColumns: [3] },
        {filterContainer: “#filter-box4″, filterColumns: [4] },
        {filterContainer: “#filter-box5″, filterColumns: [5] },
        {filterContainer: “#filter-box6″, filterColumns: [6] },
        {filterContainer: “#filter-box7″, filterColumns: [7] },
        {filterContainer: “#filter-box8″, filterColumns: [8] },
        {filterContainer: “#filter-box9″, filterColumns: [9] },
        {filterContainer: “#filter-box10″, filterColumns: [10] },
        {filterContainer: “#filter-box11″, filterColumns: [11] })

        I updated the documentation to make it clearer:
        http://github.com/rleonhardt/jquery-tablesorter-filter/tree/master

  • Damien says:

    How do I call the filter function?

    I am doing a range slider, and ive made the filter, but i cannot figure out how I can evoke the filtering action.

    • Damien says:

      nevermind got it
      $(“#range-filter-box”).trigger(“keyup”);

      • Hiral says:

        I have used filter as combo box with other text boxes and added trigger event but still it does not work. pls help.

        $(document).ready(function(){

        $(“table”)
        .tablesorter({
        widthFixed: true, widgets: ['zebra'],sortList: [[0,0]]})
        .tablesorterFilter(
        {filterContainer: $(“#search_text1″),filterColumns: [0],filterCaseSensitive: false},
        {filterContainer:$(“#search_text2″),filterColumns: [1],filterCaseSensitive: false},
        {filterContainer:$(“#search_combobox1″),filterColumns: [2],filterCaseSensitive: false},
        {filterContainer:$(“#search_combobox2″),filterColumns: [3],filterCaseSensitive: false}
        )
        .tablesorterPager({container: $(“#pager”)});

        $(“#search_combobox1″).trigger(“keyup”);
        });

        Answer will be appreciated.

        • Mina says:

          For this support in jquery.tablesorter.filter.js we need just to replace these 3 changes in the file…

          Replace a to b in jquery.tablesorter.filter.js
          ===========================Replacemenet============================
          a// Trim and unify whitespace before splitting
          var phrase = jQuery.trim(container.val()).replace(/\s+/g, ‘ ‘);
          ——————————————————————-

          b// Trim and unify whitespace before splitting
          var phrase = null;
          if(container.is(‘input:text’)){
          phrase = jQuery.trim(container.val()).replace(/\s+/g, ‘ ‘);
          } else {
          phrase = $(container).find(‘:selected’).text();

          }
          ==================================================================

          2===========================Replacemenet===========================
          function checkInputBox(inputBox, override) {
          var value = inputBox.value;

          if ((value != inputBox.lastValue) || (override)) {
          inputBox.lastValue = value;
          doFilter( table );
          }
          };
          ——————————————————————-
          function checkInputBox(inputBox, override) {
          var value = inputBox.value;

          if ((value != inputBox.lastValue) || (override)) {
          inputBox.lastValue = value;
          doFilter( table );
          }
          };

          function checkComboBox(comboBox, override) {
          var value = $(comboBox).find(‘:selected’).text();
          if ((value != comboBox.lastValue) || (override)) {
          comboBox.lastValue = value;
          doFilter( table );
          }
          };
          3==============================Replacemenet========================
          container.keyup(function(e, phrase) {
          var index = this.filterIndex;
          if(undefined !== phrase)
          $(this).val(phrase);
          var inputBox = this;

          // Was ENTER pushed?
          if (inputBox.keyCode == 13 || undefined !== phrase) {
          var timerWait = 1;
          var overrideBool = true;
          } else {
          var timerWait = config.filter[index].filterWaitTime || 500;
          var overrideBool = false;
          }

          var timerCallback = function() {
          checkInputBox(inputBox, overrideBool);
          }

          // Reset the timer
          clearTimeout(timer[index]);
          timer[index] = setTimeout(timerCallback, timerWait);

          return false;
          });
          —————————————————————–

          if(!(container.is(‘input:text’))){
          container.change(function(e, phrase) {
          var index = this.filterIndex;
          if(undefined !== phrase)
          $(this).val(phrase);
          var comboBox = this;

          var timerWait = config.filter[index].filterWaitTime || 500;
          var overrideBool = false;

          var timerCallback = function() {
          checkComboBox(comboBox, overrideBool);
          }

          // Reset the timer
          clearTimeout(timer[index]);
          timer[index] = setTimeout(timerCallback, timerWait);

          return false;
          });
          } else {
          container.keyup(function(e, phrase) {
          var index = this.filterIndex;
          if(undefined !== phrase)
          $(this).val(phrase);
          var inputBox = this;

          // Was ENTER pushed?
          if (inputBox.keyCode == 13 || undefined !== phrase) {
          var timerWait = 1;
          var overrideBool = true;
          } else {
          var timerWait = config.filter[index].filterWaitTime || 500;
          var overrideBool = false;
          }

          var timerCallback = function() {
          checkInputBox(inputBox, overrideBool);
          }

          // Reset the timer
          clearTimeout(timer[index]);
          timer[index] = setTimeout(timerCallback, timerWait);

          return false;
          });
          }
          ==================================================================

  • Justin says:

    Big thanks to René Leonhardt for some recent updates to the plugin and documentation! They’ve all been integrated into the plugin linked in the blog entry.

  • This plugin saved my life! But, I would like to know how can I make a quick tweak to force all input filters to be OR instead of AND?

    I have a piece of code that is pulling all the categories of records and creating checkboxes for each category. I would like the user to be able to click the checkboxes of the records they want to see, but right now the records have to match all the checkboxes.

    Any suggestions?

    And once again, beautiful plugin!!!!!

    • I added support for OR mode: add {filterOrMode: true} option, please try it:
      http://github.com/rleonhardt/jquery-tablesorter-filter/tree/master

      • Hi Rene,

        Thank you for the response. I actually needed the input boxes themselves to be AND/OR, not the words in the different boxes. I don’t know how to really get this code to you other than quickly posting it here.

        // Filter cleared?
        if(filterCount == 0) {
        var search_text = function() {
        var elem = jQuery(this);
        resultRows[resultRows.length] = elem;
        }
        } else {
        var search_text = function() {
        var elem = jQuery(this);
        var filter_status = false;

        for(var i=0; i < filterCount; i++) {
        if (filters[i].filterMode == ‘required’){
        if(! filters[i].filterFunction( (filters[i].findStr ? elem.find(filters[i].findStr) : elem).text(), filters[i].words, filters[i].caseSensitive)) {
        filter_status = false;
        break;
        }
        } else {
        if (filters[i].filterFunction( (filters[i].findStr ? elem.find(filters[i].findStr) : elem).text(), filters[i].words, filters[i].caseSensitive)){
        filter_status = true;
        }
        }
        }

        if (filter_status) {
        resultRows[resultRows.length] = elem;
        }
        }
        }

        I then added the filterMode parameter in the appropriate places. filterMode can be ‘optional’ or ‘required’ and it defaults to ‘optional’.

        I hope someone finds this useful. It helped me apply a checkbox list that allows the user to check all the categories that they want to see (ex. Household Goods OR Automobiles OR Pets & Livestock).

  • Ricky says:

    When using tablesorterFilter along with tablesorterPager, I receive a Stack overflow message in IE after entering search text that does not match anything in the table.

  • Chris says:

    When I have multiple fields causing filtering and one of the textboxes has a watermark on it the other filters fail by returning no rows.

  • Sean says:

    Anyone out there using tablesorter + tablesorterPager + tableSorterFilter in combination and having trouble getting things to “update” / “reinit” after adding a row to the table via $(‘#table tbody’).append(responseText);?

    I’ve tried numerous different update triggers and such, but it seems the filter is not getting updated.

    Without the filter in place and the un-modded tablesorter, the following will update the tablesort and pager after adding a row:

    $(“#provtable”).trigger(“update”);
    // set sorting column and direction
    var sorting = [[1,0]];
    $(“#provtable”).trigger(“sorton”,[sorting]);

    but with filter in the mix, no go.

    • i am guessing that through append, the new row is not getting “pushed” into the filter’s cache of rows. I had a similar problem and realized that I had to actually interface with tablefilter cache rather than adding rows to the DOM. But don’t take my word for it, i am only speaking from the one experience I had.

  • gavin says:

    Undefined error (not the one that is discussed a few posts above):

    `table.config.cache is undefined`
    line 75: var allRows = table.config.cache.row;

  • George says:

    COMMIT (May 11, 2009)
    - filterColumn doesn’t restore filterColumns. (Tested on FF 3, IE 7, Chrome 2)

    $(“table”).trigger(“filterColumn”, 2);
    > RESULT: filterColumn(object, number) –> OK

    $(“table”).trigger(“filterColumn”, null);
    > RESULT: filterColumn(object, undefined)
    >> RESULT: setFilterColumn(object, undefined) –> undefined or null?

    • George says:

      This should fix the problem:

      function setFilterColumn(table, i)
      {
      if (typeof i == ‘undefined’ || i === null) {
      table.config.filterColumn = null;
      } else if (! isNaN(parseInt(i)) && i >= 0) {
      table.config.filterColumn = parseInt(i);
      } else { return; }
      doFilter(table);
      }

  • Brendan Loudermilk says:

    I am having trouble adding two filters to one row. In my case, I have a price column in my table. I would like a minimum price input and a maximum price input to both filter the same price column. I have already written and tested my filterFunction for each and everything works as expected when testing the two filters indavidually, but when I add both of them, only the latter one works. My code is below, any help is appreciated:

    .tablesorterFilter(
    {filterContainer: $(“#pricerange_start”), filterColumns: [5], filterFunction: isLessThan},
    {filterContainer: $(“#pricerange_end”), filterColumns: [5], filterFunction: isGreaterThan}
    );

    • Brendan Loudermilk says:

      Hmm, it seems I made some sort of typo in my code when testing. Upon re-testing, everything seems to be working quite well. Thanks for your amazing plugin!

      • Satheesh says:

        Hi Brendan,

        I need to implement same logic like you search for amount range and date ranges. I wrote a function isLessThan in tablesorterfilter.js file and i intialized like this.
        { filterContainer: $(“#filterAmount”), filterColumns: [2], filterFunction: isLessThan},

        but iam getting an error the “isLessThan” undefined.

        Please let me know how you implmented this.
        Thanks,
        Satheesh

  • gavin says:

    I am getting false positives.

    For example:
    I search fo 2401. In one row I happen to have two side-by-side columns, one column is `24` and the other column is `01`. Your plugin displays this row.

    This is interesting, and may be nice to enable sometimes, but for my app it is not helpful. Perhaps there could be a config variable called `filterConcatColumnsMatch = true/false`?

  • Thodoris Greasidis says:

    I`m using your plug-in on a sidebar gadget witch uses ajax to fetch the table rows and I`m experiencing a problem.
    After the page fetches the new rows, I use:
    $(“#gadget-table”).trigger(“update”);
    $(“#gadget-table”).trigger(“sorton”,[[[0,0]]]);
    (as tablesorter plug-in suggests).
    My problem is that, the filter uses the old lines of the table (not the ones I just fetched) and even after I clear the filterbox (either by backspace or by clear button) the table contents still seems to be stuck to the old rows of the table.
    Could you implement an “update” function to tablesotrerfilter to implement a similar (update) functionality???

  • Prasanna says:

    Great plugin! It works perfectly for what I need. I have one quick question though..

    I have about 400 rows of data in the table, using tablesorter, pager and filter plugins together. When I filter on some column, it works fine, but when I clear the filter by pressing the button, it takes about 30 seconds to clear it and for the browser to become responsive again.

    I have tried this is IE and chrome.

  • Ricky says:

    Has anyone implemented a solution for the following issue when using tablesorterFilter along with tablesorterPager:

    After entering search text that does not return any rows the pager still allows navigation from last result that did.

    I’d like to have a message indicate that no results were found along with disable the pager.

    Any assistance is greatly appreciated!

    • Ricky says:

      The following updates to the jquery.tablesorter.filter.js solved my issue:

      // Update the table by executing some of tablesorter’s triggers
      // This will apply any widgets or pagination, if used.
      $(table).trigger(“update”);
      if (resultRows.length) {
      $(table).trigger(“appendCache”);
      // Apply current sorting after restoring rows
      $(table).trigger(“sorton”, [table.config.sortList]);
      $(table).children(‘thead’).children(‘tr’).children(‘th’).show();
      $(table).children(‘tfoot’).show();
      $(“#message”).hide();
      }
      // No rows match the filter.
      else {
      $(table).children(‘thead’).children(‘tr’).children(‘th’).hide();
      $(table).children(‘tfoot’).hide();
      $(“#message”).show();
      }

      • David says:

        I don’t see that fixing the issue you mentioned. The table children are all hidden, and the message is displayed, but the Pager still has the same previous results. That’s actually the only part I’m interested in. Having the pager just behave like it’s the only page of results or something. Ideas?

  • Danielsds says:

    Hi,

    Thank for the plug-in. I’m experiencing an issue. I’m in need to set the filter settings dynamically. Bcose I don’t know how many columns in my table will have a filter associated with. I’m building the table dynamically and so are the filters. I’m trying to do this as given below (at the moment for two columns):

    $(document).ready(function() {
    var filters = [];
    filters.push({ filterContainer: $(“#filter-box”), filterColumns: [0],
    filterCaseSensitive: false
    });
    filters.push({ filterContainer: $(“#Textbox1″), filterColumns: [1],
    filterCaseSensitive: false
    });
    $(“#myTable”)
    .tablesorter({ headers: { 0: { sorter: false}} })
    .tablesorterFilter(filters);
    });

    This is not working. Since I have used ‘#filter-box’ for the first column, it works. For the second column its not working. If I change the name of ‘#filter-box’ to something else, this is also will not work. However, if specify the filters as given below, it filters both the columns in the table. But this is not possible in my case.

    $(“#myTable”)
    .tablesorter({ headers: { 0: { sorter: false}} })
    .tablesorterFilter({ filterContainer: $(“#filter-box”), filterColumns: [0],
    filterCaseSensitive: false
    },
    { filterContainer: $(“#Textbox1″), filterColumns: [1],
    filterCaseSensitive: false
    }
    );

    Any help in this is appreciated.

    Thanks
    Daniel

    • Daniel says:

      A workarround only:

      //Daniel: Workarround for the filter issue
      //TODO: To be replaced with a better solution??
      //*********************************************************************
      //var settings = arguments;
      var settings = [];
      var argumentLen = arguments[0].length;
      if (argumentLen == undefined) {
      settings = arguments;
      }
      else {
      for (var j = 0; j < argumentLen; j++) {
      settings[j] = arguments[0][j];
      }
      }
      //*********************************************************************

  • Robert says:

    I’m happily using tablesorter + tablesorterPager + tableSorterFilter an it’s a smokin’ combination except in Internet Explorer when my while() loop returns nothing and IE, not Firefox, gives me “Stack overflow at line: 27″

    I’ve downloaded the most recent versions but still have the issue. Any ideas?

    Thanks for the awesome scripts!

    Robert

    • Dane says:

      First, let me add my thanks for this script! This is great!

      I’m having the same problem that Robert mentioned with tablesorter + tablesorterPager + tableSorterFilter.

      If I remove tablesorterPager, then I don’t get the error.

      Also, if I use the current version of tablesorter.js instead of the modified 2.0.3 I don’t get the error (of course, that stops the filter from working).

      Thanks again for all your work.

  • Chris says:

    When I load the table with dynamic data (even if I completely rebuild the table) the filter stops working. It appears the old rows are still cached. This was a problem with the table sorter plugin but the fix is rebuilding the entire table, this fix doesn’t seem to work with the table filter plugin.

    • Chris says:

      I was able to fix this by unbinding the keyup event of each container in the constructor. This makes sure that the container keyup event binds to the latest data and makes everything work.

      var container = $(config.filter[i].filterContainer);
      if (container.length) container.unbind(“keyup”);
      if (container.length) container[0].filterIndex = i; container.keyup(function(e, phrase)
      {

    • Daniel says:

      This is not true. I have tested this and I’m using in my application. My table gets populated by the help of the setTimeInterval() and I’m able to use the filters. But this works only if you rebuild the *entire* table everytime.

      D

      • Stephanie says:

        Could you please post the code of how you did this? I have the same problem as Chris, but his solution didn’t work for me. I rebuild my entire table by emptying the tbody first, and then adding all the rows again. After that, I update the tablesorter with this code:

        $(“#tblR”).trigger(“update”);
        var sorting = [[0,0]];
        $(“#tblR”).trigger(“sorton”, [sorting]);

        After this update, the tablesorterFilter still uses the old cached rows, so when I search a value I just added, it doesn’t find it, and when I reset the search form, I get back my old rows.

      • Robert says:

        Thats what I been thinking, and Im wanting to avoid rebuilding the table everytime. I have thousands of rows and many columns it takes a long time to repaint. Have you found a solution that works without having to rebuild.

  • Adam says:

    Hi, I like someone else above got the table.cache.config error on line 75. It was because I still had the old metadata.js script turned on.

    Turned off and it’s brilliant!

    Thanks!

  • Vincent says:

    Is it possible to do this?

    Filter numbers by >= , = , <= ??

  • Vincent says:

    filterFunction: has_words,
    filterContainer: $(“#filter-box1″),
    filterColumns: [0],
    filterCaseSensitive: false

    If I include “filterFunction: has_words,”, the code stops working. If I remove it, it works again. I am creating custom functions to filter the keywords instead of using the “has_words” function.

    Any idea why this happens?

  • Robert says:

    Awesome script!!

    I’m having a confusing issue, I have a table that also has an in each row. When I’m not using table sorter it submits just fine, but when i add the script back in the head my submit button does nothing.

    If i remove the following submit works, but sorter filter does not:


    function addDescription(text){
    document.getElementById(‘description’).value += text;
    }

    function addPrice(text){
    document.getElementById(‘price’).value += text;
    }

    Thanks again for sharing your work.

    • Robert says:

      oops, I meant to paste this:

      $(document).ready(function() {
      $(“table”)
      //.tablesorter({widthFixed: true, widgets: ['zebra']})
      .tablesorter({debug: false, widgets: ['zebra'], sortList: [[0,0]]})
      //.tablesorterPager({container: $(“#pager”)});
      $(“#myTable”)
      .tablesorterFilter({filterContainer: $(“#filter-box”),
      filterClearContainer: $(“#filter-clear-button”),
      filterColumns: [0,1],
      filterCaseSensitive: false});
      });

  • Macaroni says:

    Thanks for this plugin…

  • Ray Linder says:

    I totally freakin love this crap man, Awesome job!!! Saved me from going insane. Now I’m going to add a jQuery AutoComplete plugin on the searchbox to get the juices rolling… Thanks!!!

  • Satheesh says:

    This is a great plugin! This works great for my requirements. But I have any issue with IE

    I have about 2000 rows of data in the table, using tablesorter, pager and filter plugins together. When I filter on some column, it works fine, but when I clear the filter by pressing the button, it takes about more than a couple of minutes to clear it and for the browser to become responsive again. But in firefox seems to working fine.

    Does any one have the solution for this?

    Thanks,
    Satheesh

  • Satheesh says:

    Hi,

    Is there any way to filter the data on search button click, instead of input box key press events.

    Thanks,
    Satheesh

  • mistike says:

    Hi,

    Just wanted to send a big thank you to both Justin and René, I downloaded the last version of the plugin, it took me less than 15 minutes to set it up, including CSS for the search form.

    I was already using tablesorter and pager, no hassle, filter worked just out of the box !

    Thanks guys !

  • Richard Thompson says:

    If I remove a row from the table.. how do I get it to actually remove it from the cache as well. I’ve tried using trigger(“appendCache”) etc but no luck.. any ideas?

  • Andrea says:

    Not working for me on FF 3.5.6.
    I get error this.config is undefined.
    If I console this I see the table DOM so ….. config is of course undefined.

    Any suggestion??

  • René says:

    Hi all,

    Great plugin, I want to use checkboxes that narrows down my search to one single column or multiple columns.
    As exemple, i have 3 checkboxes one for each column i have in my table.
    If I select 1 of them I want to search only in that column and if I select more 1 then I want that he is search in more colums.

    Can someone tell me how I can do that.

    Greetz

    René

  • astoinov says:

    I have the same problem as @Satheesh. In IE when i delete the text in the filter input the browser is freezing. I found that this is happening when $(table).trigger(“update”); in doFilter() is executed. Can anyone help me with this problem ?

  • Ryan says:

    Have you ever attempted to run the plugin with noConflict()? I’m having issues where the table doesn’t return any data. Thanks for the plugin. :)

  • Maybe I’m being dumb but if I use javascript to update the text of the search box how do I get tablesorter-filter to update the table?

  • Tommaso says:

    Hi, I’ve used you plugin for filter tables. Do you know a code for add and remove rows that works with your plugin?

  • rohit asthana says:

    Hi ,

    First of all this plugin is awesome and save my lot of time…
    I have a question regarding filtering of row in column.

    when i search somthing it filter in row value not from starting element

    for example:

    my table have column : data
    1234
    214
    345
    561

    and so on
    and when i filter and input in textbox like “1″ it will sort like

    1234
    214
    561

    and my need is to sort only from first starting element and result should be

    1234

    only …. please help me out… I am not expert in jquery…what will i do

  • Web Filter says:

    Amazing weblog. Added to Facebook!

  • Wen says:

    Is there a way to filter on columns that are hidden somehow?

  • Robert says:

    Im using the filter with the pager and tablesorter, problem I am running into is, when I add or delete a row, though the cache is changing for tablesorter, the cache is using the original cache and not the updated cache for filter, so Items that I have deleted, and are showing deleted in my tablesorter, and pager, reappear when I start filtering. How do I update Filter cache too. So that it not just using the original Cache.

  • maxxer says:

    hi.
    how can I start the table filtered?
    I want to “hide” some rows.

    I tried setting the value in the input field, and issuing a
    $(“#mytable”).doFilter;
    after applying the tablesorter, but it won’t get executed.

  • todd says:

    I have a function which sums the data from specified columns and places the result into an input box. Works fine when bound to a click event of a button. However, I want the function to fire after tablesorterfiler is done so that it is not necessary to click a button. How can I do this?

  • Jarcikon says:

    The plugin does not work for jQuery 1.4.2. There is an error on line 75:

    var allRows = table.config.cache.row;

    saying table.config.cache is undefined. To fix this, add the following to line 112 of tablesorter.js:

    cache: null,

    Adding this to the this.defaults object initializes the variable and removes the error message.

    • Haddicus says:

      I just wanted to add here, the line numbers are not accurate as to where to insert the values. On my version of tablesorter, the defaults are registered 94->113, so you can insert cache: null, anywhere in this declaration.

      What to look for:

      this.defaults = { ….
      decimal: ‘.’,
      debug: false,
      cache: null, // added cache for undeclared cache issue

      Just wanted to add this note because I had the same issue, but ended up working it out.

  • Venky says:

    I used the filter plugin but it takes a long time in IE(Internet Explorer) if the table rows is LARGER. I have a table with 1200 rows and it takes forever in IE(40 to 50 secs) but works like a charm in firefox and chrome. The culprit is this method $(table).trigger(“update”);.

    Can anybody help me on this?. Is there any specific solution for IE?

  • Michael Bond says:

    Very nice addition to tablesorter. This combined with tablesorter pager makes for a very nice table widget. A couple ideas that might make it even easier to use. One would be populating columns (for column based filtering) from the headers, below is code that I am currently using to accomplish that. The other is providing no results if the column name fails to match any columns rather than defaulting back to using all columns.

    if (!config.columns) {
    config.columns = [];
    $(‘thead th’, this).each(function() {
    var column = $(this).text().trim();
    if (column.length) {
    config.columns.push(column.toLowerCase());
    }
    });
    }

  • Hi Justin,

    I’ve implemented your fantastic filter in one of our backends. Fantastic plugin, many thanks!

    However, i was searching for an automatic search functionality. Since I couldn’t call the function from outside the .js file, i’ve added a line inside the construct (this.construct = function()) and right under “var table = this;”, i called doFilter(table);

    That way, if you have added something to the search/filterbox it will automaticly search for that. And if you don’t have anything filled in, it won’t search. So it’s safe to use! Perhaps you could add it in your version ;-)

    Greetings from the Netherlands!
    Chris

  • Olivier says:

    Hi,

    Great plugin.

    However, it does not work exactly the way I would like.
    Instead of having one field to search over many column, I prefer to have many field and each of them look for the given string in only one column.
    The problem is on the management of the clear buttton.
    I specify the same button for every filter but it only works for the last filter.
    Is there a workaround?

    Greetings from France

  • john says:

    Any chance of anybody out there having merged the altered version of tablesorter 2.0.3 for this with the latest version of tablesorter 2.0.5b?
    We need to use the 2.0.5b version of tablesorter but it would be great to be able to use this filter as well.

    -John

  • Hi,
    first of all: thank you for this awesome plugin.
    I had some trouble though, if i had a table with the columns id1, id2, id3
    and a row that had 111, 222, 333. Now if i did a search for 233, in my case i should not return anything, but since the script “collapses” the columns into one string like this: “111222333″ it found a row. If anybody has the same problem it can be fixed by replacing the search_text object with this:

    var search_text = function() {
    var elem = jQuery(this);
    for(var i=0; i 0 ? elem.find(v) : elem;
    var text = ele.text();
    if (text !== “”) {
    str.push(text);
    }
    });

    return str.join(“%%%”);
    })(jQuery),
    filters[i].words,
    filters[i].caseSensitive) ) {
    return true; // Skip elem and continue to next element
    }
    }
    resultRows[resultRows.length] = elem;
    }

    im pretty sure this is not the best way to do it, but it worked for me, i dont know about any bugs coming because of this (except it will return when you search for % :D), but i hope it can save some time for some of you ;)

    peace out!

    • hmm.. some of the code i posted is missing: ill try again:

      var search_text = function() {
      var elem = jQuery(this);
      for(var i=0; i 0 ? elem.find(v) : elem;
      var text = ele.text();
      if (text !== “”) {
      str.push(text);
      }
      });

      return str.join(“%%%”);
      })(jQuery),
      filters[i].words,
      filters[i].caseSensitive) ) {
      return true; // Skip elem and continue to next element
      }
      }
      resultRows[resultRows.length] = elem;
      }

  • DAGCAN TARAKCI says:

    Great plugin… But does anyone have 2.0.5b version of tablesorter?? if not can author please update it? it would be perfect and make us all very happy…

  • [...] a search box that is uniquely linked to the table becomes an obliged addition to the interface. The TablerSorter Filter addition is the last part of the complete usable table interaction that has to be provided in order [...]

  • [...] a search box that is uniquely linked to the table becomes an obliged addition to the interface. The TablerSorter Filter addition is the last part of the complete usable table interaction that has to be provided in order [...]

  • [...] a search box that is uniquely linked to the table becomes an obliged addition to the interface. The TablerSorter Filter addition is the last part of the complete usable table interaction that has to be provided in order [...]

  • Satya says:

    Filter not working after I disable some of the column header. I used the header {sorter:false} parameter. Is there any workaround for the same.

  • Masaki says:

    Hi,
    I´m very happy with the filter function. Thanks a lot.
    Now I was wondering if is it possible to add a #rows place to write the number of remaining rows of a table after filtered. It would be very usefull.

  • Manthan says:

    Only In IE7 its giving “Out of memory at line 17″ error when no result for search query.
    what to do with this. I am using Jquery 1.6.2.

  • Hiral says:

    Anyone please help me out with one problem.

    I have used filter as combo box with other text boxes and added trigger event but still it does not work. pls help.

    $(document).ready(function(){

    $(“table”)
    .tablesorter({
    widthFixed: true, widgets: ['zebra'],sortList: [[0,0]]})
    .tablesorterFilter(
    {filterContainer: $(“#search_text1″),filterColumns: [0],filterCaseSensitive: false},
    {filterContainer:$(“#search_text2″),filterColumns: [1],filterCaseSensitive: false},
    {filterContainer:$(“#search_combobox1″),filterColumns: [2],filterCaseSensitive: false},
    {filterContainer:$(“#search_combobox2″),filterColumns: [3],filterCaseSensitive: false}
    )
    .tablesorterPager({container: $(“#pager”)});

    $(“#search_combobox1″).trigger(“keyup”);
    });

  • Dave debus says:

    My question is pretty simple I think. How do I get search filter results to show when searching

    ???

    Each of those inputs being in their own table rows.

    Thanks!

  • Dave debus says:

    I won’t let me input code into here, but I’m trying to filter by the value of an input tag. Any help?

  • Mahesh says:

    Great Plugin…!!!!

  • mrm says:

    i would like to have “buttons” for a search. ex klick thist button to find all items regarding history.

    I tried this but i would like to search all rows in the table, not only the items that are shown (im using the tablesorterPager also)

    $(document).ready(function() {

    $(‘#kombi’).click(function() {
    var theTable = $(“#myTable”)
    $.uiTableFilter( theTable, ‘history’);

    });
    });

    This function works but only within the visisble rows, not the whole table…

  • I found your weblog web site on google and check a couple of of your early posts. Proceed to maintain up the excellent operate. I just further up your RSS feed to my MSN News Reader. Looking for ahead to reading extra from you later on!…

  • Roman Kobz says:

    Great Plugin!!! Got it working in 1 min!

  • rubylinux says:

    I am using this plug-in but when I try to filter some text it is not filtering if it is other page … when I go to that page and filter getting the result but it should filter a text from all pages right… Please adivce me in this. Thank you.

  • Rewemgte says:

    What sort of music do you like? http://gimiqocubih.de.tl lollita models sexy ok can this bitch please shut up? that shit is so fucking fake! I had to put techno on to enjoy this flick. Nice dick btw

  • Iquvtjvv says:

    I like watching TV http://gaufysuryyg.de.tl naked nymphets pics That is Lolita from Karups PC. They have a vid where she takes a huge facial. And many, many amazing pics for stroking to.

  • Eahbykgk says:

    I’d like to open a personal account http://ylecyrouipo.de.tl 30 models He talks to much. Dang. He better be good with his tongue cuz he Dont know what the hell he is doing at all.

  • Leave a Reply

    Justin has been obsessing over writing simple Web software using Ruby on Rails since 2007. He's also an entrepreneur and Lean Startup expert. Learn more

    View Justin Britten's profile on LinkedIn

    Subscribe to Justin Britten's blog Follow Justin Britten on Twitter Network with Justin Britten on LinkedIn
     
    Prefinery: Simple, online beta management software'

    Launch a private beta for your Web application in minutes. Prefinery takes care of collecting e-mail addresses, generating invitation codes, and sending invitations for your private beta. Your customers never leave your site, and e-mail invitations are sent from your address.

    Justin is Founder and CEO of Prefinery.