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

93 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!

  • 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.

  • 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.

  • 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!

  • 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

     
    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.