2013-02-17 19:23:36 +00:00
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
2013-03-26 21:16:13 +00:00
< title > jQuery plugin: Tablesorter 2.0 - Custom Filter Widget Formatter (HTML5 Elements)< / title >
2013-02-17 19:23:36 +00:00
<!-- jQuery -->
2014-05-21 22:09:23 +00:00
< script src = "js/jquery-latest.min.js" > < / script >
2013-02-17 19:23:36 +00:00
<!-- Demo stuff -->
2014-05-21 22:09:23 +00:00
< 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 >
2013-02-17 19:23:36 +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 >
<!-- Tablesorter: required -->
< link href = "../css/theme.blue.css" rel = "stylesheet" >
< link href = "../css/filter.formatter.css" rel = "stylesheet" >
< script src = "../js/jquery.tablesorter.js" > < / script >
< script src = "../js/jquery.tablesorter.widgets.js" > < / script >
2015-02-13 03:10:38 +00:00
< script src = "../js/widgets/widget-filter-formatter-html5.js" > < / script >
2014-02-01 16:19:26 +00:00
2014-02-17 22:21:35 +00:00
< style id = "css" > / * c s s n e e d e d t o g e t c o m p a r e s e l e c t o r & s l i d e r i n - l i n e * /
.compare-select-wrapper { width: 60%; float: right; }< / style >
2013-02-17 19:23:36 +00:00
< script id = "js" > $ ( f u n c t i o n ( ) {
$("table").tablesorter({
theme: 'blue',
// hidden filter input/selects will resize the columns, so try to minimize the change
widthFixed : true,
// initialize zebra striping and filter widgets
2013-05-30 15:54:40 +00:00
widgets: ["zebra", "filter", "stickyHeaders"],
2013-02-17 19:23:36 +00:00
widgetOptions : {
2014-02-17 22:21:35 +00:00
// Use the $.tablesorter.storage utility to save the most recent filters
filter_saveFilters : true,
2013-02-17 19:23:36 +00:00
// jQuery selector string of an element used to reset the filters
filter_reset : 'button.reset',
// add custom selector elements to the filter row
filter_formatter : {
2014-02-17 22:21:35 +00:00
2013-05-23 20:32:19 +00:00
// Rank
2013-02-17 19:23:36 +00:00
0 : function($cell, indx){
return $.tablesorter.filterFormatter.html5Range( $cell, indx, {
value: 0,
min: 0,
max: 100,
2013-02-24 06:04:46 +00:00
delayed: true,
2013-06-05 00:58:15 +00:00
valueToHeader: true,
2014-02-17 22:21:35 +00:00
compare : [ '=', '>=', '< =' ],
selected: 1
2013-02-17 19:23:36 +00:00
});
},
2014-02-17 22:21:35 +00:00
2013-05-23 20:32:19 +00:00
// Color
2013-02-17 19:23:36 +00:00
1 : function($cell, indx){
return $.tablesorter.filterFormatter.html5Color( $cell, indx, {
value: '#000000',
addToggle: true,
2013-02-28 16:32:45 +00:00
exactMatch: true,
2013-02-17 19:23:36 +00:00
valueToHeader: false
});
},
2014-02-17 22:21:35 +00:00
2013-05-23 20:32:19 +00:00
// Age
2013-02-17 19:23:36 +00:00
3: function($cell, indx){
return $.tablesorter.filterFormatter.html5Number( $cell, indx, {
value: 1,
min: 1,
max: 65,
2013-02-24 06:04:46 +00:00
delayed: true,
2013-02-17 19:23:36 +00:00
addToggle: true,
2013-05-23 20:32:19 +00:00
exactMatch: true,
2014-02-17 22:21:35 +00:00
compare: ''
2013-05-23 20:32:19 +00:00
});
},
2014-02-17 22:21:35 +00:00
// Total
4 : function($cell, indx){
2013-05-23 20:32:19 +00:00
return $.tablesorter.filterFormatter.html5Range( $cell, indx, {
value: 0,
min: 0,
2014-02-17 22:21:35 +00:00
max: 150,
2013-05-23 20:32:19 +00:00
delayed: true,
valueToHeader: true,
compare : '>='
2013-02-17 19:23:36 +00:00
});
2014-02-17 22:21:35 +00:00
},
// Discount
5: function($cell, indx){
return $.tablesorter.filterFormatter.html5Number( $cell, indx, {
value: 1,
min: 1,
max: 44,
delayed: true,
addToggle: false,
compare: [ '< =', '=', '>=' ],
selected: 2
});
2013-02-17 19:23:36 +00:00
}
2014-02-17 22:21:35 +00:00
2013-02-17 19:23:36 +00:00
}
}
});
});< / script >
< / head >
< body >
< div id = "banner" >
< h1 > table< em > sorter< / em > < / h1 >
2013-03-26 21:16:13 +00:00
< h2 > Custom Filter Widget Formatter (HTML5 Elements)< / h2 >
2013-02-17 19:23:36 +00:00
< h3 > Flexible client-side table sorting< / h3 >
< a href = "index.html" > Back to documentation< / a >
< / div >
< div id = "main" >
< p > < / p >
< br >
< div class = "accordion" >
< h3 > < a href = "#" > Notes< / a > < / h3 >
< div >
< ul >
2014-05-21 22:09:23 +00:00
< li > In < span class = "version updated" > v2.17.0< / span > , the < code > filter_formatter< / code > column can also be referenced by using a jQuery selector (e.g. class name or ID).< / li >
2013-04-13 02:15:57 +00:00
< li > As of tablesorter version 2.9+, this widget can no longer be applied to versions of tablesorter prior to version 2.8.< / li >
2013-05-23 20:32:19 +00:00
< li > At this time, these widgets do not work with the sticky header widget.< / li >
2013-02-17 19:23:36 +00:00
< li > This page shows you how to add a few default < strong > HTML5 elements< / strong > to interact with the filter widget.< / li >
2013-02-17 20:28:18 +00:00
< li > If the HTML5 elements are not supported by your browser, you'll just see an input.< / li >
2013-02-17 19:23:36 +00:00
< li > Custom filter widget option < code > filter_formatter< / code > was added in version 2.7.7.< / li >
< li > jQuery v1.4.3+ required.< / li >
< / ul >
< / div >
2014-02-17 22:21:35 +00:00
< h3 > < a href = "#" > < strong > HTML Range< / strong > < / a > < span class = "xsmall" > ("Rank" and "Total" columns)< / span > < / h3 >
2013-02-17 19:23:36 +00:00
< div >
< ul >
2014-02-17 22:21:35 +00:00
< li > In < span class = "version" > v2.15.0< / span > the < code > compare< / code > option was updated to allow adding a selector along with the input. The < code > selected< / code > option allows choosing the default setting.< / li >
2013-02-17 19:23:36 +00:00
< li > This example shows how you can add an HTML5 range input slider to filter column content.< / li >
2015-02-13 03:10:38 +00:00
< li > The < code > filter_formatter< / code > function provided in the extra "widget-filter-formatter-html5.js" file is used to add this custom control within the filter row.< / li >
2013-02-17 19:23:36 +00:00
< li > Make sure to include all values within the selected range, otherwise rows outside of this range will be forever hidden.< / li >
< li > Add the following code to apply an HTML5 range slider to the filter row:< pre class = "prettyprint lang-javascript" > $(function() {
$("table").tablesorter({
theme: 'blue',
// initialize zebra striping and filter widgets
widgets: ["zebra", "filter"],
widgetOptions : {
// jQuery selector string of an element used to reset the filters
filter_reset : 'button.reset',
// add custom selector elements to the filter row
filter_formatter : {
2014-02-17 22:21:35 +00:00
// Rank
2013-02-17 19:23:36 +00:00
0 : function($cell, indx){
return $.tablesorter.filterFormatter.html5Range( $cell, indx, {
value: 0,
min: 0,
max: 100,
2013-02-24 06:04:46 +00:00
delayed: true,
2013-02-17 19:23:36 +00:00
valueToHeader: true,
2014-07-18 01:42:01 +00:00
compare : [ '=', '> =', '< =' ],
2014-02-17 22:21:35 +00:00
selected: 1
});
},
// Total
4 : function($cell, indx){
return $.tablesorter.filterFormatter.html5Range( $cell, indx, {
value: 0,
min: 0,
max: 150,
delayed: true,
valueToHeader: true,
2014-07-18 01:42:01 +00:00
compare : '> ='
2013-02-17 19:23:36 +00:00
});
}
2014-02-17 22:21:35 +00:00
2013-02-17 19:23:36 +00:00
}
}
});
});< / pre > < / li >
< li > By default, this code has the < code > valueToHeader< / code > option set to < code > true< / code > to add the slider value to the header cell above the filter.< / li >
< li > The tooltip above the slider is NOT added in this example because the slider handle is not a separate element. But if you are interested, you can use < a href = "http://codepen.io/chriscoyier/pen/lokyH" > this code< / a > by Chris Coyier to animate a range slider bubble.< / li >
< li > Another option named < code > exactMatch< / code > was added to allow exact or general matching of column content.< / li >
< li > Notice that the left-most value, zero in this case, will clear the column filter to allow a method to show all column content. You can modify the "all" text using the < code > allText< / code > option.< / li >
2013-02-24 06:04:46 +00:00
< li > A search delay option was added in v2.7.11 (time set by < code > filter_searchDelay< / code > option). It can be disabled by setting the < code > delayed< / code > option to < code > false< / code > .< / li >
2013-02-17 19:23:36 +00:00
< / ul >
< / div >
2014-02-17 22:21:35 +00:00
< h3 > < a href = "#" > < strong > HTML5 color input< / strong > < / a > < span class = "xsmall" > ("Color" column)< / span > < / h3 >
2013-02-17 19:23:36 +00:00
< div >
< ul >
< li > This example shows how you can add an HTML5 color input to filter column content.< / li >
< li > The < code > filter_formatter< / code > function is used to add a custom control within the filter row, but a hidden input is still required to store the filter value.< / li >
< li > Add the following code to apply a color input to the filter row:< pre class = "prettyprint lang-javascript" > $(function() {
$("table").tablesorter({
theme: 'blue',
// hidden filter input/selects will resize the columns, so try to minimize the change
widthFixed : true,
// initialize zebra striping and filter widgets
widgets: ["zebra", "filter"],
widgetOptions : {
// jQuery selector string of an element used to reset the filters
filter_reset : 'button.reset',
// add custom selector elements to the filter row
filter_formatter : {
2014-02-17 22:21:35 +00:00
// Color
2013-02-17 19:23:36 +00:00
1 : function($cell, indx){
return $.tablesorter.filterFormatter.html5Color( $cell, indx, {
value: '#000000',
addToggle: true,
2013-02-28 16:32:45 +00:00
exactMatch: true,
2013-02-17 19:23:36 +00:00
valueToHeader: false
});
}
2014-02-17 22:21:35 +00:00
2013-02-17 19:23:36 +00:00
}
}
});
});< / pre > < / li >
< li > This color selector will only output the color as a hex value with a hash followed by six characters (< code > #000000< / code > ).< / li >
< li > By default, this code has the < code > valueToHeader< / code > option set to < code > false< / code > . The currently selected color is added to a span within the cell by default.< / li >
2013-02-28 16:32:45 +00:00
< li > Another option named < code > exactMatch< / code > was added to allow exact or general matching of column content, in case you have multiple colors in one cell.< / li >
2013-02-17 19:23:36 +00:00
< li > This selector includes a toggle button. The toggle button is added by default, but if you don't want it, set the < code > addToggle< / code > option to < code > false< / code > . Without the toggle button, the filter is always active.< / li >
< / ul >
< / div >
2014-02-17 22:21:35 +00:00
< h3 > < a href = "#" > < strong > HTML5 Number Selector< / strong > < / a > < span class = "xsmall" > ("Age" and "Discount" columns)< / span > < / h3 >
2013-02-17 19:23:36 +00:00
< div >
< ul >
2014-02-17 22:21:35 +00:00
< li > In < span class = "version" > v2.15.0< / span > the < code > compare< / code > option was updated to allow adding a selector along with the input. The < code > selected< / code > option allows choosing the default setting.< / li >
2013-02-17 19:23:36 +00:00
< li > This example shows how you can add an HTML5 number spinner to the filter column content.< / li >
2015-02-13 03:10:38 +00:00
< li > The < code > filter_formatter< / code > function provided in the extra "widget-filter-formatter-html5.js" file is used to add this custom control within the filter row.< / li >
2013-02-17 19:23:36 +00:00
< li > Add the following code to apply an HTML spinner to filter a column:< pre class = "prettyprint lang-javascript" > $(function() {
$("table").tablesorter({
theme: 'blue',
// hidden filter input/selects will resize the columns, so try to minimize the change
widthFixed : true,
// initialize zebra striping and filter widgets
widgets: ["zebra", "filter"],
widgetOptions : {
// jQuery selector string of an element used to reset the filters
filter_reset : 'button.reset',
// add custom selector elements to the filter row
filter_formatter : {
2014-02-17 22:21:35 +00:00
// Age
2013-02-17 19:23:36 +00:00
3: function($cell, indx){
return $.tablesorter.filterFormatter.html5Number( $cell, indx, {
value: 1,
min: 1,
max: 65,
2013-02-24 06:04:46 +00:00
delayed: true,
2013-02-17 19:23:36 +00:00
addToggle: true,
2014-02-17 22:21:35 +00:00
exactMatch: true,
compare: ''
});
},
// Discount
5: function($cell, indx){
return $.tablesorter.filterFormatter.html5Number( $cell, indx, {
value: 1,
min: 1,
max: 44,
delayed: true,
addToggle: false,
2014-07-18 01:42:01 +00:00
compare: [ '< =', '=', '> =' ],
2014-02-17 22:21:35 +00:00
selected: 2
2013-02-17 19:23:36 +00:00
});
}
2014-02-17 22:21:35 +00:00
2013-02-17 19:23:36 +00:00
}
}
});
});< / pre > < / li >
< li > This is spinner includes a toggle button. The toggle button is added by default, but if you don't want it, set the < code > addToggle< / code > option to < code > false< / code > . Without the toggle button, the filter is always active.< / li >
< li > Another option named < code > exactMatch< / code > was added to allow exact or general matching of column content.< / li >
2013-02-24 06:04:46 +00:00
< li > A search delay option was added in v2.7.11 (time set by < code > filter_searchDelay< / code > option). It can be disabled by setting the < code > delayed< / code > option to < code > false< / code > .< / li >
2013-02-17 19:23:36 +00:00
< / ul >
< / div >
< / div >
< h1 > Demo< / h1 >
2013-05-16 15:25:14 +00:00
< button type = "button" class = "reset" > Reset Search< / button >
2013-02-17 19:23:36 +00:00
< div id = "demo" > < table class = "tablesorter" >
< thead >
2013-05-30 15:54:40 +00:00
< tr > < th > Rank< / th > < th > Color< / th > < th > Name< / th > < th > Age< / th > < th > Total< / th > < th > Discount< / th > < th > Date< / th > < / tr >
2013-02-17 19:23:36 +00:00
< / thead >
< tbody >
2013-05-30 15:54:40 +00:00
< tr > < td > 1< / td > < td > #ff0000< / td > < td > Johnson< / td > < td > 25< / td > < td > $5.95< / td > < td > 22%< / td > < td > Jun 26, 2013 7:22 AM< / td > < / tr >
< tr > < td > 11< / td > < td > #00ff00< / td > < td > Hibert< / td > < td > 12< / td > < td > $2.99< / td > < td > 5%< / td > < td > Aug 21, 2013 12:21 PM< / td > < / tr >
< tr > < td > 12< / td > < td > #0000ff< / td > < td > Henry< / td > < td > 51< / td > < td > $42.29< / td > < td > 18%< / td > < td > Oct 13, 2013 1:15 PM< / td > < / tr >
< tr > < td > 51< / td > < td > #00ff00< / td > < td > Parker< / td > < td > 28< / td > < td > $9.99< / td > < td > 20%< / td > < td > Jul 6, 2013 8:14 AM< / td > < / tr >
< tr > < td > 21< / td > < td > #ffffff< / td > < td > Hood< / td > < td > 33< / td > < td > $19.99< / td > < td > 25%< / td > < td > Dec 10, 2012 5:14 AM< / td > < / tr >
< tr > < td > 013< / td > < td > #ff0000< / td > < td > Kent< / td > < td > 18< / td > < td > $15.89< / td > < td > 44%< / td > < td > Jan 12, 2013 11:14 AM< / td > < / tr >
< tr > < td > 005< / td > < td > #00ff00< / td > < td > Bruce< / td > < td > 45< / td > < td > $153.19< / td > < td > 44%< / td > < td > Jan 18, 2014 9:12 AM< / td > < / tr >
< tr > < td > 10< / td > < td > #000000< / td > < td > Alex< / td > < td > 3< / td > < td > $5.29< / td > < td > 4%< / td > < td > Jan 8, 2013 5:11 PM< / td > < / tr >
< tr > < td > 16< / td > < td > #ff0000< / td > < td > Franco< / td > < td > 24< / td > < td > $14.19< / td > < td > 14%< / td > < td > Jan 14, 2014 11:23 AM< / td > < / tr >
< tr > < td > 66< / td > < td > #000000< / td > < td > Evans< / td > < td > 22< / td > < td > $13.19< / td > < td > 11%< / td > < td > Jan 18, 2013 9:12 AM< / td > < / tr >
< tr > < td > 100< / td > < td > #ffffff< / td > < td > Brenda< / td > < td > 18< / td > < td > $55.20< / td > < td > 15%< / td > < td > Feb 12, 2013 7:23 PM< / td > < / tr >
< tr > < td > 55< / td > < td > #000000< / td > < td > Bronson< / td > < td > 65< / td > < td > $123.00< / td > < td > 32%< / td > < td > Jan 20, 2014 1:12 PM< / td > < / tr >
< tr > < td > 9< / td > < td > #000000< / td > < td > Martha< / td > < td > 25< / td > < td > $22.09< / td > < td > 17%< / td > < td > Jun 11, 2013 10:55 AM< / td > < / tr >
2013-02-17 19:23:36 +00:00
< / tbody >
< / table > < / div >
< h1 > Page Header< / h1 >
< div >
< pre class = "prettyprint lang-html" > < !-- jQuery UI for range slider -->
2014-05-21 22:09:23 +00:00
< link rel="stylesheet" href="css/jquery-ui.min.css">
2015-02-13 12:56:45 +00:00
< script src="js/jquery-ui.min.js"> < /script>
2013-02-17 19:23:36 +00:00
< !-- tablesorter plugin -->
< link rel=" stylesheet" href=" ../css/theme.blue.css" >
< script src=" ../js/jquery.tablesorter.js" > < /script>
< script src=" ../js/jquery.tablesorter.widgets.js" > < /script>
< !-- filter formatter code -->
< link rel=" stylesheet" href=" ../css/filter.formatter.css" >
2015-02-13 03:10:38 +00:00
< script src=" ../js/widgets/widget-filter-formatter-html5.js" > < /script> < / pre >
2013-02-17 19:23:36 +00:00
< / div >
< h1 > Javascript< / h1 >
< div id = "javascript" >
< pre class = "prettyprint lang-javascript" > < / pre >
< / div >
< h1 > HTML< / h1 >
< div id = "html" >
< pre class = "prettyprint lang-html" > < / pre >
< / div >
< div class = "next-up" >
< hr / >
Next up: < a href = "example-widget-ui-theme.html" > UITheme widget - jQuery UI theme › › < / a >
< / div >
< / div >
< / body >
< / html >