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.js 2.0.3 (modified for tablesorterFilter)
Updated blog post on 1-April-2009 to reflect two additional configuration parameters.
143 Comments to TableSorter: Filter Results Based on Search Query
Leave a Reply
About Justin
Search
Recent Posts
- A Simple Formula for Evaluating Risk
- Not Having a Plan B Makes Plan A More Successful
- Easy Rails API Authentication Using restful-authentication
- God Init.d Script for CentOS
- Private, Authenticated RSS Feeds in Rails
- A Private Web Beta in Seconds with Prefinery
- Backup Your WordPress Blog to Amazon S3 using Ruby
- How to Set an Expires Header in Apache



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.
=O
Many thanks! I did it and all worked perfect!
Thanks :)
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.
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
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
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.
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.
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?
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!
// 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)*/
}
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*/}};
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;
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();
});
});
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.
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});
the function is my need,i wanna filter the rows ,but when the table was paged,the filter is not work well,would you do me a favour?how to solve the problem,thank you! my msn:zhouwenjunstudent@yahoo.com.cn
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;
}
I apologize that I haven’t found the time to integrate the various changes mentioned in the comments. However, you’re welcome to fork my code, make the changes, and send me a pull request to integrate. This is easy since my code is hosted on github.com. Here are some instructions:
1. Form the code and make your changes
http://github.com/guides/fork-a-project-and-submit-your-modifications
2. Send me a pull request to integrate the changes
http://github.com/guides/pull-requests
As for changes to the TableSorter script, I completely agree; however, I’m not the author. I’ve tried contacting the author and requesting the changes get brought in, but this hasn’t happened yet. You’re welcome to contact him also.
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!
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
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
@Nick: I got this error, too. Looks like this is a bug.
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++)
Thanks for this patch! I’ve integrated it into the tablesorter_filter.js plugin.
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
how do the following??
Make your search by selecting the column
Search by Column: Name Major Sex English Japanese Calculus Geometryhttp://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
Search in the selected column in combobox
http://s3.subirimagenes.com/otros/previo/thump_2268473search-column.jpg
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.
nevermind got it
$(“#range-filter-box”).trigger(“keyup”);
I updated the documentation to include your example:
http://github.com/rleonhardt/jquery-tablesorter-filter/tree/master
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.
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;
});
}
==================================================================
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).
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.
Please disregard the last comment. I did not have the latest version.
Would you give the detail of the solution?
Are you experiencing a similar issue? All I did was download the latest version provided by this site.
Even though that resolved stack overflow issue, I’m experiencing a new one.
After entering search text that does not match anything in the table when using tablesorterFilter along with tablesorterPager, the pager allows you to navigate (first, las, prev next) when it should not.
That’s great!I have solved the problem!Thank you!
I am also not getting proper behavior when no rows match the filter. The pager controls are still active from the last filter.
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.
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.
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;
Be sure not to use the original tablesorter.js but the modified one:
http://github.com/jbritten/jquery-tablesorter-filter/tree/master/tablesorter.js
Great, it works now!
You were right, the problem was my existing tablesorter js file (`jquery.tablesorter.min.js`). I cannot tell what version it was that I was using.
Without your code, I probably would have scrapped tablesorter and used http://www.datatables.net/ instead.
Can you please update to the Version that use Jquery UI?
Or tell us the changes made in the original file?
Thanks!!!
Regards, Yann
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?
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);
}
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}
);
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!
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
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`?
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???
I also got this issue. Did you have a solution for this?
Daniel
I am having this same problem and was unable to find the solution posted here. Did you find a solution?
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.
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!
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();
}
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?
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
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];
}
}
//*********************************************************************
the above code should be written in the ‘construct’
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
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.
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.
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)
{
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
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.
Did you find a solution, that is my exact problem
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.
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!
Is it possible to do this?
Filter numbers by >= , = , <= ??
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?
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.
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});
});
Thanks for this plugin…
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!!!
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
Did you find out the solution for this in IE?
Hi,
Is there any way to filter the data on search button click, instead of input box key press events.
Thanks,
Satheesh
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 !
???
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?
I know how to remove from Tablesorter, but I have not been able to remove it from the filter cache, and you figured that out?
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??
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é
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 ?
Did you find out the solution for IE?
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?
.keypress() method (jquery).
Hi, I’ve used you plugin for filter tables. Do you know a code for add and remove rows that works with your plugin?
Did you find an answer.
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
Amazing weblog. Added to Facebook!
Is there a way to filter on columns that are hidden somehow?
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.
Have you found a solution to this problem ?
solved this issue:
http://zuk-one-847.blogspot.com/2011/02/table-sorter-plugin-issues.html
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.
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?
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.
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.
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?
Any body who can help me out here on this?. Came so far in development using this plugin and it looks like a waste of effort now
I am having this problem too. Especially when removing all text in the filterbox, the rendering of the table takes a lot of time. Any idea’s?
Awesome,awesome
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
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
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;
}
Nope didnt work either: sorry for the spam :D
Just remove the comment ;)
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 [...]
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.
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.
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.
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”);
});
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!
I won’t let me input code into here, but I’m trying to filter by the value of an input tag. Any help?
Great Plugin…!!!!
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!…
Great Plugin!!! Got it working in 1 min!
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.
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
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.
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.