<li>In <spanclass="version updated">v2.16.5</span>, the <code>filter_formatter</code> column can also be referenced by using a jQuery selector (e.g. class name or ID).</li>
<li>In <spanclass="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>
<li>This example shows how you can add an HTML5 range input slider to filter column content.</li>
<li>The <code>filter_formatter</code> function provided in the extra "jquery.tablesorter.widgets-filter-formatter.js" file is used to add this custom control within the filter row.</li>
<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:<preclass="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
<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 <ahref="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>
<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>
<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:<preclass="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
<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>
<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>
<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>
<li>In <spanclass="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>
<li>This example shows how you can add an HTML5 number spinner to the filter column content.</li>
<li>The <code>filter_formatter</code> function provided in the extra "jquery.tablesorter.widgets-filter-formatter.js" file is used to add this custom control within the filter row.</li>
<li>Add the following code to apply an HTML spinner to filter a column:<preclass="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
<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>
<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>