An unobtrusive script that adds data filtering capabilities to your HTML tables.
Integrating the filter into the table
There are two ways in which to attach the filter to a table, “embedded“, in which the script creates and adds a new row to the table or “popup“, in which a link is added to the required table headers that show the popup filter when pressed.
The embedded filter
The embedded filter is integrated directly into your table structure. The script will create a new table row (TR) and populate this row with cells (TH), each containing a form and, depending on the type of input method requested for the associated column, either a text input or dropdown list.
As the script creates a new form within each table cell, this method is not compatible with tables that have already been wrapped by a form element.
The Popup filter
This option creates a link within each required table header (TH) which displays the popup filter when pressed. To stipulate that a table should use a popup filter, just add the class popup-filter to the associated table’s className.
Popup filter HTML
The following HTML is created by the script and added to the end of the current document should a popup filter be used:
<div id="fdTablefilterWrapper">
<form ... >
<p><input ... id="fdFilterInp" /></p>
<p><select ... id="fdFilterSel"> ... </select></p>
</form>
<div id="fdtl"></div>
<div id="fdtr"></div>
<div id="fdbl"></div>
<div id="fdbr"></div>
<div id="fdlb"></div>
<div id="fdrb"></div>
<div id="fdbb"></div>
<div id="fdtb"></div>
<div id="fddongle"></div>
</div>
This gives you lots of styling hooks should you wish to restyle the popup filter to better suit your application’s look & feel.
Additionally, a link is added as the first child of each column to filter. This link wrap’s an image whose source is set to be a 1px x 1px transparent gif (that should reside in the same location as the filter script). This enables you to style the “button” states by using only CSS e.g. by changing the background property of the img. The HTML injected into each TH cell is shown below:
<a href="#" class="fdFilterTrigger">
<img src="/the/path/to/the/filter/script/blank.gif" alt="" />
</a>
Have a look at the generic CSS and Internet Explorer specific CSS (integrated using conditional comments) used within the demo in order to see how the button was styled.
Filter Input mechanisms
There are currently two ways in which to input search terms; a text input and a dropdown list.
The dropdown list
The dropdown list is populated by a sorted list of all the unique cell data parsed from the associated column. To stipulate that a column should use a dropdown list, just add the class create-list to the associated TH node’s className.
The text input
The text input enables users to filter the column using bespoke search terms. Additionally, comparison operators can be also be used to strengthen the search term (”>”, “<", ">=”, “<=”, “!” and “=”).
Using the keypress event
Currently, the script will automatically start to filter the column data one second after the last keypress event has fired within the associated text input. This can be disabled for specific columns by adding the class no-keypress-event to the TH node’s className.
Additionally, if the table contains more than 200 rows, this functionality is automatically disabled.
Should you wish to change the default one second timeout to a value of your choice, just call the A.P.I. method fdTableFilter.setKeyDelay, passing in the new value stipulated in milliseconds; for example:
// Set a three second delay for the keypress event
fdTableFilter.setKeyDelay(3000);
Should you wish to change the maximum number of rows the table can contain before the keypress functionality is disabled, call the A.P.I. method fdTableFilter.setMaxRows, passing in an Integer value representing the maximum allowed rowcount; for example:
// Set a maximum rowcount of 300
fdTableFilter.setMaxRows(300);
Column Datatypes
It is necessary to indicate to the script the type of data contained within the column. This is done by adding a class of the format datatype-X to the associated TH node, where X is replaced by the name of the column’s datatype.
The script can currently parse dates (dd-mm-yyyy, mm-dd-yyyy or yyyy-mm-dd formats accepted), currency values (£, $, €, ¥ and ¤), numbers/floats and finally, plain-text. Additionally, the character used as the date divider (i.e. the character that separates the date parts) can be “/”, “-”, “.” or “ “ (space).
The Numeric datatype
Adding the className datatype-numeric to the associated TH node will instruct the script to attempt to parse numeric data from the column’s cells.
The numeric parser bundled with the source code is quite ruthless with the data passed to it. It will replace any character not valid for use within a floating point number and then attempt to parse a float from the result.
This means that the script can be used to filter all manner of numeric column data, for example; columns containing percentages e.g. -22%, 34.6% etc do not require a bespoke parser in order to be filtered – giving the column the className datatype-numeric will suffice.
The Date datatype
The script currently favours the American date format of “mm-dd-yyyy”. This is the first format that all dates are tested against during the data preparation phase, which means that European dates such as 10-08-2006 (i.e. the 10th August 2006) will be parsed as the 8th October 2006.
Should your dates be of the European format “dd-mm-yyyy”, add the class datatype-datedmy to the TH node instead of the class datatype-date, this will tell the script to attempt to parse a DMY format date before attempting to parse a MDY format date.
Plain-text data
If the column contains plain text, just give the associated TH node the className datatype-text.
Bespoke datatypes
Should the data within the column require a bespoke parser, just add a className of the form datatype-X to the associated TH node, where X is replaced by the name of a function the script will attempt to use when preparing the column data; for example, giving the TH node the className datatype-dutchCurrency will instruct the script to call a Javascript function named dutchCurrency in order to parse the cell data.
An example function is shown below:
// A bespoke cell data parser that parses the dutch currency
// format e.g. $100.000,00
function dutchCurrency(tdNode, innerText) {
innerText = parseFloat(innerText.replace(/[^0-9\.,]+/g, "").replace(/\./g,"").replace(",","."));
return innerText;
}
Zebra striping the table rows
Should the table be given the class rowstyle-something, each alternate table row is given the class something after the table has been filtered i.e giving the table a class of rowstyle-alternate will tell the script to give each alternate row the class alternate.
Hiding the filtered table rows
Whenever a table row is hidden by the filter script, it is given the className invisibleRow. This class should be defined within the CSS as shown below:
.invisibleRow {
display:none;
visibility:hidden;
}
Please note: It is necessary to include both the display and visibility properties within the class definition in order to truly hide the row from certain screen-readers.
Clearing all the current filters
To clear all the current filters for a table (i.e. reset the table), you must call the method fdTableFilter.clearFilter(theTableId), passing in the ID of the table to be reset.
Updating the entire table
Should an Ajax update alter the table data, it is necessary to call the method fdTableFilter.prepareTable(theTableId). This will reparse the data and recreate the embedded/popup filter for the table in question.
Filter Commands
The text input filter enables you to enter math-like commands to assist when filtering. A rundown of the commands is listed below:
| Command | Explanation | Example |
|---|---|---|
| > | Show only cells that contain data greater than the search term | > abcd |
| >= | Show only cells that contain data greater than or equal to the search term | >= 1970 |
| < | Show only cells that contain data smaller than the search term | < 13/03/1970 |
| <= | Show only cells that contain data smaller than or equal to the search term | <= abcd |
| = | Show only cells whose data matches the search term | = 01/03/1987 |
| ! | Show only cells whose data does not match the search term | ! abcd |
Callback functions
The script now enables you to specify callback functions for the “create” and “filter” events.
To stipulate a callback function for the “create” event, just add the class callback-create-X to the table’s className; for example, adding the class callback-create-helloWorld will tell the script to call the JavaScript function helloWorld after the filter HTML has been created.
To stipulate a callback function for the “filter” event, just add the class callback-create-X to the table’s className; for example, adding the class callback-filter-helloWorld2 will tell the script to call the JavaScript function helloWorld2 after the filter has been ran on the table.
Stipulating Object.methods as a callback function
Object.methods can be stipulated by converting the “dots” (i.e. the full-stops) to minus signs (-); for example, the className “callback-filter-myObject-myMethod” will tell the script to call the “myMethod” method of the JavaScript Object “myObject” e.g. myObject.myMethod(); whenever the filter event fires.
Callback function data
The “create” callback function is passed the following object as an argument:
{
"tableId":[the table id]
}
The “filter” callback function is passed the following object as an argument:
{
"tableId":[the table id],
"visibleRows":[an array of TR nodes representing the current set of visible rows]
}
Integrating the filter into your HTML.
Just link the script in the HEAD of your (X)HTML document and give the table and TH nodes the required classNames. If using the popup filter, make sure that the “blank.gif” image resides in the same directory as the tablefilter script.
The License
The script is released under a creative commons Attribution-Share Alike 3.0 Unported license. Should you use the script within a commercial context please think about clicking the payPal donate button – it’s certainly not an obligation but it would most certainly put a smile on my face. If you need a dual license, just ask me politely.
Demo, downloads and updates
View the table filter demo or download the 55k uncompressed source code or the 22k YUI minified source code
Tested in Internet Explorer 6 & 7, Opera 9.01, Safari 3.1 (Windows) and Firefox 3.
20/03/2009 (v2.1):
- Added code that dynamically updates selectList filters to show only visible data
21/10/2008 (v2.0):
- Fixed the 10th column bug
- Added the “create” and “filter” callbacks
- Added the keypress event code and the A.P.I. methods to change the default values
- Created a YUI minified version of the script
04/04/2008 (v1.2):
- Added the “clearFilter” method
03/04/2008 (v1.1):
- The embedded filter can now be used within tables that have no THEAD
07/01/2008 (v1.0):
- First release
Previous Comments ~
Keep getting error:
Index or size is negative or greater than the allowed amount” code: “1
Line 0
@ Jim: Hi Jim, as I say, it’s “terribly beta”... what browser are you using? Can you post a link to the page in question?
Thanks,
Brian
Both in FF and IE.
Best I can get is line 844, fdTableFilter.fdScriptFiles[...].src is null or not an object.
That is from IE.
FF errror only shows Index or size is negative or greater than the allowed amount” code: “1.
HTH
D%&m your stuff is good!
I am just getting my grid to paginate and sort. Wanted to add a search or filter of some sort (no pun intended). Have 925 records and sorting is
http://wholesale.sigels.com/content/view/13/12/Libby-glassware.html
1st and foremost..Superb Job FD!!!
2 Inquiries
1st: Is there a way to reset (or filter) the table to show/unhide all rows? Right now, if you give focus to an empty text-input filter and hit enter on the keyboard, the table will reset and show all hidden rows. I want to make it a tad clearer to the users that they can accomplish this (resetting the table that is). Much in the same way you have allowed us to sort column data using external javascript buttons.
I figured this would be handled by the filter.js as opposed to the sort.js. Is there a method/function you have already built -in the javascript that can be called to accomplish this…if not how would I go about creating one? Or would it be a combination of the JS and CSS...perhaps an .invisibleRow equivalent :
tr.showallRows { display:inline; visibility:visible; }
———————
2nd – Is there also a way to pre-populate text-inputs (and maybe even the drop down boxes) with a value. Say…like the word “filter,” so again it is clear to users that row under the table header is used to filter column data. Of course this value of would not have to be an actual column value. Its just for clarity in directing the flock. I am using the embedded filter if that isn’t obvious at this point.
Many thanks in advance…Also can I get a pint of Cherry Kool-Aid in the virtual keg, I a little wet behind the ears. :o)
@ Jim: hi Jim, in fact, I broke the first rule of web development and assumed that people would be including the script within the head of the HTML document (never, ever assume!). To remove the error, just change the line (located at the end of the file):
fdTableFilter.fdScriptFiles = document.getElementsByTagName(“head”)[0].getElementsByTagName(‘script’);
to:
fdTableFilter.fdScriptFiles = document.getElementsByTagName(‘script’);
@ Ty Nichols: Hi Ty, in fact, that’s two things I didn’t think about when writing the script. I’ll try to integrate the functionality into a new version this week.
Thanks for the input guys, much appreciated.
Regards,
Brian.
Now I get an error:
illegal character
http://wholesale.sigels.com/modules/mod_dbdisplay_ext/js/tablefilter.js
Line 842
fdTableFilter.fdScriptFiles = document.getElementsByTagName(‘script’);\n
But there is no newline there??
BTW – this is in a module inside the Joomla CMS so there is a lot going on. But I have no idea where the error of a newline is coming from.
Thanks so much.
J.
@ Jim: Hi Jim, I’m guessing that you copy/pasted the corrected line from the comment itself. This means that the quote character has been textiled (and turned into a more typographically correct curly quote character) – try changing the curly quotes to straight quotes and it should work.
no joy<sigh>
still same error. Must have to do with something in the page itself that it is picking up. I’ll try to get to it today and look – have to work on getting the rest of the grid and lightbox working. Thanks so much…
I just modified the line in the js itself. (forgot the document. the first time).
Working within the framework can be a little challenging because the operating system (Joomla) has so much going on and we can’t always get the stuff in the header but I’ll try that next. When i get this running I’d like to talk to you about incorporating this into the Joomla components and modules for others in the OS CMS to use. This is a great set of grid functions, and fast too.
Put everything in the header, now get following error:
tbl.getElementsByTagName(“thead”)[0] has no properties
http://wholesale.sigels.com/modules/mod_dbdisplay_ext/js/tablefilter.js
Line 265
Thanks
J.
I love your scripts.
I have used the tablesort script for a while now. I had to do a lot of “hacking” to get it to handle the data. I had to build a datetime sort function because the built in date function didn’t handle any javascript. i.e. anything that came be passed to the Date() function. As well, if I didn’t specify a datatype on the th and the data had characters like ‘$’ or ‘%’ it defaulted to sorting it as text.
Will I need to modify this filter script in a similar manner or will the modifications made to the tablesort also work with the filter script.
@ Jim: Hi Jim, your table doesn’t have a thead (which the script requires at this early iteration). I’ve fixed it for the next version (which I’ll try to upload today).
@ Jonathan: Hi Jonathan, you shouldn’t need to hack the script at all as you can extend it with custom sort functions. As for the text sorting, as the “%” and “$” characters aren’t part of a valid date, the script defaults to the text sort.
Basically, all you need to do is write a custom sort function (that can most probably be used for both scripts). There’s lots of custom sort examples to base your verson on.
Brian,
I had another epiphany about the filter table around 4am yesterday morning that may enhance its functionality and all around “bad-assness.” Is there a way to consilidate the drop-down list values so that multiple instances of equivalent values in a column appear only once?
An example (embedded filter table):
If I have a column that utilizes a drop-down list and has the following values [Cheese | Meat | Pickle | Cheese]
Is there way to consolidate those values in the drop down list so that when a user clicks the drop down list for that column it displays [Cheese | Meat | Pickle] , as opposed to [Cheese | Meat | Pickle | Cheese], despite the fact that there are actually 2 [Cheese] values displayed in that column?
I am proposing this because the column I am using has potentially hundreds of rows that share the same value for the column in question. Which means the drop down list for said column is displaying:
[Cheese] x (1 gazillion) in the drop down-list
Which is just a waste of virtual ink in my opinion.
I hope this all makes sense…
In Awe,
Ty
PS – Any luck adding reset functionality?
@ Ty: Hi Ty, in fact, the script already calculates a unique data set like that – as for the reset, I wanted to do it this afternoon but a rather large bug has been found in an internal application and I have to fix it today so (most probably), I won’t get the time to work on the reset code…
@ Ty: Hi again Ty, well, the bug was a sinch to fix and so I had time to write the clearFilter method.
Regards,
Brian
@ Ty: Hi again Ty, well, the bug was a sinch to fix and so I had time to write the clearFilter method.
Regards,
Brian
Ahhhh Brian!!! You are correct, it does calculate a unique data set. The reason I was thrown off was because my table’s column contains genres of music (no, not hamburger accessories). So values with special characters ( – , & , etc.) are not “valid” for the calculation. So my “R&B” and “Hip-Hop” string values are not being parsed correctly. My apologies, a simple look at the drop-down list and comparison to my column data would have yielded this earlier, before my cheesy and voidable post. I owe you a virtual pint. No worries, I will just not use any special characters.
Great job on fixing your bug quickly and generating the clearFilter method!!! Exactly what I needed.
Implicitly Impressed,
Ty
Awesome, excellent work!
I’m trying to incorporate the filter script via drop downs and checkboxes outside of the table. The checkboxes are ‘hardwired with filter options for pre-targeted columns. I’m having trouble integrating that method with your solution. Can you give an example of a static, ‘only show this’, filter? Can the dropdowns exist outside of the table?
@ Geordie: Hi Geordie, I’d need to see your code to see exactly what your trying to do with the “hardwired” filter. Unfortunately, this version of the script will only create the dropDowns within the table.
Hello,
well, I was trying to figure out how to use your ‘simulated filter’ example, since it exists in its own form. Essentially, using that form as an example, lets say you wanted to filter out ‘Batman Begins’ from column Movie, and ‘Batman Begins’ is either the name or value of a form’s checkbox and when I click the submit button, the filter would be applied.
Can that be achieved? I don’t want to clog up your comment list with a bunch of code.
Thanks so much!
Hi,
I have to congratulate you on such a wonderful script; does what it says on the tin. Also, the table sorter script is also another work of art; truly fantastic.
You have saved me many hours of typing and frustration with this script.
I am struggling to get it working on one of my pages where the form needs to have a “name” attribute in. This is only happening in IE6 (suprise, suprise). I believe it is causing the script to not work properly (as I don’t get the filter input boxes being written into the page along with a JS error). It does work in Firefox though.
Any idea how I can modify the script to work with a form with a “name” attribute in in IE6?
Thanks in advance.
PS – I have also left out any code here so as not to clog up the page but I can provide it if it helps. To recreate the issue, take a working page and give the form a valid “name” attribute.
hello
very nice script, but i need to put one last row “totals” based on the filtered “numeric” columns. any ideas ?
@ Gordie: Hi Gordie, it should be possible by using a bespoke parser (check out the demo parser within the article). Parsers are passed the actual TD node as an argument so you could just return the checkbox value e.g. tdNode.getElementsByTagName(“input”)[0].value
@ ADPD: Hi ADPD, have you given the form an ID attribute that is different than the name attribute? i.e. id=“hello” name=“world”
@ Peter: Hi Peter, the script currently doesn’t include post-filter callback functionality – something I’ll have to integrate into the next version. This would allow you to scan the table for visible rows and calculate the total correctly.
First of all, these lab scripts of yours are excellent. Very polished and complete.
I’m attempting to build a user script which will allow the user to sort/filter any data table on any Web page using your Table Sort and Table Filter scripts. It’s pretty functional at the moment, but I’m having some trouble with the default embedded filter method. After entering a value to sort by and pressing enter, it just refreshes the page rather than actually sorting, leading me to believe it’s some king of issue with preventing the default form action. Oddly enough, when I use the popup filter input, it works fine. I’ve tried to debug the problem, but there’s a lot of code to look through. Any light you could cast on the problem would be great.
@ Dylan: Hi Dylan, can you send me a link to the page in question? Thanks – frequency.decoder at google’s email app…
Quote: @ ADPD: Hi ADPD, have you given the form an ID attribute that is different than the name attribute? i.e. id=“hello” name=“world”
Yes; your comment prompted me to revisit the code.
The name I was using for the form was “f”. It disliked this single letter as the form name. Changing it to something longer (e.g. “ff”) seems to solve the issue.
I will dig around to see why this is the case (as the name=“f” was unique, only appearing once in the code).
Thanks for taking the time to support such a wonderful piece of code.
Hi,
I have a table (id=“resultsTable”) inside an iframe (id=“iframe1” name=“iframe1”) on my site. The filter is working beautifully on this table.
I’d like to know if I could have the “Clear All Filters” button in the parent document, working on the table inside the iframe.
I have hacked around a bit, all to no avail.
Any ideas would be greatly appreciated.
I think what I was trying to do was simple; I just had some other JavaScript interfering with it.
The code I have used is as such:
Clear Filters
Obviously, substitute FRAME-NAME for the name of your frame, and TABLE-ID for your table ID.
A final thanks for such a tremendous piece of code; it has added so much value to the application I have integrated it into.
Well I didn’t like the idea of people having to hit enter to submit the form after changing the data (the old men I’m setting this up for wouldn’t quite understand.
SO I did this:
at line 269
(just under “formC.onsubmit = fdTableFilter.embeddedFilter;”)
I added:
inpC.onkeyup = fdTableFilter.embeddedFilter;
then at line 362:
I removed:
fdTableFilter.filterData = this.tagName == “FORM” ? this.getElementsByTagName(“input”)[0].value : this.options[this.selectedIndex].value;
I added:
switch (this.tagName) { case ‘FORM’: fdTableFilter.filterData = this.getElementsByTagName(“input”)[0].value; break; case ‘INPUT’: fdTableFilter.filterData = this.value; break; default: fdTableFilter.filterData = this.options[this.selectedIndex].value; break; }
seems to work wonderfully! i have a 100 row table, i could try a bigger one, but this works nice and fast. it’s much more intuitive than pressing enter.
It’d be very easy to make it configurable with a class name
thaks my frend.
this code works awesome!
could you fix it to launch 3 seconds after the last keypress, because on a large table it lags too bad
you can do that yourself, just don’t be afraid to break it, after all there’s always ‘undo’
however I wouldn’t say you can have it do it 3 seconds after the last keypress, because how is the javascript to know that your last keypress is infact your last keypress
you could just have it start the process 3 seconds after A keypress like this (i think)
inpC.onkeyup = setTimeout(‘fdTableFilter.embeddedFilter’,3000);
however, i have other problem now, that is the filter isnt working in the 10-th column ? anyone know how 2 fix this ?
@ James Murray: Hi James, I’ve integrated the keypress idea into the next version of the script (and also fixed the 10th column bug amongst other things). I’ll release it this week at some point. thanks again for the idea.
@ CCC/DDD: Please try to use your real name when commenting.
@J.M. “quote“inpC.onkeyup = setTimeout(‘fdTableFilter.embeddedFilter’,3000);
the problem is that embeddedFilter uses “this” object. when embeddedFilter is called from the timer, “this” object is not what the function embeddedFilter expects.
the first line of embeddedFilter :
var parts = this.id.replace(/^form-/, “”).split(”-”); /* here i get “this.id is not an object” when i call it from timer */
Update by f.d: Hi, I'm updating with a new version this week that has the keypress functionality you require.
First off, excellent script.
I was trying to integrate it into an XML/XSLT page and Firefox was having an issue with it. Apparently, in XML mode, tag names in FF are lower case. I had to change the first comparison in line 127 to
cel.tagName.toUpperCase() == “TH”Hope this helps anyone trying to get this to work in XML.
@Charles Chang: Hi Charles, glad you find the script helpfull & thanks for the fix. I’ll update the source this week.
Regards,
Brian.
Hi
I’m using your tablesort script and pagination; I hadn’t seen this filtering script at the time so I wrote my own (I needed something much simpler anyway ..)
I was wondering, I have tags in the cells, like in
visibleand my script sucks there as it tries to match the whole sentence – including the index.php and all; is there any smart way to handle this ? does your script handle this correctly ?
sorry this is confusing; I can’t get textile to work as expected
Anyways, what I’m trying to say was, the contents of the ‘td’ element is itself an ‘a’ tag with the ‘href’ text being fed into the pattern-matcher; I’d like to find a clean means to compute what’s exactly visible in the ‘td’ element.
On line 772 I had to add the following code:
if (typeof e != ‘string’){ return;
}
I don’t know if it was a problem with firefox, or something else, but after the script would loop through each of the chars (defined under the escape funtion) it’d then try to escape something else (i don’t know what or how, but the e parameter of the escape function had the value of a function!?)
anyway the keypress didn’t work in firefox until I changed that. Maybe it’s because I’m using prototype and the chars is an array. Since prototype does extend arrays and such, I’m sure that’s what was happening.
Hello, i am using popup-filter to filter table.
If i filtered two times, in the tree column, why combobox show all records instead only records passed two first filters.
Thank you
Hi,
Since my update today to IE8 i started to notice the following error in the script when using the pulldown filter on a table:
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.2; WOW64; Trident/4.0; GTB6; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30)
Timestamp: Thu, 19 Mar 2009 21:13:19 UTC
Message: Object doesn’t support this property or method
Line: 604
Char: 17
Code: 0
URI: http://v2.typhoongroup.eu/js/tableFilter.js
which actually is : if(“tablePaginater” in window && tablePaginater.tableIsPaginated(currentTableId)) {
any idea what might be happening? To bad i cant show you the page cause its on an intranet. Oh, and before i forget i;m running in IE8 compat. mode. Please make some suggestions
@ Thierry: Hi Thierry, you can write a bespoke cell parser. See the section “Bespoke datatypes” for more info and an example of how to do it.
@ James Murray: Hi James, prototype (used to) be a bitch in this respect. Newer versions have stopped extending Object prototypes etc so the problem shouldn’t persist.
@ David: Hi David,
that would require a nasty amount of extra code to achieve and I don’t have the time to do it at the minute. Sorry (well spotted though!)Update by f.d: Hi again David, I've updated the code to dynamically recreate the selectlists so that they only contain the non-filtered data. I haven't tested it very much so fingers crossed I didn't break anything!
@ Bas: Hi Bas, have you downloaded the latest pagination script?
Can someone demonstrate (using javascript) how I can open an Excel spreadsheet (xls) or a CSV file and then use tablefilter.js to filter it?
Hi I really like your script,and I think that your work is awesome,but i need some help,i want to use your script for an table wich is taken from an Mysql database,but unfortunately my JS knowledge is very low.Thanks
Hello,
Thank you for your great and impressive job!
Is there a way to display the table already filtered with some ‘default’ values?
For example, I have a column with 3 possible values (Planned, Ongoing, Done) and I don’t want the ‘Done’ rows displayed at first time.
They should be displayed only if ‘Clear all filters’ button is pressed.
Thanks in advance.
Great work, I was searching for something like this.
I have only one question How can i make with this table one filter input that looks in every column of the table
Update by f.d: Hi Wesley, the short and painful answer is that you can't. The script requires one input per column. The less painful response is that the script is open source so feel free to hack it to use just one input to complete a full table scan.
Hi!
Any chance that I have an answer to my question of May 29?
Thanks in advance.
Update by f.d: Hi Eric, it's currently not possible to pre-populate the filters. Apologies.
Too bad!
Thanks for your answer.
Is it possible to start of with an empty list so that you will only find your searchresults and never be bothered with all of the options