2013-02-17 19:23:36 +00:00
<!DOCTYPE html>
2011-09-13 22:55:31 +00:00
< html >
< head >
2013-02-17 19:23:36 +00:00
< meta charset = "utf-8" >
2011-09-13 22:55:31 +00:00
< title > jQuery plugin: Tablesorter 2.0 - Filter Widget< / title >
<!-- jQuery -->
2012-09-27 19:57:19 +00:00
< script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js" > < / script >
2011-09-13 22:55:31 +00:00
<!-- Demo stuff -->
2012-09-27 19:57:19 +00:00
< link class = "ui-theme" rel = "stylesheet" href = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css" >
< script src = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/jquery-ui.min.js" > < / script >
2011-09-13 22:55:31 +00:00
< link rel = "stylesheet" href = "css/jq.css" >
2013-01-26 15:21:13 +00:00
< link href = "css/prettify.css" rel = "stylesheet" >
< script src = "js/prettify.js" > < / script >
2011-09-13 22:55:31 +00:00
< script src = "js/docs.js" > < / script >
<!-- Tablesorter: required -->
2012-09-27 19:57:19 +00:00
< link rel = "stylesheet" href = "../css/theme.blue.css" >
2011-09-13 22:55:31 +00:00
< script src = "../js/jquery.tablesorter.js" > < / script >
< script src = "../js/jquery.tablesorter.widgets.js" > < / script >
2012-09-27 19:57:19 +00:00
< script >
$(function(){
$('.accordion').accordion({
autoHeight: false,
collapsible : true
});
});
< / script >
2011-09-13 22:55:31 +00:00
2012-09-27 19:57:19 +00:00
< script id = "js" > $ ( f u n c t i o n ( ) {
2011-09-13 22:55:31 +00:00
// call the tablesorter plugin
2013-02-17 19:23:36 +00:00
$("table.tablesorter").tablesorter({
2012-09-27 19:57:19 +00:00
theme: 'blue',
// hidden filter input/selects will resize the columns, so try to minimize the change
widthFixed : true,
2012-03-07 18:06:35 +00:00
2011-09-13 22:55:31 +00:00
// initialize zebra striping and filter widgets
2011-09-16 18:39:03 +00:00
widgets: ["zebra", "filter"],
2012-03-07 18:06:35 +00:00
2012-06-01 14:49:46 +00:00
// headers: { 5: { sorter: false, filter: false } },
2012-03-07 18:06:35 +00:00
widgetOptions : {
2012-05-23 17:11:30 +00:00
// If there are child rows in the table (rows with class name from "cssChildRow" option)
2012-03-07 18:06:35 +00:00
// and this option is true and a match is found anywhere in the child row, then it will make that row
// visible; default is false
filter_childRows : false,
2012-09-27 19:57:19 +00:00
// if true, a filter will be added to the top of each table column;
// disabled by using -> headers: { 1: { filter: false } } OR add class="filter-false"
// if you set this to false, make sure you perform a search using the second method below
filter_columnFilters : true,
// css class applied to the table row containing the filters & the inputs within that row
filter_cssFilter : 'tablesorter-filter',
// add custom filter functions using this option
// see the filter widget custom demo for more specifics on how to use this option
filter_functions : null,
// if true, filters are collapsed initially, but can be revealed by hovering over the grey bar immediately
// below the header row. Additionally, tabbing through the document will open the filter row when an input gets focus
filter_hideFilters : true,
2012-05-23 17:11:30 +00:00
// Set this option to false to make the searches case sensitive
filter_ignoreCase : true,
2012-09-27 19:57:19 +00:00
// jQuery selector string of an element used to reset the filters
filter_reset : 'button.reset',
2012-05-23 17:11:30 +00:00
// Delay in milliseconds before the filter widget starts searching; This option prevents searching for
// every character while typing and should make searching large tables faster.
2012-06-01 14:49:46 +00:00
filter_searchDelay : 300,
2012-03-07 18:06:35 +00:00
2012-09-27 19:57:19 +00:00
// Set this option to true to use the filter to find text from the start of the column
// So typing in "a" will find "albert" but not "frank", both have a's; default is false
filter_startsWith : false,
// Filter using parsed content for ALL columns
// be careful on using this on date columns as the date is parsed and stored as time in seconds
filter_useParsedData : false
2012-03-07 18:06:35 +00:00
2012-06-01 14:49:46 +00:00
}
2012-09-27 19:57:19 +00:00
});
// External search
// buttons set up like this:
// < button class = "search" data-filter-column = "4" data-filter-text = "2?%" > Saved Search< / button >
$('button.search').click(function(){
/*** first method *** data-filter-column="1" data-filter-text="!son"
add search value to Discount column (zero based index) input */
2013-02-17 19:23:36 +00:00
var filters = $('table.tablesorter').find('input.tablesorter-filter'),
2012-09-27 19:57:19 +00:00
col = $(this).data('filter-column'), // zero-based index
txt = $(this).data('filter-text'); // text to add to filter
filters.val(''); // clear all filters
filters.eq(col).val(txt).trigger('search', false);
/*** second method ***
this method bypasses the filter inputs, so the "filter_columnFilters"
option can be set to false (no column filters showing)
******/
/*
var columns = [];
columns[4] = '2?%'; // or define the array this way [ '', '', '', '2?%' ]
$('table').trigger('search', [columns]);
*/
2011-09-13 22:55:31 +00:00
});
});< / script >
2012-03-07 18:06:35 +00:00
< script >
$(function(){
2012-09-27 19:57:19 +00:00
2012-03-08 13:29:24 +00:00
// *** widgetfilter_startsWith toggle button ***
2012-03-07 18:06:35 +00:00
$('button.toggle').click(function(){
2013-02-17 19:23:36 +00:00
var c = $('table.tablesorter')[0].config,
2012-03-07 18:06:35 +00:00
// toggle the boolean
2012-05-23 17:11:30 +00:00
fsw = !c.widgetOptions.filter_startsWith,
fic = !c.widgetOptions.filter_ignoreCase;
if ($(this).hasClass('fsw')) {
c.widgetOptions.filter_startsWith = fsw;
$('#start').html(fsw.toString());
} else {
c.widgetOptions.filter_ignoreCase = fic;
$('#case').html(fic.toString());
}
// update search after option change; add false to trigger to skip search delay
2013-02-17 19:23:36 +00:00
$('table.tablesorter').trigger('search', false);
2012-03-07 18:06:35 +00:00
});
2012-09-27 19:57:19 +00:00
2012-03-07 18:06:35 +00:00
});
< / script >
2011-09-13 22:55:31 +00:00
< / head >
< body >
< div id = "banner" >
< h1 > table< em > sorter< / em > < / h1 >
< h2 > Filter Widget< / h2 >
< h3 > Flexible client-side table sorting< / h3 >
< a href = "index.html" > Back to documentation< / a >
< / div >
< div id = "main" >
2012-09-27 19:57:19 +00:00
< p > < / p >
< br >
< div class = "accordion" >
< h3 > < a href = "#" > Notes< / a > < / h3 >
< div >
< ul >
< li > Hover over the grey bar below the table header to open the filter row. Disable this by setting < code > filter_hideFilters< / code > option to < code > false< / code > .< / li >
< li > This widget uses jQuery's < code > .nextUntil()< / code > function which is only available is jQuery version 1.4+.< / li >
< li > This widget does work with tablesorter v2.0.5.< / li >
2013-02-17 19:23:36 +00:00
< li > Using the filters:
< table class = "tablesorter-blue" >
< thead > < tr > < th > Type< / th > < td > Description< / th > < th > Example< / th > < / tr > < / thead >
< tbody >
< tr > < td class = "center" > text< / td > < td > Any text entered in the filter will < strong > match< / strong > text found within the column< / td > < td > < code > abc< / code > (finds "abc", "abcd", "abcde", etc)< / td > < / tr >
< tr > < td class = "center" > < code > "< / code > < / td > < td > To exactly match the search query, add a quote, apostrophe or equal sign to the beginning and/or end of the query< / td > < td > < code > abc"< / code > or < code > abc=< / code > (exactly match "abc")< / td > < / tr >
< tr > < td class = "center" > < code > ?< / code > < / td > < td > Wildcard for a single, non-space character.< / td > < td > < code > J?n< / code > (finds "Jan" and "Jun", but not "Joan")< / td > < / tr >
< tr > < td class = "center" > < code > *< / code > < / td > < td > Wildcard for none, or multiple non-space characters.< / td > < td > < code > B*k< / code > (matches "Black" and "Book")< / td > < / tr >
< tr > < td class = "center" > < code > /\d/< / code > < / td > < td > Add any regex to the query to use in the query< / td > < td > < code > /b[aeiou]g/i< / code > (finds "bag", "beg", "BIG", "Bug", etc)< / td > < / tr >
< tr > < td class = "center" > < code > < < = > = > < / code > < / td > < td > Find alphabetical or numerical values less than or greater than or equal to the filtered query< / td > < td > < code > > = 10< / code > (find values greater than or equal to 10)< / td > < / tr >
< tr > < td class = "center" > < code > !< / code > < / td > < td > Not operator. Filter the column with content that < strong > do not< / strong > match the query.< / td > < td > < code > !fe< / code > (hide rows with "female" in that column, but shows rows with "male")< / td > < / tr >
< tr > < td class = "center" > < code > && < / code > or < code > AND < / code > < / td > < td > Logical "and". Filter the column for content that matches text from either side of the operator.< / td > < td > < code > box & & bat< / code > (matches a column cell that contains both "box" and "bat")< / td > < / tr >
< tr > < td class = "center" > < code > |< / code > or < code > OR < / code > < / td > < td > Logical "or" (Vertical bar). Filter the column for content that matches text from either side of the bar.< / td > < td > < code > box|bat< / code > (matches a column cell with either "box" or "bat")< / td > < / tr >
< tr > < td class = "center" > < code > - < / code > or < code > to < / code > < / td > < td > Find a range of values. Make sure there is a space before and after the dash (or the word "to").< / td > < td > < code > 10 - 30< / code > or < code > 10 to 30< / code > (match values between 10 and 30)< / td > < / tr >
< / tbody >
< / table >
* Note: You cannot combine these operators with each other (except for the wildcards).
< / li >
2012-09-27 19:57:19 +00:00
< / ul >
< / div >
< h3 > < a href = "#" > Options< / a > < / h3 >
< div >
< h3 > Filter widget defaults (added inside of tablesorter < code > widgetOptions< / code > )< / h3 >
< ul >
< li > < code > filter_childRows : false< / code > - if true, filter includes child row content in the search.< / li >
< li > < code > filter_columnFilters : true< / code > - if true, a filter will be added to the top of each table column.< / li >
< li > < code > filter_cssFilter : 'tablesorter-filter'< / code > - css class name added to the filter row & each input in the row.< / li >
< li > < code > filter_functions : null< / code > - add custom filter functions using this option.< / li >
< li > < code > filter_hideFilters : false< / code > - if true, filters are hidden initially, but can be revealed by clicking on the filter icon.< / li >
< li > < code > filter_ignoreCase : true< / code > - if true, make all searches case-insensitive.< / li >
< li > < code > filter_reset : null< / code > - jQuery selector string of an element used to reset the filters.< / li >
< li > < code > filter_searchDelay : 300< / code > - typing delay in milliseconds before starting a search.< / li >
< li > < code > filter_startsWith : false< / code > - if true, filter start from the beginning of the cell contents.< / li >
< li > < code > filter_useParsedData : false< / code > - filter all data using parsed content.< / li >
2013-01-26 15:21:13 +00:00
< li > < code > filter_serversideFiltering : false< / code > - if true, server-side filtering should be performed because client-side filtering will be disabled, but the ui and events will still be used.< / li >
2012-09-27 19:57:19 +00:00
< / ul >
< / div >
< h3 > < a href = "#" > Classes< / a > < / h3 >
< div >
< ul >
< li > < code > filter-false< / code > - disable the filter for a specific header column.< / li >
< li > < code > filter-select< / code > - build a default select box for a column (shows unique column content). See the < a href = "example-widget-filter-custom.html" > custom filter widget< / a > demo for an example.< / li >
< li > < code > filter-match< / code > - only applies to "filter-select" columns. Makes the select match the column contents instead of exactly matching.< / li >
< li > < code > filter-parsed< / code > - set a column to filter through parsed data instead of the actual table cell content.< / li >
< / ul >
< / div >
< h3 > < a href = "#" > Changes< / a > < / h3 >
< div class = "inner" >
2013-01-26 15:21:13 +00:00
< p > Moved to the wiki pages - < a href = "https://github.com/Mottie/tablesorter/wiki/Change3" > filter change log< / a > .
2012-09-27 19:57:19 +00:00
< / div >
< / div >
2011-09-13 22:55:31 +00:00
< h1 > Demo< / h1 >
2012-05-23 17:11:30 +00:00
< button class = "toggle fsw" > Toggle< / button > filter_startsWith : < span id = "start" > false< / span > (if true, search from beginning of cell content only)< br >
< button class = "toggle fic" > Toggle< / button > filter_ignoreCase : < span id = "case" > true< / span > (if false, the search will be case sensitive)
2012-09-27 19:57:19 +00:00
< hr >
2012-05-23 17:11:30 +00:00
2012-09-27 19:57:19 +00:00
< div id = "demo" >
< button class = "search" data-filter-column = "5" data-filter-text = "2?%" > Saved Search< / button > (search the Discount column for "2?%")< br >
< button class = "reset" > Reset Search< / button > <!-- targetted by the "filter_reset" option -->
< table class = "tablesorter" >
2011-09-13 22:55:31 +00:00
< thead >
< tr >
2012-09-27 19:57:19 +00:00
< th data-placeholder = "" class = "filter-false" > Rank< / th >
< th data-placeholder = "Try B*{space}" > First Name< / th >
< th data-placeholder = "Try <d" > Last Name< / th >
< th data-placeholder = "Try >=33" > Age< / th >
< th data-placeholder = "Try <9.99" > Total< / th >
< th data-placeholder = "Try 2?%" > Discount< / th > <!-- add class="filter - false" to disable the filter in this column -->
2012-06-01 14:49:46 +00:00
< th data-placeholder = "Try /20[^0]\d/" > Date< / th >
2011-09-13 22:55:31 +00:00
< / tr >
< / thead >
< tbody >
< tr >
2012-09-27 19:57:19 +00:00
< td > 1< / td >
2012-06-01 14:49:46 +00:00
< td > Philip Aaron< / td >
< td > Johnson Sr Esq< / td >
2011-09-13 22:55:31 +00:00
< td > 25< / td >
< td > $5.95< / td >
< td > 22%< / td >
< td > Jun 26, 2004 7:22 AM< / td >
< / tr >
< tr >
2012-09-27 19:57:19 +00:00
< td > 11< / td >
2011-09-13 22:55:31 +00:00
< td > Aaron< / td >
< td > Hibert< / td >
< td > 12< / td >
< td > $2.99< / td >
< td > 5%< / td >
< td > Aug 21, 2009 12:21 PM< / td >
< / tr >
< tr >
2012-09-27 19:57:19 +00:00
< td > 12< / td >
2012-06-01 14:49:46 +00:00
< td > Brandon Clark< / td >
2012-05-23 17:11:30 +00:00
< td > Henry Jr< / td >
2011-09-13 22:55:31 +00:00
< td > 51< / td >
< td > $42.29< / td >
< td > 18%< / td >
< td > Oct 13, 2000 1:15 PM< / td >
< / tr >
< tr >
2012-09-27 19:57:19 +00:00
< td > 111< / td >
2011-09-13 22:55:31 +00:00
< td > Peter< / td >
< td > Parker< / td >
< td > 28< / td >
< td > $9.99< / td >
< td > 20%< / td >
< td > Jul 6, 2006 8:14 AM< / td >
< / tr >
< tr >
2012-09-27 19:57:19 +00:00
< td > 21< / td >
2011-09-13 22:55:31 +00:00
< td > John< / td >
< td > Hood< / td >
< td > 33< / td >
< td > $19.99< / td >
< td > 25%< / td >
< td > Dec 10, 2002 5:14 AM< / td >
< / tr >
< tr >
2012-09-27 19:57:19 +00:00
< td > 013< / td >
2011-09-13 22:55:31 +00:00
< td > Clark< / td >
2012-05-23 17:11:30 +00:00
< td > Kent Sr.< / td >
2011-09-13 22:55:31 +00:00
< td > 18< / td >
< td > $15.89< / td >
< td > 44%< / td >
< td > Jan 12, 2003 11:14 AM< / td >
< / tr >
< tr >
2012-09-27 19:57:19 +00:00
< td > 005< / td >
2011-09-13 22:55:31 +00:00
< td > Bruce< / td >
2012-05-23 17:11:30 +00:00
< td > Almighty Esq< / td >
2011-09-13 22:55:31 +00:00
< td > 45< / td >
< td > $153.19< / td >
< td > 44%< / td >
2012-06-01 14:49:46 +00:00
< td > Jan 18, 2021 9:12 AM< / td >
2011-09-13 22:55:31 +00:00
< / tr >
2012-05-23 17:11:30 +00:00
< tr >
2012-09-27 19:57:19 +00:00
< td > 10< / td >
2012-05-23 17:11:30 +00:00
< td > Alex< / td >
< td > Dumass< / td >
< td > 13< / td >
< td > $5.29< / td >
2012-06-01 14:49:46 +00:00
< td > 4%< / td >
2012-05-23 17:11:30 +00:00
< td > Jan 8, 2012 5:11 PM< / td >
< / tr >
< tr >
2012-09-27 19:57:19 +00:00
< td > 16< / td >
2012-05-23 17:11:30 +00:00
< td > Jim< / td >
< td > Franco< / td >
< td > 24< / td >
< td > $14.19< / td >
< td > 14%< / td >
< td > Jan 14, 2004 11:23 AM< / td >
< / tr >
2011-09-13 22:55:31 +00:00
< tr >
2012-09-27 19:57:19 +00:00
< td > 166< / td >
2012-06-01 14:49:46 +00:00
< td > Bruce Lee< / td >
2011-09-13 22:55:31 +00:00
< td > Evans< / td >
< td > 22< / td >
< td > $13.19< / td >
< td > 11%< / td >
< td > Jan 18, 2007 9:12 AM< / td >
< / tr >
2012-05-23 17:11:30 +00:00
< tr >
2012-09-27 19:57:19 +00:00
< td > 100< / td >
2012-05-23 17:11:30 +00:00
< td > Brenda Lee< / td >
< td > McMasters< / td >
< td > 18< / td >
< td > $55.20< / td >
< td > 15%< / td >
< td > Feb 12, 2010 7:23 PM< / td >
< / tr >
< tr >
2012-09-27 19:57:19 +00:00
< td > 55< / td >
2012-05-23 17:11:30 +00:00
< td > Dennis< / td >
< td > Bronson< / td >
< td > 65< / td >
< td > $123.00< / td >
< td > 32%< / td >
2012-06-01 14:49:46 +00:00
< td > Jan 20, 2001 1:12 PM< / td >
2012-05-23 17:11:30 +00:00
< / tr >
< tr >
2012-09-27 19:57:19 +00:00
< td > 9< / td >
2012-05-23 17:11:30 +00:00
< td > Martha< / td >
< td > delFuego< / td >
< td > 25< / td >
< td > $22.09< / td >
< td > 17%< / td >
< td > Jun 11, 2011 10:55 AM< / td >
< / tr >
2011-09-13 22:55:31 +00:00
< / tbody >
< / table > < / div >
< h1 > Page Header< / h1 >
< div >
2013-01-26 15:21:13 +00:00
< pre class = "prettyprint lang-html" > < !-- blue theme stylesheet -->
2012-09-27 19:57:19 +00:00
< link rel=" stylesheet" href=" ../css/theme.blue.css" >
2011-09-13 22:55:31 +00:00
< !-- tablesorter plugin -->
< script src=" ../js/jquery.tablesorter.js" > < /script>
< !-- tablesorter widget file - loaded after the plugin -->
< script src=" ../js/jquery.tablesorter.widgets.js" > < /script> < / pre >
< / div >
< h1 > Javascript< / h1 >
< div id = "javascript" >
2013-01-26 15:21:13 +00:00
< pre class = "prettyprint lang-javascript" > < / pre >
2011-09-13 22:55:31 +00:00
< / div >
2011-09-16 18:39:03 +00:00
< h1 > CSS< / h1 >
< div >
2013-01-26 15:21:13 +00:00
< pre class = "prettyprint lang-css" > /* filter row */
2012-09-27 19:57:19 +00:00
.tablesorter-filter-row td {
background: #eee;
line-height: normal;
text-align: center; /* center the input */
-webkit-transition: line-height 0.1s ease;
-moz-transition: line-height 0.1s ease;
-o-transition: line-height 0.1s ease;
transition: line-height 0.1s ease;
2012-02-21 00:47:08 +00:00
}
/* optional disabled input styling */
2012-09-27 19:57:19 +00:00
.tablesorter-filter-row .disabled {
opacity: 0.5;
filter: alpha(opacity=50);
cursor: not-allowed;
}
/* hidden filter row */
.tablesorter-filter-row.hideme td {
/*** *********************************************** ***/
/*** change this padding to modify the thickness ***/
/*** of the closed filter row (height = padding x 2) ***/
padding: 2px;
/*** *********************************************** ***/
margin: 0;
line-height: 0;
cursor: pointer;
}
.tablesorter-filter-row.hideme .tablesorter-filter {
height: 1px;
min-height: 0;
border: 0;
padding: 0;
margin: 0;
/* don't use visibility: hidden because it disables tabbing */
opacity: 0;
filter: alpha(opacity=0);
}
/* filters */
.tablesorter-filter {
width: 95%;
height: inherit;
margin: 4px;
padding: 4px;
background-color: #fff;
border: 1px solid #bbb;
color: #333;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: height 0.1s ease;
-moz-transition: height 0.1s ease;
-o-transition: height 0.1s ease;
transition: height 0.1s ease;
2012-03-07 18:06:35 +00:00
}< / pre >
2011-09-16 18:39:03 +00:00
< / div >
2011-09-13 22:55:31 +00:00
< h1 > HTML< / h1 >
< div id = "html" >
2013-01-26 15:21:13 +00:00
< pre class = "prettyprint lang-html" > < / pre >
2011-09-13 22:55:31 +00:00
< / div >
< div class = "next-up" >
< hr / >
2013-02-17 19:23:36 +00:00
Next up: < a href = "example-widget-filter-custom.html" > jQuery custom filter widget › › < / a >
2011-09-13 22:55:31 +00:00
< / div >
< / div >
< / body >
< / html >