Demo
Rank (>=0) | Color | Name | Age | Total (>=0) | Discount | Date |
---|---|---|---|---|---|---|
(#000000) | ||||||
1 | #ff0000 | Johnson | 25 | $5.95 | 22% | Jun 26, 2013 7:22 AM |
11 | #00ff00 | Hibert | 12 | $2.99 | 5% | Aug 21, 2013 12:21 PM |
12 | #0000ff | Henry | 51 | $42.29 | 18% | Oct 13, 2013 1:15 PM |
51 | #00ff00 | Parker | 28 | $9.99 | 20% | Jul 6, 2013 8:14 AM |
21 | #ffffff | Hood | 33 | $19.99 | 25% | Dec 10, 2012 5:14 AM |
013 | #ff0000 | Kent | 18 | $15.89 | 44% | Jan 12, 2013 11:14 AM |
005 | #00ff00 | Bruce | 45 | $153.19 | 44% | Jan 18, 2014 9:12 AM |
10 | #000000 | Alex | 3 | $5.29 | 4% | Jan 8, 2013 5:11 PM |
16 | #ff0000 | Franco | 24 | $14.19 | 14% | Jan 14, 2014 11:23 AM |
66 | #000000 | Evans | 22 | $13.19 | 11% | Jan 18, 2013 9:12 AM |
100 | #ffffff | Brenda | 18 | $55.20 | 15% | Feb 12, 2013 7:23 PM |
55 | #000000 | Bronson | 65 | $123.00 | 32% | Jan 20, 2014 1:12 PM |
9 | #000000 | Martha | 25 | $22.09 | 17% | Jun 11, 2013 10:55 AM |
Page Header
<!-- jQuery UI for range slider -->
<link rel="stylesheet" href="css/jquery-ui.min.css">
<script src="js/jquery-ui-latest.min.js"></script>
<!-- tablesorter plugin -->
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<script src="../js/jquery.tablesorter.widgets.js"></script>
<!-- filter formatter code -->
<link rel="stylesheet" href="../css/filter.formatter.css">
<script src="../js/jquery.tablesorter.widgets-filter-formatter.js"></script>
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", "stickyHeaders"],
widgetOptions : {
// Use the $.tablesorter.storage utility to save the most recent filters
filter_saveFilters : true,
// 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 : {
// Rank
0 : function($cell, indx){
return $.tablesorter.filterFormatter.html5Range( $cell, indx, {
value: 0,
min: 0,
max: 100,
delayed: true,
valueToHeader: true,
compare : [ '=', '>=', '<=' ],
selected: 1
});
},
// Color
1 : function($cell, indx){
return $.tablesorter.filterFormatter.html5Color( $cell, indx, {
value: '#000000',
addToggle: true,
exactMatch: true,
valueToHeader: false
});
},
// Age
3: function($cell, indx){
return $.tablesorter.filterFormatter.html5Number( $cell, indx, {
value: 1,
min: 1,
max: 65,
delayed: true,
addToggle: true,
exactMatch: true,
compare: ''
});
},
// Total
4 : function($cell, indx){
return $.tablesorter.filterFormatter.html5Range( $cell, indx, {
value: 0,
min: 0,
max: 150,
delayed: true,
valueToHeader: true,
compare : '>='
});
},
// Discount
5: function($cell, indx){
return $.tablesorter.filterFormatter.html5Number( $cell, indx, {
value: 1,
min: 1,
max: 44,
delayed: true,
addToggle: false,
compare: [ '<=', '=', '>=' ],
selected: 2
});
}
}
}
});
});
HTML
<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>