library-mirrors/tablesorter
1
0
Fork 0
mirror of https://github.com/Mottie/tablesorter.git synced 2024-12-05 05:04:20 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

filterFormatter docs & files

Browse Source
This commit is contained in:
Mottie 2013-02-17 13:23:36 -06:00
parent 5eafcf7559
commit 9f487c5384
10 changed files with 1620 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

166
css/filter.formatter.css Normal file
View File

@ -0,0 +1,166 @@
/**** Filter Formatter Elements ****/
.tablesorter-blue .tablesorter-filter-row td {
text-align: center;
font-size: 0.9em;
font-weight: normal;
}
/**** Sliders ****/
/* shrink the ui sliders to look nicer inside of a table cell */
.ui-slider {
width: 90%;
margin: 12px auto 2px auto; /* add enough top margin so the tooltips will fit */
font-size: 0.5em;
}
.ui-slider .ui-slider-handle{
width: 0.8em;
height: 0.8em;
}
.ui-datepicker {
font-size: 0.8em;
}
/* Add tooltips to slider handles */
.value-popup:after {
content : attr(data-value);
position: absolute;
bottom: 15px;
left: -3px;
min-width: 14px;
height: 12px;
background-color: #444;
background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999));
background-image: -webkit-linear-gradient(top, #444, #999);
background-image: -moz-linear-gradient(top, #444, #999);
background-image: -o-linear-gradient(top, #444, #999);
background-image: linear-gradient(to bottom, #444, #999);
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-background-clip: padding-box; background-clip: padding-box;
-webkit-box-shadow: 0px 0px 4px 0px #777;
box-shadow: 0px 0px 4px 0px #777;
border: #444 1px solid;
color: #fff;
font: bold 0.8em/1em Arial;
padding: 1px;
text-align: center;
}
.value-popup:before {
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 8px solid #777;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
top: -8px;
left: 50%;
margin-left: -8px;
margin-top: -1px;
}
/**** Date Picker ****/
.dateFrom, .dateTo {
width: 80px;
margin: 2px 5px;
}
/**** Color Picker Toggle button ****/
.button {
width: 14px;
height: 14px;
background: #fcfff4;
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
margin: 5px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
position: relative;
display: inline-block;
}
.button label {
cursor: pointer;
position: absolute;
width: 10px;
height: 10px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
left: 2px;
top: 2px;
-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
background: -o-linear-gradient(top, #222 0%, #45484d 100%);
background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
background: linear-gradient(top, #222 0%, #45484d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
}
.button label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
content: '';
position: absolute;
width: 8px;
height: 8px;
background: #00bf00;
background: -webkit-linear-gradient(top, #aaf 0%, #55f 100%);
background: -moz-linear-gradient(top, #aaf 0%, #55f 100%);
background: -o-linear-gradient(top, #aaf 0%, #55f 100%);
background: -ms-linear-gradient(top, #aaf 0%, #55f 100%);
background: linear-gradient(top, #aaf 0%, #55f 100%);
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
top: 1px;
left: 1px;
-webkit-box-shadow: inset 0px 1px 1px #fff, 0px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 1px 1px #fff, 0px 1px 3px rgba(0,0,0,0.5);
box-shadow: inset 0px 1px 1px #fff, 0px 1px 3px rgba(0,0,0,0.5);
}
.button label:hover::after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.3;
}
.button input[type=checkbox] {
visibility: hidden;
}
.button input[type=checkbox]:checked + label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.colorpicker {
width: 30px;
height: 18px;
}
.ui-spinner-input {
width: 100px;
height: 18px;
}
.currentColor, .ui-spinner {
position: relative;
top: -8px;
}
input.number {
position: relative;
top: -5px;
}

8
docs/css/jq.css
View File

@ -4,7 +4,7 @@ h1{font-size:large;font-weight:400;margin:0;}
h2{color:#333;font-size:small;font-weight:400;margin:0;}
.demo{width:600px;margin:20px auto;}
.demo h1,.demo h1 a{font-size:120%;text-align:center;text-decoration:none;color:#000;}
.demo p{text-align:center;}
.demo p,.center{text-align:center;}
.demo table.tablesorter{font-size:14px;}
table.info{border:#000 1px solid;border-collapse:collapse;margin:10px 0 0 10px;}
table.tablesorter table.info tbody th,table.tablesorter table.info td{border:#000 1px solid;}
@ -44,7 +44,7 @@ form{font-size:10pt;margin-bottom:20px;width:auto;}
form fieldset{padding:10px;text-align:left;width:140px;}
div#main h1{border-bottom:1px solid #CDCDCD;display:block;margin-top:20px;padding:10px 0 2px;}
table#tablesorter-demo {margin: 10px 0 0 0;}
table.options *,table#methods *,table#events *, p.small{font-size:small;}
table *, p.small{font-size:small;}
p.small {padding-left: 25px;}
p.tip em {padding: 2px; background-color: #6cf; color: #fff;}
span.tip em {padding: 0 2px;background-color: #00ce53; color: #fff; font-size:90%; }
@ -65,3 +65,7 @@ span.deprecated { background: #a00; color: #fff; padding: 1px 3px; }
.bootstrap_buttons button { margin: 5px 0 0 0; }
#main .ui-accordion-header a { font-size: 14px; margin-left: 24px; }
#main .ui-accordion-content { font-size: 14px; }
@media all and (max-width: 650px) {
table.compatibility { float: none; }
}

25
docs/example-widget-filter-custom.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Custom Filter Widget</title>
<meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Custom Filter Widget Functions</title>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
@ -146,7 +146,7 @@
<body>
<div id="banner">
<h1>table<em>sorter</em></h1>
<h2>Custom Filter Widget</h2>
<h2>Custom Filter Widget Functions</h2>
<h3>Flexible client-side table sorting</h3>
<a href="index.html">Back to documentation</a>
</div>
@ -161,21 +161,22 @@
<ul>
<li>Custom filter widget option <code>filter_functions</code> was added in version 2.3.6.</li>
<li>This widget does work with tablesorter v2.0.5.</li>
<li>jQuery v1.4.3+ required.</li>
</ul>
</div>
<h3><a href="#"><strong>Default Select</strong> ("First Name" column)</a></h3>
<div>
<ul>
<li>To enable this type of select, set the <code>filter_functions</code> option for the column to <code>true</code>,<pre>filter_functions : {
<li>To enable this type of select, set the <code>filter_functions</code> option for the column to <code>true</code>,<pre class="prettyprint lang-javascript">filter_functions : {
// Add select menu to this column
// set the column value to true, and/or add "filter-select" class name to header
0 : true
}</pre>or add a "filter-select" class to the column header cell (see code below).</li>
<li>The default option text, "Select a name", is obtained from the header <code>data-placeholder</code> attribute of the column header cell. And when active, it will show all table rows.<pre>&lt;th class=&quot;filter-select&quot; data-placeholder=&quot;Select a name&quot;&gt;First Name&lt;/th&gt;</pre></li>
<li>Add a "filter-match" class to only match instead of exactly match the selected value. Click on the "Match" button below to see the difference.<pre>&lt;th class=&quot;filter-select filter-match&quot; data-placeholder=&quot;Select a name&quot;&gt;First Name&lt;/th&gt;</pre></li>
<li>The default option text, "Select a name", is obtained from the header <code>data-placeholder</code> attribute of the column header cell. And when active, it will show all table rows.<pre class="prettyprint lang-html">&lt;th class=&quot;filter-select&quot; data-placeholder=&quot;Select a name&quot;&gt;First Name&lt;/th&gt;</pre></li>
<li>Add a "filter-match" class to only match instead of exactly match the selected value. Click on the "Match" button below to see the difference.<pre class="prettyprint lang-html">&lt;th class=&quot;filter-select filter-match&quot; data-placeholder=&quot;Select a name&quot;&gt;First Name&lt;/th&gt;</pre></li>
<li>The select is populated by the column text contents with repeated content combined (i.e. There are three "Aaron"'s in the first column, but only one in the dropdown.</li>
<li>Select options are automatically alphanumerically (new in v2.4) sorted.</li>
</ul>
@ -184,7 +185,7 @@
<h3><a href="#"><strong>Custom Filter Function</strong> ("Last Name" column)</a></h3>
<div>
<ul>
<li>To enable this type of filter, add your custom function to the <code>filter_functions</code> option following this example:<pre>filter_functions : {
<li>To enable this type of filter, add your custom function to the <code>filter_functions</code> option following this example:<pre class="prettyprint lang-javascript">filter_functions : {
// Exact match only
1 : function(e, n, f, i) {
@ -203,7 +204,7 @@
<ul>
<li>To enable this type of select, add your custom options within the <code>filter_functions</code> option.</li>
<li>Each option is set as a "key:value" pair where the "key" is the actual text of the option and the "value" is the function associated with the option.</li>
<li>Here is an example using alphabetical comparisons (using regular expressions):<pre>filter_functions : {
<li>Here is an example using alphabetical comparisons (using regular expressions):<pre class="prettyprint lang-javascript">filter_functions : {
// Add these options to the select dropdown (regex example)
2 : {
@ -217,7 +218,7 @@
}
}</pre></li>
<li>Here is an example using numerical comparisons:<pre>filter_functions : {
<li>Here is an example using numerical comparisons:<pre class="prettyprint lang-javascript">filter_functions : {
// Add these options to the select dropdown (numerical comparison example)
// Note that only the normalized (n) value will contain numerical data
// If you use the exact text, you'll need to parse it (parseFloat or parseInt)
@ -234,7 +235,7 @@
<h3><a href="#"><strong>Filter function information</strong></a></h3>
<div>
<ul>
<li>The custom function must return a boolean value. If <code>true</code> is returned, the row will be shown if all other filters match; and if <code>false</code> is returned, the row will be hidden.<pre>function(e, n, f, i) { return test; /* test should be a Boolean (true or false) */ }</pre></li>
<li>The custom function must return a boolean value. If <code>true</code> is returned, the row will be shown if all other filters match; and if <code>false</code> is returned, the row will be hidden.<pre class="prettyprint lang-javascript">function(e, n, f, i) { return test; /* test should be a Boolean (true or false) */ }</pre></li>
<li>The <strong>exact text (e)</strong> of the table cell is a variable passed to the function. Note that numbers will need to be parsed to make comparisons.</li>
<li><strong>Normalized table cell data (n)</strong> is the next varibale passed to the function.
<ul>
@ -402,7 +403,7 @@
<div class="next-up">
<hr />
Next up: <a href="example-widget-ui-theme.html">UITheme widget - jQuery UI theme &rsaquo;&rsaquo;</a>
Next up: <a href="example-widget-filter-formatter-1.html">jQuery custom filter widget formatter (part 1) &rsaquo;&rsaquo;</a>
</div>
</div>

498
docs/example-widget-filter-formatter-1.html Normal file
View File

@ -0,0 +1,498 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Custom Filter Widget Formatter (part 1)</title>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<!-- Demo stuff -->
<link class="ui-theme" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/cupertino/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<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>
<script src="../js/jquery.tablesorter.widgets-filter-formatter.js"></script>
<script>
$(function(){
$('.accordion').accordion({
heightStyle: 'content',
collapsible : true
});
});
</script>
<script id="js">$(function() {
// call the tablesorter plugin
$("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 : {
0 : function($cell, indx){
return $.tablesorter.filterFormatter.uiSlider( $cell, indx, {
value: 0,
min: 0,
max: 100,
valueToHeader: false
});
},
3 : function($cell, indx){
return $.tablesorter.filterFormatter.uiRange( $cell, indx, {
values: [1, 70],
min: 1,
max: 70,
valueToHeader: false
});
},
5 : function($cell, indx){
return $.tablesorter.filterFormatter.uiSpinner( $cell, indx, {
min : 0,
max : 45,
value: 1,
step: 1,
addToggle: true,
exactMatch: true,
numberFormat: "n"
});
},
6 : function($cell, indx){
return $.tablesorter.filterFormatter.uiDatepicker( $cell, indx, {
from : '12/1/2012', // default from date
to : '2/1/2014', // default to date
changeMonth: true,
changeYear : true
});
},
4 : function($cell, indx){
return $.tablesorter.filterFormatter.uiRange( $cell, indx, {
values: [1, 160],
min: 1,
max: 160,
valueToHeader: false
});
}
}
}
});
});</script>
</head>
<body>
<div id="banner">
<h1>table<em>sorter</em></h1>
<h2>Custom Filter Widget Formatter (part 1)</h2>
<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>
<li>This page shows you how to add a few <strong>jQuery UI widgets</strong> to interact with the filter widget using the <code>filter_formatter</code> option.</li>
<li>Custom filter widget option <code>filter_formatter</code> was added in version 2.7.7.</li>
<li>This widget "should" work with tablesorter v2.0.5.</li>
<li>jQuery v1.4.3+ required.</li>
</ul>
</div>
<h3><a href="#"><strong>jQuery UI Single Slider</strong> ("Rank" column)</a></h3>
<div>
<ul>
<li>This example shows how you can add a jQuery UI 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 a slider 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 : {
0 : function($cell, indx){
return $.tablesorter.filterFormatter.uiSlider( $cell, indx, {
// add any of the jQuery UI Slider options here
value: 0, // starting value
min: 0, // minimum value
max: 100, // maximum value
valueToHeader: false, // add current slider value to the header cell
exactMatch: true, // exact (true) or match (false)
allText: 'all', // text shown when the slider is at the minimum value
});
}
}
}
});
});</pre></li>
<li>The tooltip above the slider is added using pure css, which is included in the "filter.formatter.css" file, but it won't work in IE7 and older. But, you set the <code>valueToHeader</code> option to <code>true</code> to add the slider value to the header cell above the filter.</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>
</ul>
</div>
<h3><a href="#"><strong>jQuery UI Range Slider</strong> ("Age" and "Total" columns)</a></h3>
<div>
<ul>
<li>This example shows how you can add a jQuery UI range 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>The range slider is actually the same as the single slider described above, but was built to handle a range of values.</li>
<li>Add the following code to apply a range slider 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 : {
// Age column
3 : function($cell, indx){
return $.tablesorter.filterFormatter.uiRange( $cell, indx, {
values: [1, 70], // starting range
min: 1, // minimum value
max: 70, // maximum value
exactMatch: true, // exact (true) or match (false)
valueToHeader: false // add current slider value to the header cell
});
},
// Total column
4 : function($cell, indx){
return $.tablesorter.filterFormatter.uiRange( $cell, indx, {
values: [1, 160], // starting range
min: 1, // minimum value
max: 160, // maximum value
exactMatch: true, // exact (true) or match (false)
valueToHeader: false // add current slider value to the header cell
});
}
}
}
});
});</pre></li>
<li>The tooltip above the slider is added using pure css, which is included in the "filter.formatter.css" file, but it won't work in IE7 and older. But, you set the <code>valueToHeader</code> option to <code>true</code> to add the slider value to the header cell above the filter.</li>
<li>Another option named <code>exactMatch</code> was added to allow exact or general matching of column content.</li>
</ul>
</div>
<h3><a href="#"><strong>jQuery UI Spinner</strong> ("Discount" column)</a></h3>
<div>
<ul>
<li>This example shows how you can add a jQuery UI spinner 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>Add the following code to apply a 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 : {
5 : function($cell, indx){
return $.tablesorter.filterFormatter.uiSpinner( $cell, indx, {
min : 0,
max : 45,
value: 1,
step: 1,
addToggle: true,
exactMatch: true,
numberFormat: "n"
});
}
}
}
});
});</pre></li>
<li>This is the only jQuery UI widget that 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>
</ul>
</div>
<h3><a href="#"><strong>jQuery UI Datepicker Range Selector</strong> ("Date" column)</a></h3>
<div>
<ul>
<li>This example shows how you can add a jQuery UI Datepicker range 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>This code follows the <a class="external" href="http://jqueryui.com/datepicker/#date-range">date range</a> example from the jQuery UI docs.</li>
<li>Add the following code to apply a datepicker range selector 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 : {
6 : function($cell, indx){
return $.tablesorter.filterFormatter.uiDatepicker( $cell, indx, {
from : '12/1/2012',
to : '2/1/2014',
changeMonth: true,
changeYear : true
});
},
}
}
});
});</pre></li>
<li>Note that the datepicker options are slightly different from the default datepicker options:
<ul>
<li>Instead of using the <code>defaultDate</code> option of the datepicker widget, it has a <code>from</code> and <code>to</code> option to fullfill that purpose.</li>
<li>The options added to this function will be applied to both the from and to datepicker inputs.</li>
</ul>
</li>
</ul>
</div>
<h3><a href="#"><strong>Custom Filter Formatter Function Information</strong></a></h3>
<div>
If you want to write your own custom filter formatter function, there are certain requirements that should be met:
<ul>
<li>Required input element:
<ul>
<li>If your selector isn't an input (e.g. jQuery UI Slider), then you'll need to return an input of type hidden which gets updated by the selector with the filter query for the column.
<pre class="prettyprint lang-javascript">filter_formatter : {
0 : function($cell, indx) {
var $input = $('&lt;input type="hidden"&gt;').appendTo($cell);
// add your selector code here
return $input;
}
}</pre></li>
<li>If the input contains a value that doesn't match a standard filter syntax, then you'll need to return an input of type hidden with the correct format.</li>
<li>This returned input element should to be attached to the <code>$cell</code>.</li>
<li>The returned input should have a "search" event triggered upon it after being updated.</li>
</ul>
</li>
<li>Some method should be added to show the user the current value of the selector - update a data attribute for css3 tooltips, or update the header cell.</li>
<li>A reset function needs to also be included; bind to the <code>filterReset</code> event and clear out or disable your custom selector when triggered.
<pre class="prettyprint lang-javascript">$cell.closest('table').bind('filterReset', function(){ /* update the input here */ });</pre>
</li>
<li>If your selector needs a parsed value to work with, add the <code>filter-parsed</code> class name to the header cell above the filter, use this code to do that:
<pre class="prettyprint lang-javascript">$cell.closest('thead').find('th[data-column=' + indx + ']').addClass('filter-parsed');</pre>
</li>
<li>Since, by default, the filter only matches cell content, a <code>1</code> in the filter will show all rows with a one no matter where it is located. So, if you need an exact match, add an equal sign to the end of the value (<code>1=</code>). This forces the filter to exactly match the value in the search input.</li>
</ul>
</div>
</div>
<h1>Demo</h1>
<button class="reset">Reset Search</button>
<div id="demo"><table class="tablesorter">
<thead>
<tr>
<th>Rank</th>
<th>Color</th>
<th>Name</th>
<th>Age</th>
<th>Total</th>
<th>Discount</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<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>#00ffff</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>#ffff00</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>45%</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>45%</td>
<td>Jan 18, 2014 9:12 AM</td>
</tr>
<tr>
<td>10</td>
<td>#00ffff</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>#ffff00</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>#ffff00</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>
</tbody>
</table></div>
<h1>Page Header</h1>
<div>
<pre class="prettyprint lang-html">&lt;!-- jQuery UI for range slider --&gt;
&lt;link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/cupertino/jquery-ui.css"&gt;
&lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"&gt;&lt;/script&gt;
&lt;!-- tablesorter plugin --&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;../css/theme.blue.css&quot;&gt;
&lt;script src=&quot;../js/jquery.tablesorter.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../js/jquery.tablesorter.widgets.js&quot;&gt;&lt;/script&gt;
&lt;!-- filter formatter code --&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;../css/filter.formatter.css&quot;&gt;
&lt;script src=&quot;../js/jquery.tablesorter.widgets-filter-formatter.js&quot;&gt;&lt;/script&gt;</pre>
</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-filter-formatter-2.html">jQuery custom filter widget formatter (part 2) &rsaquo;&rsaquo;</a>
</div>
</div>
</body>
</html>

383
docs/example-widget-filter-formatter-2.html Normal file
View File

@ -0,0 +1,383 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Custom Filter Widget Formatter (part 2)</title>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<!-- Demo stuff -->
<link class="ui-theme" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/cupertino/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<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>
<script src="../js/jquery.tablesorter.widgets-filter-formatter.js"></script>
<script>
$(function(){
$('.accordion').accordion({
heightStyle: 'content',
collapsible : true
});
});
</script>
<script id="js">$(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 : {
0 : function($cell, indx){
return $.tablesorter.filterFormatter.html5Range( $cell, indx, {
value: 0,
min: 0,
max: 100,
valueToHeader: true
});
},
1 : function($cell, indx){
return $.tablesorter.filterFormatter.html5Color( $cell, indx, {
value: '#000000',
addToggle: true,
valueToHeader: false
});
},
3: function($cell, indx){
return $.tablesorter.filterFormatter.html5Number( $cell, indx, {
value: 1,
min: 1,
max: 65,
addToggle: true,
exactMatch: true
});
}
}
}
});
});</script>
</head>
<body>
<div id="banner">
<h1>table<em>sorter</em></h1>
<h2>Custom Filter Widget Formatter (part 2)</h2>
<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>
<li>This page shows you how to add a few default <strong>HTML5 elements</strong> to interact with the filter widget.</li>
<li>Custom filter widget option <code>filter_formatter</code> was added in version 2.7.7.</li>
<li>This widget "should" work with tablesorter v2.0.5.</li>
<li>jQuery v1.4.3+ required.</li>
</ul>
</div>
<h3><a href="#"><strong>HTML Range</strong> ("Rank" column)</a></h3>
<div>
<ul>
<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:<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 : {
0 : function($cell, indx){
return $.tablesorter.filterFormatter.html5Range( $cell, indx, {
value: 0,
min: 0,
max: 100,
valueToHeader: true,
exactMatch: true,
allText: 'all'
});
}
}
}
});
});</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>
</ul>
</div>
<h3><a href="#"><strong>HTML5 color input</strong> ("Color" column)</a></h3>
<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 : {
1 : function($cell, indx){
return $.tablesorter.filterFormatter.html5Color( $cell, indx, {
value: '#000000',
addToggle: true,
valueToHeader: false
});
}
}
}
});
});</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>
<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>
<h3><a href="#"><strong>HTML5 Number Selector</strong> ("Age" column)</a></h3>
<div>
<ul>
<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:<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 : {
3: function($cell, indx){
return $.tablesorter.filterFormatter.html5Number( $cell, indx, {
value: 1,
min: 1,
max: 65,
addToggle: true,
exactMatch: true
});
}
}
}
});
});</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>
</ul>
</div>
</div>
<h1>Demo</h1>
<button class="reset">Reset Search</button>
<div id="demo"><table class="tablesorter">
<thead>
<tr>
<th>Rank</th>
<th>Color</th>
<th>Name</th>
<th>Age</th>
<th>Total</th>
<th>Discount</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<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>
</tbody>
</table></div>
<h1>Page Header</h1>
<div>
<pre class="prettyprint lang-html">&lt;!-- jQuery UI for range slider --&gt;
&lt;link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/cupertino/jquery-ui.css"&gt;
&lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"&gt;&lt;/script&gt;
&lt;!-- tablesorter plugin --&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;../css/theme.blue.css&quot;&gt;
&lt;script src=&quot;../js/jquery.tablesorter.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;../js/jquery.tablesorter.widgets.js&quot;&gt;&lt;/script&gt;
&lt;!-- filter formatter code --&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;../css/filter.formatter.css&quot;&gt;
&lt;script src=&quot;../js/jquery.tablesorter.widgets-filter-formatter.js&quot;&gt;&lt;/script&gt;</pre>
</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 &rsaquo;&rsaquo;</a>
</div>
</div>
</body>
</html>

33
docs/example-widget-filter.html
View File

@ -1,10 +1,9 @@
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Filter Widget</title>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js"></script>
@ -33,7 +32,7 @@
<script id="js">$(function() {
// call the tablesorter plugin
$("table").tablesorter({
$("table.tablesorter").tablesorter({
theme: 'blue',
// hidden filter input/selects will resize the columns, so try to minimize the change
@ -95,7 +94,7 @@
$('button.search').click(function(){
/*** first method *** data-filter-column="1" data-filter-text="!son"
add search value to Discount column (zero based index) input */
var filters = $('table').find('input.tablesorter-filter'),
var filters = $('table.tablesorter').find('input.tablesorter-filter'),
col = $(this).data('filter-column'), // zero-based index
txt = $(this).data('filter-text'); // text to add to filter
@ -121,7 +120,7 @@ $(function(){
// *** widgetfilter_startsWith toggle button ***
$('button.toggle').click(function(){
var c = $('table')[0].config,
var c = $('table.tablesorter')[0].config,
// toggle the boolean
fsw = !c.widgetOptions.filter_startsWith,
fic = !c.widgetOptions.filter_ignoreCase;
@ -133,7 +132,7 @@ $(function(){
$('#case').html(fic.toString());
}
// update search after option change; add false to trigger to skip search delay
$('table').trigger('search', false);
$('table.tablesorter').trigger('search', false);
});
});
@ -159,6 +158,24 @@ $(function(){
<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>
<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>&lt; &lt;= &gt;= &gt;</code></td><td>Find alphabetical or numerical values less than or greater than or equal to the filtered query</td><td><code>&gt;= 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>&nbsp;&&&nbsp;</code> or <code>&nbsp;AND&nbsp;</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>&nbsp;OR&nbsp;</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>&nbsp;-&nbsp;</code> or <code>&nbsp;to&nbsp;</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>
</ul>
</div>
@ -421,7 +438,7 @@ $(function(){
<div class="next-up">
<hr />
Next up: <a href="example-widget-filter-custom.html">jQuery filter widget, advanced &rsaquo;&rsaquo;</a>
Next up: <a href="example-widget-filter-custom.html">jQuery custom filter widget &rsaquo;&rsaquo;</a>
</div>
</div>

77
docs/index.html
View File

@ -296,6 +296,7 @@
<li><a href="example-widget-columns.html">Columns widget</a> (v2.0.17)</li>
<li><a href="example-widget-filter.html">Filter widget</a> (v2.0.18)</li>
<li><a href="example-widget-filter-custom.html">Filter widget, custom</a> (v2.3.6)</li>
<li><a href="example-widget-filter-formatter.html">Filter widget, formatter</a> <span class="tip"><em>New</em></span> v2.7.7.</li>
<li><a href="example-widget-ui-theme.html">UITheme widget - jQuery UI theme</a> (v2.0.9; Modified v2.4)</li>
<li><a href="example-widget-bootstrap-theme.html">UITheme widget - Bootstrap</a> (v2.4)</li>
<li><a href="example-widget-resizable.html">Resizable Columns widget</a> (v2.0.23.1; <span class="tip"><em>Modified</em></span> v2.7.4)</li>
@ -343,7 +344,7 @@
<li><a href="http://jsfiddle.net/Mottie/abkNM/325/">tablesorter basic demo using jQuery UI theme</a></li>
<li><a href="http://jsfiddle.net/Mottie/4mVfu/1/">tablesorter basic demo with pager plugin</a></li>
<li><a href="http://codepen.io/Mottie/pen/eqBbn">tableSorter LESS theme; modify the colors dynamically in this LESS theme demo!</a></li>
<li><a href="https://github.com/Mottie/tablesorter/wiki">More demos - added to wiki pages</a></li>
<li>Check out the <a href="https://github.com/Mottie/tablesorter/wiki">home wiki page</a> <span class="tip"><em>more demos</em></span>!</li>
</ul>
<h4 id="metadata">Metadata - setting inline options</h4>
@ -1567,6 +1568,54 @@ $(function(){
<td><a href="example-widget-filter.html">Example</a></td>
</tr>
<tr id="widget-filter-formatter">
<td><a href="#" class="toggle2">filter_formatter</a></td>
<td>Object</td>
<td>null</td>
<td>
Filter widget: This option allows you to add custom controls within the filter widget row. <span class="tip"><em>New! v2.7.7</em></span><br>
<div class="collapsible">
<br>
A new file has been included named "jquery.tablesorter.widgets-filter-formatter.js". It includes code to add jQuery UI and HTML5 controls via the <a href="#widget-filter-formatter"><code>filter_formatter</code></a> option.<br>
<br>
Most of the formatter functions have an option named <code>valueToHeader</code> which, when <code>true</code> adds a span to the header cell above the filter row and updates it with the current control's value (see <a href="example-widget-filter-formatter-2.html">example 2</a>). If the option exists and is set to <code>false</code>, then the current value is added to the control's handle and css can be used to create a popup to show the current value (see <a href="example-widget-filter-formatter-1.html">example 1</a>).<br>
<br>
Another custom option named <code>addToggle</code> is included with the "uiSpinner", "html5Color" and "html5Number" code. This allows the user to disable the control to show all table rows. For the single sliders, "uiSlider" and "html5Range", the minimum value is used to clear the filter (show all rows).<br>
<br>
The options included for each jQuery UI control only show basic options, but any or all of the jQuery UI options for that control can be included.<br>
<ul>
<li>
To add the jQuery UI slider, follow this example:
<pre class="prettyprint lang-javascript">$(function(){
$("table").tablesorter({
widgets: ["filter"],
widgetOptions : {
filter_formatter : {
0 : function($cell, indx){
return $.tablesorter.filterFormatter.<strong>uiSpinner</strong>( $cell, indx, {
value : 0, // starting value
min : 0, // minimum value
max : 50, // maximum value
step : 1, // increment value by
addToggle: true, // Add a toggle to enable/disable the control
valueToHeader: false // add current slider value to the header cell
});
}
}
}
});
});</pre>Any of the other <a href="http://api.jqueryui.com/spinner/">jQuery UI spinner widget options</a> can also be included.<br>
<br>
</li>
<li>Filter formatter functions include: "uiSpinner", "uiSlider", "uiRange" (uiSlider ranged), "uiDatepicker" (range only), "html5Number", "html5Range" and "html5Color".</li>
<li>
For other examples, please refer to the example pages. Formatter part 1 (example 1) adds jQuery UI controls to the filter row, while formatter part 2 (example 2) adds HTML5 controls, if supported, to the filter row.
</li>
</div>
</td>
<td>Ex: <a href="example-widget-filter-formatter-1.html">1</a> <a href="example-widget-filter-formatter-2.html">2</a> </td>
</tr>
<tr id="widget-filter-functions">
<td><a href="#" class="toggle2">filter_functions</a></td>
<td>Object</td>
@ -2285,6 +2334,20 @@ or, directly add the search string to the filter input as follows:<pre class="pr
</td>
<td>Ex: <a href="example-widget-filter.html">1</a> <a href="example-widget-filter-custom.html">2</a> <a href="example-option-show-processing.html">3</a></td>
</tr>
<tr id="filterreset">
<td><a href="#" class="toggle2">filterReset</a></td>
<td>Trigger the filter widget to reset the search criteria. <span class="tip"><em>New!</em></span> v2.7.7.
<div class="collapsible">
If you are using the <code>filter_formatter</code> option to add custom input elements, this function may not work on those columns. Please refer to the <code>filter_formatter</code> section for more details.
<pre class="prettyprint lang-javascript">$(function(){
// this is the same code that the <code>filter_reset</code> element runs to clear out the filters.
$('button').click(function(){
$('table').trigger('filterReset');
});</pre></div>
</td>
<td><a href="example-widget-filter.html">Example</a></td>
</tr>
</tbody>
<!-- non-sorting tbody -->
@ -2649,7 +2712,7 @@ or, directly add the search string to the filter input as follows:<pre class="pr
<strong id="Download-Required">Required:</strong>
<ul>
<li><a class="external" href="http://docs.jquery.com/Downloading_jQuery#Download_jQuery">jQuery</a> (1.2.6 or higher; some demos & <a href="http://api.jquery.com/data/#data-html5">HTML5 data-attributes</a> need jQuery 1.4.3+)</li>
<li><a class="external" href="http://jquery.com/download/">jQuery</a> (1.2.6 or higher; some demos & <a class="external" href="http://api.jquery.com/data/#data-html5">HTML5 data-attributes</a> need jQuery 1.4.3+)</li>
<li><a href="../js/jquery.tablesorter.min.js">jquery.tablesorter.min.js</a> (19kb, minified for production - please put the file on your server)</li>
</ul>
@ -2676,20 +2739,20 @@ or, directly add the search string to the filter input as follows:<pre class="pr
<li>Konqueror</li>
</ul>
<p><a class="external" href="http://docs.jquery.com/Browser_Compatibility">jQuery Browser Compatibility</a></p>
<p><a class="external" href="http://jquery.com/browser-support/">jQuery Browser Compatibility</a></p>
<a id="Support"></a>
<h1>Support</h1>
<p>If you are having a problem with the plugin or you want to submit a feature request, please <a href="https://github.com/Mottie/tablesorter/issues">submit an issue</a>.</p>
<p>If you are having a problem with the plugin or you want to submit a feature request, please <a class="external" href="https://github.com/Mottie/tablesorter/issues">submit an issue</a>.</p>
<p>If you would like to contribute, <a href="https://github.com/Mottie/tablesorter">fork a copy on github</a>.</p>
<p>If you would like to contribute, <a class="external" href="https://github.com/Mottie/tablesorter">fork a copy on github</a>.</p>
<p>Some basic <a href="../test.html">unit testing</a> has been added. If you would like to add more or report a problem, please use the appropriate link above. <span class="tip"><em>New!</em></span> v2.6.</p>
<p>Support is also available through the <a class="external" href="http://jquery.com/discuss/">jQuery Mailing List</a> or <a class="external" href="http://stackoverflow.com/questions/tagged/tablesorter">StackOverflow</a>.</p>
<p>Support is also available from <a class="external" href="http://stackoverflow.com/questions/tagged/tablesorter">stackoverflow</a>.</p>
<p>Access to the jQuery Mailing List is also available through <a class="external" href="http://www.nabble.com/JQuery-f15494.html">Nabble Forums</a>.</p>
<p>For questions about jQuery, try <a class="external" href="http://irc.jquery.org/">irc</a>, <a class="external" href="http://stackoverflow.com/tags/jquery/info">stackoverflow</a>, or the <a class="external" href="http://forum.jquery.com/">jQuery forums</a>.</p>
<a id="Credits"></a>
<h1>Credits</h1>

2
docs/js/docs.js
View File

@ -59,7 +59,7 @@ function showProperty(){
var prop, h = window.location.hash;
if (h) {
prop = $(h);
if (prop.length) {
if (prop.length && prop[0].tagName !== "TABLE") {
prop.find('.collapsible').show();
if (h === '#csschildrow') {
$('#root .tablesorter-childRow').show();

451
js/jquery.tablesorter.widgets-filter-formatter.js Normal file
View File

@ -0,0 +1,451 @@
/*! Filter widget formatter functions - updated 2/17/2013
* requires: tableSorter 2.7.7+ and jQuery 1.4.3+
*
* jQuery UI spinner
* jQuery UI silder
* jQuery UI range slider
* jQuery UI datepicker (range)
* HTML5 number (spinner)
* HTML5 range slider
* HTML5 color selector
*/
/*jshint browser:true, jquery:true, unused:false */
/*global jQuery: false */
;(function($){
"use strict";
$.tablesorter = $.tablesorter || {};
$.tablesorter.filterFormatter = {
/**********************\
jQuery UI Spinner
\**********************/
uiSpinner: function($cell, indx, spinnerDef){
var o = $.extend({
min : 0,
max : 100,
step: 1,
value: 1,
addToggle: true,
disabled: false,
exactMatch: true,
numberFormat: "n"
}, spinnerDef ),
// Add a hidden input to hold the range values
$input = $('<input class="filter" type="hidden">').appendTo($cell),
// this function updates the hidden input and adds the current values to the header cell text
updateSpinner = function(ui) {
var chkd = true,
// ui is not undefined on create
v = ui && ui.value || $('#spinner' + indx).val() || o.value;
if (o.addToggle) {
chkd = $cell.find('.toggle').is(':checked');
}
$cell.find('.filter')
.val( chkd ? v + (o.exactMatch ? '=' : '') : '' ) // add equal to the end, so we filter exact numbers
.trigger('search').end()
.find('#spinner' + indx).spinner( o.disabled || !chkd ? 'disable' : 'enable' );
};
// add callbacks; preserve added callbacks
o.oldcreate = o.create;
o.oldspin = o.spin;
o.create = function(event, ui) {
updateSpinner(); // ui is an empty object on create
if (typeof o.oldcreate === 'function') { o.oldcreate(event, ui); }
};
o.spin = function(event, ui) {
updateSpinner(ui);
if (typeof o.oldspin === 'function') { o.oldspin(event, ui); }
};
if (o.addToggle) {
$('<div class="button"><input id="button' + indx + '" type="checkbox" class="toggle" /><label for="button' + indx + '"></label></div>')
.appendTo($cell)
.find('.toggle')
.bind('change', function(){
updateSpinner();
});
}
// make sure we use parsed data
$cell.closest('thead').find('th[data-column=' + indx + ']').addClass('filter-parsed');
// add a jQuery UI slider!
$('<input id="spinner' + indx + '" />')
.val(o.value)
.appendTo($cell)
.spinner(o)
.bind('change keyup', function(e){
updateSpinner();
});
// on reset
$cell.closest('table').bind('filterReset', function(){
// turn off the toggle checkbox
$cell.find('.toggle')[0].checked = false;
updateSpinner();
});
updateSpinner();
return $input;
},
/**********************\
jQuery UI Slider
\**********************/
uiSlider: function($cell, indx, sliderDef) {
var o = $.extend({
value: 0,
min: 0,
max: 100,
step: 1,
range: "min",
valueToHeader : false,
exactMatch: true,
allText: 'all'
}, sliderDef ),
// Add a hidden input to hold the range values
$input = $('<input class="filter" type="hidden">').appendTo($cell),
// this function updates the hidden input and adds the current values to the header cell text
updateSlider = function(ui) {
// ui is not undefined on create
var v = typeof ui !== "undefined" ? ui.value : o.value;
if (o.valueToHeader) {
// add range indication to the header cell above!
$cell.closest('thead').find('th[data-column=' + indx + ']').find('.curvalue').html(' (' + (v === o.min ? o.allText : v) + ')');
} else {
// add values to the handle data-value attribute so the css tooltip will work properly
$cell.find('.ui-slider-handle').addClass('value-popup').attr('data-value', v === o.min ? o.allText : v);
}
// update the hidden input;
// ****** ADD AN EQUAL SIGN TO THE END! <- this makes the slide exactly match the number ******
// when the value is at the minimum, clear the hidden input so all rows will be seen
$cell.find('.filter').val(v === o.min ? '' : v + (o.exactMatch ? '=' : '')).trigger('search');
};
$cell.closest('thead').find('th[data-column=' + indx + ']').addClass('filter-parsed');
// add span to header for value - only works if the line in the updateSlider() function is also un-commented out
if (o.valueToHeader) {
$cell.closest('thead').find('th[data-column=' + indx + ']').find('.tablesorter-header-inner').append('<span class="curvalue" />');
}
// add callbacks; preserve added callbacks
o.oldcreate = o.create;
o.oldslide = o.slide;
o.create = function(event, ui) {
updateSlider(); // ui is an empty object on create
if (typeof o.oldcreate === 'function') { o.oldcreate(event, ui); }
};
o.slide = function(event, ui) {
updateSlider(ui);
if (typeof o.oldslide === 'function') { o.oldslide(event, ui); }
};
// add a jQuery UI slider!
$('<div id="slider' + indx + '"/>')
.appendTo($cell)
.slider(o);
// on reset
$cell.closest('table').bind('filterReset', function(){
$cell.find('div[id*="slider"]').slider('value', o.value);
updateSlider();
});
return $input;
},
/*************************\
jQuery UI Range Slider (2 handles)
\*************************/
uiRange: function($cell, indx, rangeDef) {
var o = $.extend({
values : [0, 100],
min : 0,
max : 100,
range: true,
valueToHeader : false
}, rangeDef ),
// Add a hidden input to hold the range values
$input = $('<input class="filter" type="hidden">').appendTo($cell),
// this function updates the hidden input and adds the current values to the header cell text
updateUiRange = function(ui) {
// ui.values are undefined for some reason on create
var val = typeof ui !== "undefined" && ui.values || o.values,
range = val[0] + ' - ' + val[1];
if (o.valueToHeader) {
// add range indication to the header cell above (if not using the css method)!
$cell.closest('thead').find('th[data-column=' + indx + ']').find('.currange').html(' (' + range + ')');
} else {
// add values to the handle data-value attribute so the css tooltip will work properly
$cell.find('.ui-slider-handle')
.addClass('value-popup')
.eq(0).attr('data-value', val[0]).end() // adding value to data attribute
.eq(1).attr('data-value', val[1]); // value popup shown via css
}
// update the hidden input
$cell.find('.filter').val(range).trigger('search');
};
$cell.closest('thead').find('th[data-column=' + indx + ']').addClass('filter-parsed');
// add span to header for value - only works if the line in the updateSlider() function is also un-commented out
if (o.valueToHeader) {
$cell.closest('thead').find('th[data-column=' + indx + ']').find('.tablesorter-header-inner').append('<span class="currange"/>');
}
// add callbacks; preserve added callbacks
o.oldcreate = o.create;
o.oldslide = o.slide;
// add a jQuery UI range slider!
o.create = function(event, ui) {
updateUiRange(); // ui is an empty object on create
if (typeof o.oldcreate === 'function') { o.oldcreate(event, ui); }
};
o.slide = function(event, ui) {
updateUiRange(ui);
if (typeof o.oldslide === 'function') { o.oldslide(event, ui); }
};
$('<div id="range' + indx +'"/>')
.appendTo($cell)
.slider(o);
// on reset
$cell.closest('table').bind('filterReset', function(){
$cell.find('div[id*="range"]').slider('values', o.values);
updateUiRange();
});
// return the hidden input so the filter widget has a reference to it
return $input;
},
/*************************\
jQuery UI Datepicker (2 inputs)
\*************************/
uiDatepicker: function($cell, indx, defDate) {
var o = $.extend({
from: '',
to: '',
changeMonth: true,
changeYear: true,
numberOfMonths: 1
}, defDate),
// Add a hidden input to hold the range values
$input = $('<input class="dateRange" type="hidden">').appendTo($cell);
// make sure we're using parsed dates in the search
$cell.closest('thead').find('th[data-column=' + indx + ']').addClass('filter-parsed');
// Add date range picker
$('<label>From</label><input type="text" class="dateFrom" /><label>to</label><input type="text" class="dateTo" />').appendTo($cell);
// add callbacks; preserve added callbacks
o.oldonClose = o.onClose;
o.defaultDate = o.defaultDate || o.from;
o.onClose = function( selectedDate, ui ) {
var from = ( (new Date(selectedDate)).getTime() || ''),
to = (new Date($cell.find('.dateTo').val()).getTime() || ''),
range = from && to ? from + ' - ' + to : '';
$cell
.find('.dateTo').datepicker('option', 'minDate', selectedDate).end()
// update hidden input
.find('.dateRange').val(range)
.trigger('search');
if (typeof o.oldonClose === 'function') { o.oldonClose(selectedDate, ui); }
};
$cell.find('.dateFrom').datepicker(o);
o.defaultDate = o.defaultDate || o.to;
o.onClose = function( selectedDate, ui ) {
var from = ( new Date($cell.find('.dateFrom').val()).getTime() || ''),
to = ((new Date(selectedDate)).getTime() || ''),
range = from && to ? from + ' - ' + to : '';
$cell
.find('.dateFrom').datepicker('option', 'maxDate', selectedDate ).end()
.find('.dateRange').val(range)
.trigger('search');
if (typeof o.oldonClose === 'function') { o.oldonClose(selectedDate, ui); }
};
$cell.find('.dateTo').datepicker(o);
// on reset
$cell.closest('table').bind('filterReset', function(){
$cell.find('.dateFrom, .dateTo').val('').datepicker('option', 'currentText', '' );
});
// return the hidden input so the filter widget has a reference to it
return $input;
},
/**********************\
HTML5 Number (spinner)
\**********************/
html5Number : function($cell, indx, def5Num) {
var t, o = $.extend({
value: 0,
min: 0,
max: 100,
step: 1,
disabled: false,
addToggle: true,
exactMatch: true
}, def5Num),
// test browser for HTML5 range support
$number = $('<input type="number" style="visibility:hidden;" value="test">').appendTo($cell),
// test if HTML5 number is supported - from Modernizr
numberSupported = $number.attr('type') === 'number' && $number.val() !== 'test',
updateNumber = function(){
var chkd = true, val = $cell.find('.number').val();
if (o.addToggle) {
chkd = $cell.find('.toggle').is(':checked');
}
$cell
.find('input[type=hidden]').val( chkd ? val + (o.exactMatch ? '=' : '') : '' ) // add equal to the end, so we filter exact numbers
.trigger('search').end()
.find('.number')[0].disabled = (o.disabled || !chkd);
};
$number.remove();
if (numberSupported) {
t = o.addToggle ? '<div class="button"><input id="button' + indx + '" type="checkbox" class="toggle" /><label for="button' + indx + '"></label></div>' : '';
t += '<input type="hidden"><input class="number" type="number" min="' + o.min + '" max="' + o.max + '" value="' +
o.value + '" step="' + o.step + '" />';
// add HTML5 number (spinner)
$cell
.html(t)
.find('.toggle, .number').bind('change', function(){
updateNumber();
})
.closest('thead').find('th[data-column=' + indx + ']')
.addClass('filter-parsed') // get exact numbers from column
// on reset
.closest('table').bind('filterReset', function(){
// turn off the toggle checkbox
$cell.find('.toggle')[0].checked = false;
updateNumber();
});
}
updateNumber();
return numberSupported ? $cell.find('input[type="hidden"]') : $('<input type="search">');
},
/**********************\
HTML5 range slider
\**********************/
html5Range : function($cell, indx, def5Range) {
var t, o = $.extend({
value: 0,
min: 0,
max: 100,
step: 1,
valueToHeader: true,
exactMatch: true,
allText: 'all'
}, def5Range),
// test browser for HTML5 range support
$range = $('<input type="range" style="visibility:hidden;" value="test">').appendTo($cell),
// test if HTML5 range is supported - from Modernizr (but I left out the method to detect in Safari 2-4)
// see https://github.com/Modernizr/Modernizr/blob/master/feature-detects/inputtypes.js
rangeSupported = $range.attr('type') === 'range' && $range.val() !== 'test',
updateRange = function(){
/*jshint eqeqeq:false */
var val = $cell.find('.range').val();
$cell
.find('input[type=hidden]').val( val == o.min ? '' : val + (o.exactMatch ? '=' : '')) // add equal to the end, so we filter exact numbers
.trigger('search');
// or add current color to the header cell, if desired
$cell.closest('thead').find('th[data-column=' + indx + ']').find('.curvalue').html(' (' + (val == o.min ? o.allText : val) + ')');
};
$range.remove();
if (rangeSupported) {
// add HTML5 color picker
$cell
.html('<input type="hidden"><input class="range" type="range" min="' + o.min + '" max="' + o.max + '" value="' + o.value + '" />')
.closest('thead').find('th[data-column=' + indx + ']')
.addClass('filter-parsed') // get exact numbers from column
// add span to header for the current slider value
.find('.tablesorter-header-inner').append('<span class="curvalue" />');
$cell.find('.range').bind('change', function(){
updateRange();
});
// on reset
$cell.closest('table').bind('filterReset', function(){
// just turn off the colorpicker
$cell.find('input.range').val(o.value);
updateRange();
});
}
updateRange();
return rangeSupported ? $cell.find('input[type="hidden"]') : $('<input type="search">');
},
/**********************\
HTML5 Color picker
\**********************/
html5Color: function($cell, indx, defColor) {
var t, o = $.extend({
value: '#000000',
disabled: false,
addToggle: true,
valueToHeader: false
}, defColor),
// Add a hidden input to hold the range values
$color = $('<input type="color" style="visibility:hidden;" value="test">').appendTo($cell),
// test if HTML5 color is supported - from Modernizr
colorSupported = $color.attr('type') === 'color' && $color.val() !== 'test',
updateColor = function(){
var chkd = true, val = $cell.find('.colorpicker').val();
if (o.addToggle) {
chkd = $cell.find('.toggle').is(':checked');
}
$cell.find('.colorpicker')[0].disabled = (o.disabled || !chkd);
$cell
.find('input[type=hidden]').val( chkd ? val : '' )
.trigger('search');
if (o.valueToHeader) {
// add current color to the header cell
$cell.closest('thead').find('th[data-column=' + indx + ']').find('.curcolor').html(' (' + val + ')');
} else {
// current color to span in cell
$cell.find('.currentColor').html(' (' + val + ')');
}
};
$color.remove();
if (colorSupported) {
// add HTML5 color picker
t = o.addToggle ? '<div class="button"><input id="button' + indx + '" type="checkbox" class="toggle" /><label for="button' + indx + '"></label></div>' : '';
t += '<input type="hidden"><input class="colorpicker" type="color" />';
t += o.valueToHeader ? '' : '<span class="currentColor">(#000000)</span>';
$cell.html(t);
// add span to header for the current color value - only works if the line in the updateColor() function is also un-commented out
if (o.valueToHeader) {
$cell.closest('thead').find('th[data-column=' + indx + ']').find('.tablesorter-header-inner').append('<span class="curcolor" />');
}
$cell.find('.toggle, .colorpicker').bind('change', function(){
updateColor();
});
// on reset
$cell.closest('table').bind('filterReset', function(){
// just turn off the colorpicker
$cell.find('.toggle')[0].checked = false;
updateColor();
});
}
updateColor();
return colorSupported ? $cell.find('input[type="hidden"]') : $('<input type="search">');
}
};
})(jQuery);

6
js/jquery.tablesorter.widgets-filter-formatter.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long