mirror of
https://github.com/Mottie/tablesorter.git
synced 2024-11-15 23:54:22 +00:00
updated filter formatter demos & fixed some issues with the compare option; see #304
This commit is contained in:
Mottie
parent
a389fa198b
commit
da87350800
@ -7,26 +7,31 @@
|
||||
|
||||
/**** Sliders ****/
|
||||
/* shrink the sliders to look nicer inside of a table cell */
|
||||
.ui-slider, input.range {
|
||||
.tablesorter .ui-slider, .tablesorter input.range {
|
||||
width: 90%;
|
||||
margin: 12px auto 2px auto; /* add enough top margin so the tooltips will fit */
|
||||
margin: 2px auto 2px auto; /* add enough top margin so the tooltips will fit */
|
||||
font-size: 0.8em;
|
||||
}
|
||||
.ui-slider .ui-slider-handle{
|
||||
width: 0.8em;
|
||||
height: 0.8em;
|
||||
.tablesorter .ui-slider {
|
||||
top: 12px;
|
||||
}
|
||||
.ui-datepicker {
|
||||
.tablesorter .ui-slider .ui-slider-handle {
|
||||
width: 0.9em;
|
||||
height: 0.9em;
|
||||
}
|
||||
.tablesorter .ui-datepicker {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.tablesorter .ui-slider-horizontal {
|
||||
height: 0.5em;
|
||||
}
|
||||
/* Add tooltips to slider handles */
|
||||
.value-popup:after {
|
||||
.tablesorter .value-popup:after {
|
||||
content : attr(data-value);
|
||||
position: absolute;
|
||||
bottom: 15px;
|
||||
left: -3px;
|
||||
min-width: 14px;
|
||||
bottom: 14px;
|
||||
left: -7px;
|
||||
min-width: 18px;
|
||||
height: 12px;
|
||||
background-color: #444;
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999));
|
||||
@ -41,11 +46,11 @@
|
||||
box-shadow: 0px 0px 4px 0px #777;
|
||||
border: #444 1px solid;
|
||||
color: #fff;
|
||||
font: bold 0.8em/1em Arial;
|
||||
font: 1em/1.1em Arial, Sans-Serif;
|
||||
padding: 1px;
|
||||
text-align: center;
|
||||
}
|
||||
.value-popup:before {
|
||||
.tablesorter .value-popup:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0;
|
||||
@ -60,13 +65,13 @@
|
||||
}
|
||||
|
||||
/**** Date Picker ****/
|
||||
.dateFrom, .dateTo {
|
||||
.tablesorter .dateFrom, .tablesorter .dateTo {
|
||||
width: 80px;
|
||||
margin: 2px 5px;
|
||||
}
|
||||
|
||||
/**** Color Picker Toggle button ****/
|
||||
.button {
|
||||
/**** Color Picker/HTML5Number Toggle button ****/
|
||||
.tablesorter .button {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background: #fcfff4;
|
||||
@ -76,7 +81,7 @@
|
||||
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;
|
||||
margin: 1px 5px 1px 1px;
|
||||
-webkit-border-radius: 25px;
|
||||
-moz-border-radius: 25px;
|
||||
border-radius: 25px;
|
||||
@ -84,10 +89,17 @@
|
||||
-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;
|
||||
top: 3px;
|
||||
display: inline-block;
|
||||
}
|
||||
.tablesorter .color-controls-wrapper .button {
|
||||
top: -5px;
|
||||
}
|
||||
.tablesorter .color-controls-wrapper .currentColor {
|
||||
top: -8px;
|
||||
}
|
||||
|
||||
.button label {
|
||||
.tablesorter .button label {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
@ -108,7 +120,7 @@
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
|
||||
}
|
||||
|
||||
.button label:after {
|
||||
.tablesorter .button label:after {
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
||||
filter: alpha(opacity=0);
|
||||
opacity: 0;
|
||||
@ -132,37 +144,35 @@
|
||||
box-shadow: inset 0px 1px 1px #fff, 0px 1px 3px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.button label:hover::after {
|
||||
.tablesorter .button label:hover::after {
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
|
||||
filter: alpha(opacity=30);
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.button input[type=checkbox] {
|
||||
.tablesorter .button input[type=checkbox] {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.button input[type=checkbox]:checked + label:after {
|
||||
.tablesorter .button input[type=checkbox]:checked + label:after {
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
|
||||
filter: alpha(opacity=100);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.colorpicker {
|
||||
.tablesorter .colorpicker {
|
||||
width: 30px;
|
||||
height: 18px;
|
||||
}
|
||||
.ui-spinner-input {
|
||||
.tablesorter .ui-spinner-input {
|
||||
width: 100px;
|
||||
height: 18px;
|
||||
}
|
||||
.currentColor, .ui-spinner {
|
||||
.tablesorter .currentColor, .tablesorter .ui-spinner {
|
||||
position: relative;
|
||||
top: -8px;
|
||||
}
|
||||
input.number {
|
||||
.tablesorter input.number {
|
||||
position: relative;
|
||||
top: -5px;
|
||||
}
|
||||
|
||||
/* hide filter row */
|
||||
@ -175,4 +185,4 @@ input.number {
|
||||
/* don't use visibility: hidden because it disables tabbing */
|
||||
opacity: 0;
|
||||
filter: alpha(opacity=0);
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,7 +14,9 @@
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<style>
|
||||
th { width: 15%; }
|
||||
</style>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
<link href="../css/theme.blue.css" rel="stylesheet">
|
||||
@ -44,54 +46,69 @@
|
||||
filter_reset : 'button.reset',
|
||||
// add custom selector elements to the filter row
|
||||
filter_formatter : {
|
||||
// Rank
|
||||
0 : function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.uiSlider( $cell, indx, {
|
||||
value: 0,
|
||||
min: 0,
|
||||
max: 100,
|
||||
delayed: true,
|
||||
value : 0,
|
||||
min : 0,
|
||||
max : 100,
|
||||
delayed : true,
|
||||
valueToHeader: false
|
||||
});
|
||||
},
|
||||
2 : function($cell, indx){
|
||||
// Age
|
||||
1 : function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.uiSlider( $cell, indx, {
|
||||
// add any of the jQuery UI Slider options here
|
||||
value: 1,
|
||||
min: 1,
|
||||
max: 65,
|
||||
delayed: false,
|
||||
valueToHeader: false,
|
||||
exactMatch: false,
|
||||
allText: 'all', // need to show "1" as the minimum value (instead of "all")
|
||||
value : 1,
|
||||
min : 1,
|
||||
max : 15,
|
||||
delayed : false,
|
||||
valueToHeader : false,
|
||||
exactMatch : false,
|
||||
allText : 'all', // this is ignored when compare is not empty
|
||||
compare : '>='
|
||||
});
|
||||
},
|
||||
3 : function($cell, indx){
|
||||
// Total
|
||||
2 : function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.uiRange( $cell, indx, {
|
||||
values: [1, 160],
|
||||
min: 1,
|
||||
max: 160,
|
||||
delayed: false,
|
||||
valueToHeader: false
|
||||
values : [1, 160],
|
||||
min : 1,
|
||||
max : 160,
|
||||
delayed : false,
|
||||
valueToHeader : false
|
||||
});
|
||||
},
|
||||
4 : function($cell, indx){
|
||||
// Discount
|
||||
3 : function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.uiSpinner( $cell, indx, {
|
||||
min : 0,
|
||||
max : 45,
|
||||
value: 1,
|
||||
step: 1,
|
||||
delayed: true,
|
||||
addToggle: true,
|
||||
exactMatch: true,
|
||||
numberFormat: "n"
|
||||
value : 1,
|
||||
step : 1,
|
||||
delayed : true,
|
||||
addToggle : true,
|
||||
exactMatch : true,
|
||||
compare: ''
|
||||
});
|
||||
},
|
||||
6 : function($cell, indx){
|
||||
// Date (one input)
|
||||
4 : function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.uiDateCompare( $cell, indx, {
|
||||
date : '1/1/2013', // default from date
|
||||
cellText : 'dates >=', // text added before the input
|
||||
changeMonth : true,
|
||||
changeYear : true,
|
||||
compare : '>='
|
||||
});
|
||||
},
|
||||
// Date (two inputs)
|
||||
5 : 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,
|
||||
changeMonth : true,
|
||||
changeYear : true
|
||||
});
|
||||
}
|
||||
@ -147,7 +164,7 @@
|
||||
|
||||
0 : function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.uiSlider( $cell, indx, {
|
||||
// add any of the jQuery UI Slider options here
|
||||
// add any of the jQuery UI Slider options here (http://api.jqueryui.com/slider/)
|
||||
value: 0, // starting value
|
||||
min: 0, // minimum value
|
||||
max: 100, // maximum value
|
||||
@ -155,20 +172,21 @@
|
||||
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
|
||||
compare: '' // any comparison would override the exactMatch option
|
||||
});
|
||||
},
|
||||
|
||||
2 : function($cell, indx){
|
||||
1 : function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.uiSlider( $cell, indx, {
|
||||
// add any of the jQuery UI Slider options here
|
||||
// add any of the jQuery UI Slider options here (http://api.jqueryui.com/slider/)
|
||||
value: 0, // starting value
|
||||
min: 0, // minimum value
|
||||
max: 100, // maximum value
|
||||
delayed: true, // delay search (set by filter_searchDelay)
|
||||
valueToHeader: false, // add current slider value to the header cell
|
||||
exactMatch: false, // exact (true) or match (false)
|
||||
allText: 'all', // text shown when the slider is at the minimum value
|
||||
compare : '>=' // show values >= selected value
|
||||
allText: 'all', // text shown when slider is at the minimum value; ignored when compare has a value
|
||||
compare: '>=' // show values >= selected value; overrides exactMatch
|
||||
});
|
||||
}
|
||||
|
||||
@ -207,8 +225,9 @@
|
||||
filter_formatter : {
|
||||
|
||||
// Total column
|
||||
3 : function($cell, indx){
|
||||
2 : function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.uiRange( $cell, indx, {
|
||||
// add any of the jQuery UI Slider options (for range selection) here (http://api.jqueryui.com/slider/)
|
||||
values: [1, 160], // starting range
|
||||
min: 1, // minimum value
|
||||
max: 160, // maximum value
|
||||
@ -247,8 +266,9 @@
|
||||
filter_reset : 'button.reset',
|
||||
// add custom selector elements to the filter row
|
||||
filter_formatter : {
|
||||
4 : function($cell, indx){
|
||||
3 : function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.uiSpinner( $cell, indx, {
|
||||
// add any of the jQuery UI Spinner options here (http://api.jqueryui.com/spinner/)
|
||||
min : 0,
|
||||
max : 45,
|
||||
value: 1,
|
||||
@ -256,7 +276,7 @@
|
||||
delayed: true,
|
||||
addToggle: true,
|
||||
exactMatch: true,
|
||||
numberFormat: "n"
|
||||
compare : ''
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -270,12 +290,58 @@
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3><a href="#"><strong>jQuery UI Datepicker Range Selector</strong> ("Date" column)</a></h3>
|
||||
<h3><a href="#"><strong>jQuery UI Datepicker Comparison</strong> ("Date (one input)" column)</a></h3>
|
||||
<div>
|
||||
<ul>
|
||||
<li>This example shows how you can add a jQuery UI Datepicker to compare 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/#default">default functionality</a> example from the jQuery UI docs.</li>
|
||||
<li>Add the following code to apply a datepicker comparison 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 : {
|
||||
4 : function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.uiDateCompare( $cell, indx, {
|
||||
// add any of the jQuery UI Datepicker options here (http://api.jqueryui.com/datepicker/)
|
||||
defaultDate : '1/1/2013', // default date
|
||||
cellText : 'dates >=', // text added before the input
|
||||
changeMonth : true,
|
||||
changeYear : true,
|
||||
compare : '>='
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});</pre></li>
|
||||
<li>There is one issue with this comparison script, and that is with dates that contain a time:
|
||||
<ul>
|
||||
<li>Table data that contains dates with times will be parsed into values that include time.</li>
|
||||
<li>So if the <code>compare</code> option is set to <code>=</code>, it may not show any filtered table rows as none match that date at midnight. To fix this, either remove times from the table data, use a column parser that ignores the time, or use the Datepicker range selector and set the "from" input to the desired day and the "to" input to be the next day (at midnight).</li>
|
||||
<li>Using a <code>compare</code> of <code><=</code> will only show filtered dates from the selected day <em>at midnight</em> with earlier dates; i.e. a cell with the selected date but a time set to noon will not be visible.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<h3><a href="#"><strong>jQuery UI Datepicker Range Selector</strong> ("Date (two inputs)" 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>Updated two input functions so that if the "to" input is empty, all dates greater than the "from" date are shown. If the "from" input is empty, all dates less than the "to" input date are shown (<span class="version updated">v2.10.1</span>).</li>
|
||||
<li>Add the following code to apply a datepicker range selector to the filter row:<pre class="prettyprint lang-javascript">$(function() {
|
||||
|
||||
$("table").tablesorter({
|
||||
@ -291,12 +357,15 @@
|
||||
filter_formatter : {
|
||||
6 : function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.uiDatepicker( $cell, indx, {
|
||||
from : '12/1/2012',
|
||||
to : '2/1/2014',
|
||||
// add any of the jQuery UI Datepicker options here (http://api.jqueryui.com/datepicker/)
|
||||
from : '12/1/2012', // starting date
|
||||
to : '2/1/2014', // ending date
|
||||
textFrom: 'from', // "from" label text
|
||||
textTo: 'to', // "to" label text
|
||||
changeMonth: true,
|
||||
changeYear : true
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -352,29 +421,28 @@
|
||||
<div id="demo"><table class="tablesorter">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Rank</th>
|
||||
<th>Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date 1</th>
|
||||
<th>Date 2</th>
|
||||
<th>Rank (exact)</th>
|
||||
<th>Age (greater than)</th>
|
||||
<th>Total (range)</th>
|
||||
<th>Discount (exact)</th>
|
||||
<th data-placeholder="Try 1/20/2013">Date (one input; greater than)</th>
|
||||
<th>Date (two inputs; range)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>1</td><td>Johnson</td><td>25</td><td>$5.95</td><td>22%</td><td>Jun 26, 2013 7:22 AM</td><td>Jun 26, 2013 7:22 AM</td></tr>
|
||||
<tr><td>11</td><td>Hibert</td><td>12</td><td>$82.99</td><td>5%</td><td>Aug 21, 2013 12:21 PM</td><td>Aug 21, 2013 12:21 PM</td></tr>
|
||||
<tr><td>12</td><td>Henry</td><td>51</td><td>$99.29</td><td>18%</td><td>Oct 13, 2013 1:15 PM</td><td>Oct 13, 2013 1:15 PM</td></tr>
|
||||
<tr><td>51</td><td>Parker</td><td>28</td><td>$9.99</td><td>20%</td><td>Jul 6, 2013 8:14 AM</td><td>Jul 6, 2013 8:14 AM</td></tr>
|
||||
<tr><td>21</td><td>Hood</td><td>33</td><td>$19.99</td><td>25%</td><td>Dec 10, 2012 5:14 AM</td><td>Dec 10, 2012 5:14 AM</td></tr>
|
||||
<tr><td>013</td><td>Kent</td><td>18</td><td>$65.89</td><td>45%</td><td>Jan 12, 2013 11:14 AM</td><td>Jan 12, 2013 11:14 AM</td></tr>
|
||||
<tr><td>005</td><td>Bruce</td><td>45</td><td>$153.19</td><td>45%</td><td>Jan 18, 2014 9:12 AM</td><td>Jan 18, 2014 9:12 AM</td></tr>
|
||||
<tr><td>10</td><td>Alex</td><td>3</td><td>$5.29</td><td>4%</td><td>Jan 8, 2013 5:11 PM</td><td>Jan 8, 2013 5:11 PM</td></tr>
|
||||
<tr><td>16</td><td>Franco</td><td>24</td><td>$14.19</td><td>14%</td><td>Jan 14, 2014 11:23 AM</td><td>Jan 14, 2014 11:23 AM</td></tr>
|
||||
<tr><td>66</td><td>Evans</td><td>22</td><td>$13.19</td><td>11%</td><td>Jan 18, 2013 9:12 AM</td><td>Jan 18, 2013 9:12 AM</td></tr>
|
||||
<tr><td>100</td><td>Brenda</td><td>18</td><td>$55.20</td><td>15%</td><td>Feb 12, 2013 7:23 PM</td><td>Feb 12, 2013 7:23 PM</td></tr>
|
||||
<tr><td>55</td><td>Bronson</td><td>65</td><td>$123.00</td><td>32%</td><td>Jan 20, 2014 1:12 PM</td><td>Jan 20, 2014 1:12 PM</td></tr>
|
||||
<tr><td>9</td><td>Martha</td><td>25</td><td>$22.09</td><td>17%</td><td>Jun 11, 2013 10:55 AM</td><td>Jun 11, 2013 10:55 AM</td></tr>
|
||||
<tr><td>1</td><td>25</td><td>$5.95</td><td>22%</td><td>Jun 26, 2013 7:22 AM</td><td>Jun 26, 2013 7:22 AM</td></tr>
|
||||
<tr><td>11</td><td>12</td><td>$82.99</td><td>5%</td><td>Aug 21, 2013 12:21 PM</td><td>Aug 21, 2013 12:21 PM</td></tr>
|
||||
<tr><td>12</td><td>51</td><td>$99.29</td><td>18%</td><td>Oct 13, 2013 1:15 PM</td><td>Oct 13, 2013 1:15 PM</td></tr>
|
||||
<tr><td>51</td><td>28</td><td>$9.99</td><td>20%</td><td>Jul 6, 2013 8:14 AM</td><td>Jul 6, 2013 8:14 AM</td></tr>
|
||||
<tr><td>21</td><td>33</td><td>$19.99</td><td>25%</td><td>Dec 10, 2012 5:14 AM</td><td>Dec 10, 2012 5:14 AM</td></tr>
|
||||
<tr><td>013</td><td>18</td><td>$65.89</td><td>45%</td><td>Jan 12, 2013 11:14 AM</td><td>Jan 12, 2013 11:14 AM</td></tr>
|
||||
<tr><td>005</td><td>45</td><td>$153.19</td><td>45%</td><td>Jan 18, 2014 9:12 AM</td><td>Jan 18, 2014 9:12 AM</td></tr>
|
||||
<tr><td>10</td><td>3</td><td>$5.29</td><td>4%</td><td>Jan 8, 2013 5:11 PM</td><td>Jan 8, 2013 5:11 PM</td></tr>
|
||||
<tr><td>16</td><td>24</td><td>$14.19</td><td>14%</td><td>Jan 14, 2014 11:23 AM</td><td>Jan 14, 2014 11:23 AM</td></tr>
|
||||
<tr><td>66</td><td>22</td><td>$13.19</td><td>11%</td><td>Jan 18, 2013 9:12 AM</td><td>Jan 18, 2013 9:12 AM</td></tr>
|
||||
<tr><td>100</td><td>18</td><td>$55.20</td><td>15%</td><td>Feb 12, 2013 7:23 PM</td><td>Feb 12, 2013 7:23 PM</td></tr>
|
||||
<tr><td>55</td><td>65</td><td>$123.00</td><td>32%</td><td>Jan 20, 2014 1:12 PM</td><td>Jan 20, 2014 1:12 PM</td></tr>
|
||||
<tr><td>9</td><td>25</td><td>$22.09</td><td>17%</td><td>Jun 11, 2013 10:55 AM</td><td>Jun 11, 2013 10:55 AM</td></tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
|
||||
@ -42,6 +42,7 @@
|
||||
filter_reset : 'button.reset',
|
||||
// add custom selector elements to the filter row
|
||||
filter_formatter : {
|
||||
// Rank
|
||||
0 : function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.html5Range( $cell, indx, {
|
||||
value: 0,
|
||||
@ -51,6 +52,7 @@
|
||||
valueToHeader: true
|
||||
});
|
||||
},
|
||||
// Color
|
||||
1 : function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.html5Color( $cell, indx, {
|
||||
value: '#000000',
|
||||
@ -59,6 +61,7 @@
|
||||
valueToHeader: false
|
||||
});
|
||||
},
|
||||
// Age
|
||||
3: function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.html5Number( $cell, indx, {
|
||||
value: 1,
|
||||
@ -66,7 +69,18 @@
|
||||
max: 65,
|
||||
delayed: true,
|
||||
addToggle: true,
|
||||
exactMatch: true
|
||||
exactMatch: true,
|
||||
compare : ''
|
||||
});
|
||||
},
|
||||
5 : function($cell, indx){
|
||||
return $.tablesorter.filterFormatter.html5Range( $cell, indx, {
|
||||
value: 0,
|
||||
min: 0,
|
||||
max: 44,
|
||||
delayed: true,
|
||||
valueToHeader: true,
|
||||
compare : '>='
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -93,7 +107,7 @@
|
||||
<div>
|
||||
<ul>
|
||||
<li>As of tablesorter version 2.9+, this widget can no longer be applied to versions of tablesorter prior to version 2.8.</li>
|
||||
<li>At this time, these widgets do not work with the sticky header widget.
|
||||
<li>At this time, these widgets do not work with the sticky header widget.</li>
|
||||
<li>This page shows you how to add a few default <strong>HTML5 elements</strong> to interact with the filter widget.</li>
|
||||
<li>If the HTML5 elements are not supported by your browser, you'll just see an input.</li>
|
||||
<li>Custom filter widget option <code>filter_formatter</code> was added in version 2.7.7.</li>
|
||||
@ -126,6 +140,7 @@
|
||||
delayed: true,
|
||||
valueToHeader: true,
|
||||
exactMatch: true,
|
||||
compare : '',
|
||||
allText: 'all'
|
||||
});
|
||||
}
|
||||
|
||||
@ -24,14 +24,13 @@ $.tablesorter.filterFormatter = {
|
||||
var o = $.extend({
|
||||
min : 0,
|
||||
max : 100,
|
||||
step: 1,
|
||||
value: 1,
|
||||
delayed: true,
|
||||
addToggle: true,
|
||||
disabled: false,
|
||||
exactMatch: true,
|
||||
compare: '',
|
||||
numberFormat: "n"
|
||||
step : 1,
|
||||
value : 1,
|
||||
delayed : true,
|
||||
addToggle : true,
|
||||
disabled : false,
|
||||
exactMatch : true,
|
||||
compare : ''
|
||||
}, spinnerDef ),
|
||||
// Add a hidden input to hold the range values
|
||||
$input = $('<input class="filter" type="hidden">').appendTo($cell),
|
||||
@ -46,7 +45,8 @@ $.tablesorter.filterFormatter = {
|
||||
}
|
||||
$cell.find('.filter')
|
||||
// add equal to the beginning, so we filter exact numbers
|
||||
.val( chkd ? (o.exactMatch ? '=' : o.compare) + v : '' )
|
||||
//.val( chkd ? (o.exactMatch ? '=' : o.compare) + v : '' )
|
||||
.val( chkd ? (o.compare ? o.compare : o.exactMatch ? '=' : '') + v : '' )
|
||||
.trigger('search', o.delayed).end()
|
||||
.find('.spinner').spinner( o.disabled || !chkd ? 'disable' : 'enable' );
|
||||
};
|
||||
@ -97,16 +97,16 @@ $.tablesorter.filterFormatter = {
|
||||
\**********************/
|
||||
uiSlider: function($cell, indx, sliderDef) {
|
||||
var o = $.extend({
|
||||
value: 0,
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: 1,
|
||||
range: "min",
|
||||
delayed: true,
|
||||
value : 0,
|
||||
min : 0,
|
||||
max : 100,
|
||||
step : 1,
|
||||
range : "min",
|
||||
delayed : true,
|
||||
valueToHeader : false,
|
||||
exactMatch: true,
|
||||
compare: '',
|
||||
allText: 'all'
|
||||
exactMatch : true,
|
||||
compare : '',
|
||||
allText : 'all'
|
||||
}, sliderDef ),
|
||||
// Add a hidden input to hold the range values
|
||||
$input = $('<input class="filter" type="hidden">').appendTo($cell),
|
||||
@ -114,19 +114,20 @@ $.tablesorter.filterFormatter = {
|
||||
// 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;
|
||||
var v = typeof ui !== "undefined" ? ui.value : o.value,
|
||||
val = o.compare ? v : v === o.min ? o.allText : v;
|
||||
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) + ')');
|
||||
$cell.closest('thead').find('th[data-column=' + indx + ']').find('.curvalue').html(' (' + o.compare + val + ')');
|
||||
} 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);
|
||||
$cell.find('.ui-slider-handle').addClass('value-popup').attr('data-value', o.compare + val);
|
||||
}
|
||||
// update the hidden input;
|
||||
// ****** ADD AN EQUAL SIGN TO THE BEGINNING! <- 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 ? '' : (o.exactMatch ? '=' : o.compare) + v)
|
||||
.val( ( o.compare ? o.compare + v : v === o.min ? '' : (o.exactMatch ? '=' : '') + v ) )
|
||||
.trigger('search', o.delayed);
|
||||
};
|
||||
$cell.closest('thead').find('th[data-column=' + indx + ']').addClass('filter-parsed');
|
||||
@ -169,8 +170,8 @@ $.tablesorter.filterFormatter = {
|
||||
values : [0, 100],
|
||||
min : 0,
|
||||
max : 100,
|
||||
range: true,
|
||||
delayed: true,
|
||||
range : true,
|
||||
delayed : true,
|
||||
valueToHeader : false
|
||||
}, rangeDef ),
|
||||
// Add a hidden input to hold the range values
|
||||
@ -228,16 +229,62 @@ $.tablesorter.filterFormatter = {
|
||||
return $input;
|
||||
},
|
||||
|
||||
/*************************\
|
||||
jQuery UI Datepicker compare (1 inputs)
|
||||
\*************************/
|
||||
uiDateCompare: function($cell, indx, defDate) {
|
||||
var o = $.extend({
|
||||
defaultDate : '',
|
||||
cellText : '',
|
||||
changeMonth : true,
|
||||
changeYear : true,
|
||||
numberOfMonths : 1,
|
||||
compare : ''
|
||||
}, defDate),
|
||||
$hdr = $cell.closest('thead').find('th[data-column=' + indx + ']'),
|
||||
// Add a hidden input to hold the range values
|
||||
$input = $('<input class="dateCompare" type="hidden">').appendTo($cell);
|
||||
|
||||
// make sure we're using parsed dates in the search
|
||||
$hdr.addClass('filter-parsed');
|
||||
// Add date range picker
|
||||
$('<span>' + o.cellText + '<input type="text" class="date" placeholder="' + $hdr.attr('data-placeholder') + '" />').appendTo($cell);
|
||||
|
||||
// add callbacks; preserve added callbacks
|
||||
o.oldonClose = o.onClose;
|
||||
|
||||
o.defaultDate = o.defaultDate || new Date();
|
||||
o.onClose = function( selectedDate, ui ) {
|
||||
var date = ( (new Date(selectedDate)).getTime() || '');
|
||||
$cell
|
||||
// update hidden input
|
||||
.find('.dateCompare').val(o.compare + date)
|
||||
.trigger('search');
|
||||
if (typeof o.oldonClose === 'function') { o.oldonClose(selectedDate, ui); }
|
||||
};
|
||||
$cell.find('.date').datepicker(o);
|
||||
|
||||
// on reset
|
||||
$cell.closest('table').bind('filterReset', function(){
|
||||
$cell.find('.date').val('').datepicker('option', 'currentText', '' );
|
||||
});
|
||||
|
||||
// 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
|
||||
from : '',
|
||||
to : '',
|
||||
textFrom : 'from',
|
||||
textTo : '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);
|
||||
@ -245,16 +292,16 @@ $.tablesorter.filterFormatter = {
|
||||
// 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);
|
||||
$('<label>' + o.textFrom + '</label><input type="text" class="dateFrom" /><label>' + o.textTo + '</label><input type="text" class="dateTo" />').appendTo($cell);
|
||||
|
||||
// add callbacks; preserve added callbacks
|
||||
o.oldonClose = o.onClose;
|
||||
|
||||
o.defaultDate = o.defaultDate || o.from;
|
||||
o.defaultDate = o.from || o.defaultDate || new Date();
|
||||
o.onClose = function( selectedDate, ui ) {
|
||||
var from = ( (new Date(selectedDate)).getTime() || ''),
|
||||
to = (new Date($cell.find('.dateTo').val()).getTime() || ''),
|
||||
range = from && to ? from + ' - ' + to : '';
|
||||
range = from ? ( to ? from + ' - ' + to : '>=' + from ) : (to ? '<=' + to : '');
|
||||
$cell
|
||||
.find('.dateTo').datepicker('option', 'minDate', selectedDate).end()
|
||||
// update hidden input
|
||||
@ -263,12 +310,11 @@ $.tablesorter.filterFormatter = {
|
||||
if (typeof o.oldonClose === 'function') { o.oldonClose(selectedDate, ui); }
|
||||
};
|
||||
$cell.find('.dateFrom').datepicker(o);
|
||||
|
||||
o.defaultDate = o.defaultDate || o.to;
|
||||
o.defaultDate = o.to || '+7d'; // set to date +7 days from today (if not defined)
|
||||
o.onClose = function( selectedDate, ui ) {
|
||||
var from = ( new Date($cell.find('.dateFrom').val()).getTime() || ''),
|
||||
to = ((new Date(selectedDate)).getTime() || ''),
|
||||
range = from && to ? from + ' - ' + to : '';
|
||||
range = from ? ( to ? from + ' - ' + to : '>=' + from ) : (to ? '<=' + to : '');
|
||||
$cell
|
||||
.find('.dateFrom').datepicker('option', 'maxDate', selectedDate ).end()
|
||||
.find('.dateRange').val(range)
|
||||
@ -291,15 +337,15 @@ $.tablesorter.filterFormatter = {
|
||||
\**********************/
|
||||
html5Number : function($cell, indx, def5Num) {
|
||||
var t, o = $.extend({
|
||||
value: 0,
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: 1,
|
||||
delayed: true,
|
||||
disabled: false,
|
||||
addToggle: true,
|
||||
exactMatch: true,
|
||||
compare: ''
|
||||
value : 0,
|
||||
min : 0,
|
||||
max : 100,
|
||||
step : 1,
|
||||
delayed : true,
|
||||
disabled : false,
|
||||
addToggle : true,
|
||||
exactMatch : true,
|
||||
compare : ''
|
||||
}, def5Num),
|
||||
|
||||
// test browser for HTML5 range support
|
||||
@ -311,7 +357,7 @@ $.tablesorter.filterFormatter = {
|
||||
chkd = o.addToggle ? $cell.find('.toggle').is(':checked') : true;
|
||||
$cell.find('input[type=hidden]')
|
||||
// add equal to the beginning, so we filter exact numbers
|
||||
.val( chkd ? (o.exactMatch ? '=' : o.compare) + val : '' )
|
||||
.val( !o.addToggle || chkd ? (o.compare ? o.compare : o.exactMatch ? '=' : '') + val : '' )
|
||||
.trigger('search', o.delayed);
|
||||
if ($cell.find('.number').length) {
|
||||
$cell.find('.number')[0].disabled = (o.disabled || !chkd);
|
||||
@ -348,15 +394,15 @@ $.tablesorter.filterFormatter = {
|
||||
\**********************/
|
||||
html5Range : function($cell, indx, def5Range) {
|
||||
var t, o = $.extend({
|
||||
value: 0,
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: 1,
|
||||
delayed: true,
|
||||
valueToHeader: true,
|
||||
exactMatch: true,
|
||||
compare: '',
|
||||
allText: 'all'
|
||||
value : 0,
|
||||
min : 0,
|
||||
max : 100,
|
||||
step : 1,
|
||||
delayed : true,
|
||||
valueToHeader : true,
|
||||
exactMatch : true,
|
||||
compare : '',
|
||||
allText : 'all'
|
||||
}, def5Range),
|
||||
|
||||
// test browser for HTML5 range support
|
||||
@ -366,13 +412,14 @@ $.tablesorter.filterFormatter = {
|
||||
rangeSupported = $range.attr('type') === 'range' && $range.val() !== 'test',
|
||||
updateRange = function(){
|
||||
/*jshint eqeqeq:false */
|
||||
var val = $cell.find('.range').val();
|
||||
var v = $cell.find('.range').val(); console.log(v, v == o.min);
|
||||
$cell.find('input[type=hidden]')
|
||||
// add equal to the beginning, so we filter exact numbers
|
||||
.val( val == o.min ? '' : (o.exactMatch ? '=' : o.compare) + val)
|
||||
.val( ( o.compare ? o.compare + v : (v == o.min ? '' : (o.exactMatch ? '=' : '') + v ) ) )
|
||||
//( val == o.min ? '' : val + (o.exactMatch ? '=' : ''))
|
||||
.trigger('search', o.delayed);
|
||||
// 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) + ')');
|
||||
$cell.closest('thead').find('th[data-column=' + indx + ']').find('.curvalue').html(' (' + (v == o.min ? o.allText : o.compare + v) + ')');
|
||||
};
|
||||
$range.remove();
|
||||
|
||||
@ -406,11 +453,11 @@ $.tablesorter.filterFormatter = {
|
||||
\**********************/
|
||||
html5Color: function($cell, indx, defColor) {
|
||||
var t, o = $.extend({
|
||||
value: '#000000',
|
||||
disabled: false,
|
||||
addToggle: true,
|
||||
exactMatch: true,
|
||||
valueToHeader: false
|
||||
value : '#000000',
|
||||
disabled : false,
|
||||
addToggle : true,
|
||||
exactMatch : true,
|
||||
valueToHeader : false
|
||||
}, defColor),
|
||||
// Add a hidden input to hold the range values
|
||||
$color = $('<input type="color" style="visibility:hidden;" value="test">').appendTo($cell),
|
||||
@ -439,10 +486,11 @@ $.tablesorter.filterFormatter = {
|
||||
|
||||
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 = '<div class="color-controls-wrapper">';
|
||||
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);
|
||||
$cell.html(t + '</div>');
|
||||
|
||||
// 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) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user