2015-02-10 00:32:50 +00:00
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
2015-02-24 04:28:14 +00:00
< title > jQuery plugin: Tablesorter 2.0 - Custom Filter Widget Search Type (example 2)< / title >
2015-02-10 00:32:50 +00:00
<!-- jQuery -->
< script src = "js/jquery-latest.min.js" > < / script >
<!-- Demo stuff -->
< link class = "ui-theme" rel = "stylesheet" href = "css/jquery-ui.min.css" >
2015-02-13 12:56:45 +00:00
< script src = "js/jquery-ui.min.js" > < / script >
2015-02-10 00:32:50 +00:00
< link rel = "stylesheet" href = "css/jq.css" >
< link href = "css/prettify.css" rel = "stylesheet" >
< script src = "js/prettify.js" > < / script >
< script src = "js/docs.js" > < / script >
< style >
/* override the vertical-align top in the blue theme */
.notes.tablesorter-blue tbody td { vertical-align: middle; }
< / style >
<!-- Tablesorter: required -->
< link rel = "stylesheet" href = "../css/theme.blue.css" >
< script src = "../js/jquery.tablesorter.js" > < / script >
< script src = "../js/jquery.tablesorter.widgets.js" > < / script >
2015-02-24 06:00:52 +00:00
< script src = "../js/widgets/widget-filter-type-insideRange.js" > < / script >
< script src = "../js/parsers/parser-date-range.js" > < / script >
2015-02-10 00:32:50 +00:00
< script id = "js" > $ ( f u n c t i o n ( ) {
// call the tablesorter plugin
$("#table").tablesorter({
theme: 'blue',
widthFixed : true,
widgets: ["zebra", "filter"],
widgetOptions : {
2015-02-24 06:00:52 +00:00
filter_reset : '.reset',
2015-02-10 00:32:50 +00:00
// set to false because it is difficult to determine if a filtered
// row is already showing when looking at ranges
filter_searchFiltered : false
}
});
});< / script >
< script >
$(function(){
$('button').on('click', function(){
var $this = $(this),
filters = [],
col = $(this).data('column'),
query = $(this).text();
filters[col] = query;
$('table').trigger('search', [ filters ]);
});
});
< / script >
< / head >
< body >
< div id = "banner" >
< h1 > table< em > sorter< / em > < / h1 >
2015-02-24 04:28:14 +00:00
< h2 > Custom Filter Widget Search Type (example 2)< / h2 >
2015-02-10 00:32:50 +00:00
< h3 > Flexible client-side table sorting< / h3 >
< a href = "index.html" > Back to documentation< / a >
< / div >
< div id = "main" >
< p class = "tip" >
< em > NOTE!< / em >
< ul >
2015-03-05 16:04:59 +00:00
< li > In < span class = "version updated" > v2.21.0< / span >
2015-02-24 06:00:52 +00:00
< ul >
< li > The "insideRange" function was updated to use the column parser and moved into a separate file "widget-filter-type-insideRange.js"< / li >
2015-03-05 16:04:59 +00:00
< li > This change would allow the sorting of dates, if using it along with one of the < a href = "example-parsers-date-range.html" > date-range parsers< / a > (added v2.21.0).< / li >
2015-02-24 06:00:52 +00:00
< / ul >
< / li >
2015-02-10 00:32:50 +00:00
< li > This is another example of how to add a custom filter search type - see < a href = "example-widget-filter-custom-search.html#how_to_add_custom_filter_types" > this page< / a > for details on how to add your own.< / li >
< li > This "insideRange" search type does the following:
< ul >
< li > This search type was not included with the other < a href = "example-widget-filter-custom-search.html#builtin_filters" > built-in search types< / a > as it might be a little slower than the other search types because it has a bit more calculation to do than the others.< / li >
< li > It looks for a dash surrounded by spaces (< code > - < / code > ) within the filter before activating.< / li >
< li > So if you look for just < button type = "button" data-column = "2" > 4< / button > in the "Delivery" column, the exact match of 4 will still be included.< / li >
2015-02-24 06:00:52 +00:00
< li > Test out some more examples:
< ul >
< li > Try < button type = "button" data-column = "2" > 7< / button > or < button type = "button" data-column = "2" > 8< / button > in the Delivery column< / li >
< li > < button type = "button" data-column = "3" > $15.45< / button > in the "Price Range" column.< / li >
2015-03-05 16:04:59 +00:00
< li > < button type = "button" data-column = "4" > 7/12/2014< / button > in the "Date Range" column; this column is processed using the "date-range-mdy" parser (added < span class = "version" > v2.21.0< / span > ).< / li >
2015-02-24 06:00:52 +00:00
< / ul >
< / li >
2015-02-10 00:32:50 +00:00
< / ul >
< / li >
2015-02-24 06:00:52 +00:00
< li > Entering a range (e.g. < button type = "button" data-column = "2" > 4 - 7< / button > will switch the query to the < a href = "example-widget-filter-custom-search.html#builtin_filters" > range search type< / a > which will < em > only look at the first number< / em > of the range within each cell.< / li >
2015-02-10 00:32:50 +00:00
< / ul >
< / p >
< h1 > Demo< / h1 >
2015-02-24 06:00:52 +00:00
Filters: < button type = "button" > Reset< / button >
2015-02-10 00:32:50 +00:00
< table id = "table" class = "tablesorter" >
< thead >
< tr >
< th > Rank< / th >
< th > Name< / th >
< th > Delivery (days)< / th >
< th > Price Range< / th >
2015-02-24 06:00:52 +00:00
< th class = "sorter-date-range-mdy" > Date Range< / th >
2015-02-10 00:32:50 +00:00
< / tr >
< / thead >
< tbody >
2015-02-24 06:00:52 +00:00
< tr > < td > 1< / td > < td > Widget< / td > < td > 2 - 10< / td > < td > $5.95 - $13.20< / td > < td > 04/28/2014 - 07/13/2014< / td > < / tr >
< tr > < td > 11< / td > < td > Doodad< / td > < td > 1 - 4< / td > < td > $2.99 - $8.40< / td > < td > 04/28/2014 - 05/13/2014< / td > < / tr >
< tr > < td > 12< / td > < td > Whatchamacallit< / td > < td > 3 - 7< / td > < td > $4.29 - $15.99< / td > < td > 7/15/2014< / td > < / tr >
< tr > < td > 15< / td > < td > Thingy< / td > < td > 5 - 6< / td > < td > $9.99 - $13.20< / td > < td > 07/12/2014 - 07/23/2014< / td > < / tr >
< tr > < td > 21< / td > < td > Cube< / td > < td > 2 - 7< / td > < td > $6.99 - $14.99< / td > < td > 05/22/2014 - 05/23/2014< / td > < / tr >
< tr > < td > 13< / td > < td > It< / td > < td > 5 - 12< / td > < td > $15.89 - $18.22< / td > < td > 8/12/2014 - 7/10/2014< / td > < / tr >
< tr > < td > 5< / td > < td > Fred< / td > < td > 20 - 30< / td > < td > $13.19 - $15.54< / td > < td > 6/12/2014 - 6/14/2014< / td > < / tr >
< tr > < td > 10< / td > < td > FuBar< / td > < td > 4< / td > < td > $5.50< / td > < td > 6/13/2014 - 6/22/2014< / td > < / tr >
< tr > < td > 16< / td > < td > Otto< / td > < td > 2 - 4< / td > < td > $6.30 - $14.19< / td > < td > 5/10/2014 - 5/20/2014< / td > < / tr >
< tr > < td > 21< / td > < td > Betsy< / td > < td > 7< / td > < td > $5.67 - $8.25< / td > < td > 6/2/2014 - 6/13/2014< / td > < / tr >
< tr > < td > 18< / td > < td > Clyde< / td > < td > 5 - 10< / td > < td > $11.20 - $15.45< / td > < td > 6/13/2014< / td > < / tr >
< tr > < td > 7< / td > < td > Brick< / td > < td > 5 - 7< / td > < td > $12.00 - $14.30< / td > < td > 7/2/2014 - 7/25/2014< / td > < / tr >
< tr > < td > 9< / td > < td > Gadget< / td > < td > 10 - 20< / td > < td > $7.09 - $13.20< / td > < td > 5/23/2014 - 6/12/2014< / td > < / tr >
2015-02-10 00:32:50 +00:00
< / tbody >
< / table >
2015-02-24 06:00:52 +00:00
< h1 > Page Head< / h1 >
< div id = "html" >
< pre class = "prettyprint lang-html" > < !-- jQuery -->
< script src=" js/jquery-latest.min.js" > < /script>
< !-- tablesorter -->
< link rel=" stylesheet" href=" ../css/theme.blue.css" >
< script src=" ../js/jquery.tablesorter.js" > < /script>
< script src=" ../js/jquery.tablesorter.widgets.js" > < /script>
< !-- inside range filter type -->
< script src=" ../js/widgets/widget-filter-type-insideRange.js" > < /script>
< !-- parse date ranges -->
< script src=" ../js/parsers/parser-date-range.js" > < /script> < / pre >
< / div >
2015-02-10 00:32:50 +00:00
< h1 > Javascript< / h1 >
< div id = "javascript" >
< pre class = "prettyprint lang-javascript" > < / pre >
< / div >
2015-02-24 04:28:14 +00:00
< div class = "next-up" >
< hr / >
Next up: < a href = "example-widget-filter-formatter-1.html" > jQuery custom filter widget formatter (jQuery UI widgets) › › < / a >
< / div >
2015-02-10 00:32:50 +00:00
< / div >
< / body >
< / html >