Demo
Rank |
Color |
Name |
Age |
Total |
Discount |
Date |
---|---|---|---|---|---|---|
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 | #00ffff | Parker | 28 | $9.99 | 20% | Jul 6, 2013 8:14 AM |
21 | #ffff00 | Hood | 33 | $19.99 | 25% | Dec 10, 2012 5:14 AM |
013 | #ff0000 | Kent | 18 | $15.89 | 45% | Jan 12, 2013 11:14 AM |
005 | #00ff00 | Bruce | 45 | $153.19 | 45% | Jan 18, 2014 9:12 AM |
10 | #00ffff | Alex | 3 | $5.29 | 4% | Jan 8, 2013 5:11 PM |
16 | #ffff00 | 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 | #ffff00 | 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="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> <!-- 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() { // 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, delayed: true, valueToHeader: false }); }, 3 : function($cell, indx){ return $.tablesorter.filterFormatter.uiRange( $cell, indx, { values: [1, 70], min: 1, max: 70, delayed: true, valueToHeader: false }); }, 5 : 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" }); }, 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, delayed: true, valueToHeader: false }); } } } }); });
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>#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>