jQuery tablesort插件推荐
搜索结果的第一条网址(似乎是Official Site)似乎有问题（也可能是我弄错了 总之chrome中有个叉叉）
所以还是用这个吧http://mottie.github.io/tablesorter/docs/
主需要通过选择器指定好是哪个table table要有thead 然后调用方法就能运行
不过这里有个更妙的 就在刚才的页面底部有很多forks
比如这个http://mottie.github.io/tablesorter/docs/example-widget-bootstrap-theme.html
加上了bootstrap的主题(用上了bootstrap样式啦) 还增加了过滤条件 翻页什么的 很不错哟！
这些forks很多都是只有demo但是没有下载的 在抠HTML的时候要注意
在一个demo中对于table里面的html 都是经过js插件处理后的html 不能直接拿来用 可以先disable js的状态下再查看html
废话不多说 直接上
HTML
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%> <c:set var="propath" value="${pageContext.request.contextPath}" /> <!-- 项目根路径 --> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link href="${propath}/css/bootstrap.min.css" rel="stylesheet"> <link href="http://cdn.bootcss.com/twitter-bootstrap/2.3.2/css/bootstrap-responsive.min.css" rel="stylesheet"> <link href="${propath}/css/index2/doc.css" rel="stylesheet"> <link href="${propath}/css/index2/myBasic.css" rel="stylesheet"> <link href="${propath}/css/affix/affix.css" rel="stylesheet"> <link href="${propath}/css/datePicker/bootstrap-datetimepicker.min.css" rel="stylesheet"> <link href="${propath}/css/tablesort/tablesort.css" rel="stylesheet"> <!-- script --> <!-- script --> <!-- script --> <!-- script --> <!-- script --> <!-- script --> <!-- script --> <!-- script --> <!-- script --> <!-- script --> <script src="${propath}/js/jquery-1.9.0.min.js" charset="utf-8"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script> <script src="${propath}/js/bootstrap.min.js" charset="utf-8"></script> <script src="${propath}/js/datePicker/bootstrap-datetimepicker.min.js" charset="utf-8"></script> <script src="${propath}/js/tablesorter/tablesorter.js" charset="utf-8"></script> <script src="${propath}/js/tablesorter/jquery.tablesorter.widgets.js" charset="utf-8"></script> <script src="${propath}/js/tablesorter/jquery.tablesorter.pager.js" charset="utf-8"></script> <script src="forTableSorter.js" charset="utf-8"> </script> </head> <body data-spy="scroll" data-target=".bs-docs-sidebar" style=""> <div class="demo1"> <table id="myTable" class="tablesorter"> <thead> <tr> <th>Account #</th> <th>First Name</th> <th>Last Name</th> <th>Age</th> <th>Total</th> <th>Discount</th> <th>Difference</th> <th>Date</th> </tr> </thead> <tbody> <tr> <td>A42b</td> <td>Peter</td> <td>Parker</td> <td>28</td> <td>$9.99</td> <td>20.9%</td> <td>+12.1</td> <td>Jul 6, 2006 8:14 AM</td> </tr> <tr> <td>A255</td> <td>John</td> <td>Hood</td> <td>33</td> <td>$19.99</td> <td>25%</td> <td>+12</td> <td>Dec 10, 2002 5:14 AM</td> </tr> <tr> <td>A33</td> <td>Clark</td> <td>Kent</td> <td>18</td> <td>$15.89</td> <td>44%</td> <td>-26</td> <td>Jan 12, 2003 11:14 AM</td> </tr> <tr> <td>A1</td> <td>Bruce</td> <td>Almighty</td> <td>45</td> <td>$153.19</td> <td>44.7%</td> <td>+77</td> <td>Jan 18, 2001 9:12 AM</td> </tr> <tr> <td>A102</td> <td>Bruce</td> <td>Evans</td> <td>22</td> <td>$13.19</td> <td>11%</td> <td>-100.9</td> <td>Jan 18, 2007 9:12 AM</td> </tr> <tr> <td>A42a</td> <td>Bruce</td> <td>Evans</td> <td>22</td> <td>$13.19</td> <td>11%</td> <td>0</td> <td>Jan 18, 2007 9:12 AM</td> </tr> </tbody> </table> </div> <!-- DDDDDDDDDDDDDDDDDDD DDDDDDDDDDDDDDDDDDDDD DDDDDDDDDDDDDDDDDDDDDD DDDDDDDDDDDDDDDDDSDDDDDD DDDDDD DDDDDDDDDD DDDDDD DDDDDDDDDD DDDDDD DDDDDDDDDD DDDDDD DDDDDDDDDD DDDDDD DDDDDDDDDD DDDDDD DDDDDDDDD DDDDDD DDDDDDDDDD DDDDDD DDDDDDDDDD DDDDDDDDDDDDDDDDDDDDDDDD DDDDDDDDDDDDDDDDDDDDDDD DDDDDDDDDDDDDDDDDDDDDD DDDDDDDDDDDDDDDDDDDD --> <div class="bootstrap_buttons"> Reset filter : <button data-filter="" data-column="0" class="reset btn btn-primary" type="button"><i class="icon-white icon-refresh glyphicon glyphicon-refresh"></i> Reset filters</button> </div> <table class="tablesorter" id="myTable2"> <thead> <tr> <th>Name</th> <th>Major</th> <th class="filter-select filter-exact" data-placeholder="Pick a gender">Sex</th> <th>English</th> <th>Japanese</th> <th>Calculus</th> <th>Geometry</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Major</th> <th>Sex</th> <th>English</th> <th>Japanese</th> <th>Calculus</th> <th>Geometry</th> </tr> <tr> <th colspan="7" class="ts-pager form-horizontal"> <button type="button" class="btn first"> <i class="icon-step-backward glyphicon glyphicon-step-backward"></i> </button> <button type="button" class="btn prev"> <i class="icon-arrow-left glyphicon glyphicon-backward"></i> </button> <span class="pagedisplay"></span> <!-- this can be any element, including an input --> <button type="button" class="btn next"> <i class="icon-arrow-right glyphicon glyphicon-forward"></i> </button> <button type="button" class="btn last"> <i class="icon-step-forward glyphicon glyphicon-step-forward"></i> </button> <select class="pagesize input-mini" title="Select page size"> <option selected="selected" value="10">10</option> <option value="20">20</option> <option value="30">30</option> <option value="40">40</option> </select> <select class="pagenum input-mini" title="Select page number"></select> </th> </tr> </tfoot> <tbody> <tr> <td>Student01</td> <td>Languages</td> <td>male</td> <td>80</td> <td>70</td> <td>75</td> <td>80</td> </tr> <tr> <td>Student02</td> <td>Mathematics</td> <td>male</td> <td>90</td> <td>88</td> <td>100</td> <td>90</td> </tr> <tr> <td>Student03</td> <td>Languages</td> <td>female</td> <td>85</td> <td>95</td> <td>80</td> <td>85</td> </tr> <tr> <td>Student04</td> <td>Languages</td> <td>male</td> <td>60</td> <td>55</td> <td>100</td> <td>100</td> </tr> <tr> <td>Student05</td> <td>Languages</td> <td>female</td> <td>68</td> <td>80</td> <td>95</td> <td>80</td> </tr> <tr> <td>Student06</td> <td>Mathematics</td> <td>male</td> <td>100</td> <td>99</td> <td>100</td> <td>90</td> </tr> <tr> <td>Student07</td> <td>Mathematics</td> <td>male</td> <td>85</td> <td>68</td> <td>90</td> <td>90</td> </tr> <tr> <td>Student08</td> <td>Languages</td> <td>male</td> <td>100</td> <td>90</td> <td>90</td> <td>85</td> </tr> <tr> <td>Student09</td> <td>Mathematics</td> <td>male</td> <td>80</td> <td>50</td> <td>65</td> <td>75</td> </tr> <tr> <td>Student10</td> <td>Languages</td> <td>male</td> <td>85</td> <td>100</td> <td>100</td> <td>90</td> </tr> <tr> <td>Student11</td> <td>Languages</td> <td>male</td> <td>86</td> <td>85</td> <td>100</td> <td>100</td> </tr> <tr> <td>Student12</td> <td>Mathematics</td> <td>female</td> <td>100</td> <td>75</td> <td>70</td> <td>85</td> </tr> <tr> <td>Student13</td> <td>Languages</td> <td>female</td> <td>100</td> <td>80</td> <td>100</td> <td>90</td> </tr> <tr> <td>Student14</td> <td>Languages</td> <td>female</td> <td>50</td> <td>45</td> <td>55</td> <td>90</td> </tr> <tr> <td>Student15</td> <td>Languages</td> <td>male</td> <td>95</td> <td>35</td> <td>100</td> <td>90</td> </tr> <tr> <td>Student16</td> <td>Languages</td> <td>female</td> <td>100</td> <td>50</td> <td>30</td> <td>70</td> </tr> <tr> <td>Student17</td> <td>Languages</td> <td>female</td> <td>80</td> <td>100</td> <td>55</td> <td>65</td> </tr> <tr> <td>Student18</td> <td>Mathematics</td> <td>male</td> <td>30</td> <td>49</td> <td>55</td> <td>75</td> </tr> <tr> <td>Student19</td> <td>Languages</td> <td>male</td> <td>68</td> <td>90</td> <td>88</td> <td>70</td> </tr> <tr> <td>Student20</td> <td>Mathematics</td> <td>male</td> <td>40</td> <td>45</td> <td>40</td> <td>80</td> </tr> <tr> <td>Student21</td> <td>Languages</td> <td>male</td> <td>50</td> <td>45</td> <td>100</td> <td>100</td> </tr> <tr> <td>Student22</td> <td>Mathematics</td> <td>male</td> <td>100</td> <td>99</td> <td>100</td> <td>90</td> </tr> <tr> <td>Student23</td> <td>Mathematics</td> <td>male</td> <td>82</td> <td>77</td> <td>0</td> <td>79</td> </tr> <tr> <td>Student24</td> <td>Languages</td> <td>female</td> <td>100</td> <td>91</td> <td>13</td> <td>82</td> </tr> <tr> <td>Student25</td> <td>Mathematics</td> <td>male</td> <td>22</td> <td>96</td> <td>82</td> <td>53</td> </tr> <tr> <td>Student26</td> <td>Languages</td> <td>female</td> <td>37</td> <td>29</td> <td>56</td> <td>59</td> </tr> <tr> <td>Student27</td> <td>Mathematics</td> <td>male</td> <td>86</td> <td>82</td> <td>69</td> <td>23</td> </tr> <tr> <td>Student28</td> <td>Languages</td> <td>female</td> <td>44</td> <td>25</td> <td>43</td> <td>1</td> </tr> <tr> <td>Student29</td> <td>Mathematics</td> <td>male</td> <td>77</td> <td>47</td> <td>22</td> <td>38</td> </tr> <tr> <td>Student30</td> <td>Languages</td> <td>female</td> <td>19</td> <td>35</td> <td>23</td> <td>10</td> </tr> <tr> <td>Student31</td> <td>Mathematics</td> <td>male</td> <td>90</td> <td>27</td> <td>17</td> <td>50</td> </tr> <tr> <td>Student32</td> <td>Languages</td> <td>female</td> <td>60</td> <td>75</td> <td>33</td> <td>38</td> </tr> <tr> <td>Student33</td> <td>Mathematics</td> <td>male</td> <td>4</td> <td>31</td> <td>37</td> <td>15</td> </tr> <tr> <td>Student34</td> <td>Languages</td> <td>female</td> <td>77</td> <td>97</td> <td>81</td> <td>44</td> </tr> <tr> <td>Student35</td> <td>Mathematics</td> <td>male</td> <td>5</td> <td>81</td> <td>51</td> <td>95</td> </tr> <tr> <td>Student36</td> <td>Languages</td> <td>female</td> <td>70</td> <td>61</td> <td>70</td> <td>94</td> </tr> <tr> <td>Student37</td> <td>Mathematics</td> <td>male</td> <td>60</td> <td>3</td> <td>61</td> <td>84</td> </tr> <tr> <td>Student38</td> <td>Languages</td> <td>female</td> <td>63</td> <td>39</td> <td>0</td> <td>11</td> </tr> <tr> <td>Student39</td> <td>Mathematics</td> <td>male</td> <td>50</td> <td>46</td> <td>32</td> <td>38</td> </tr> <tr> <td>Student40</td> <td>Languages</td> <td>female</td> <td>51</td> <td>75</td> <td>25</td> <td>3</td> </tr> <tr> <td>Student41</td> <td>Mathematics</td> <td>male</td> <td>43</td> <td>34</td> <td>28</td> <td>78</td> </tr> <tr> <td>Student42</td> <td>Languages</td> <td>female</td> <td>11</td> <td>89</td> <td>60</td> <td>95</td> </tr> <tr> <td>Student43</td> <td>Mathematics</td> <td>male</td> <td>48</td> <td>92</td> <td>18</td> <td>88</td> </tr> <tr> <td>Student44</td> <td>Languages</td> <td>female</td> <td>82</td> <td>2</td> <td>59</td> <td>73</td> </tr> <tr> <td>Student45</td> <td>Mathematics</td> <td>male</td> <td>91</td> <td>73</td> <td>37</td> <td>39</td> </tr> <tr> <td>Student46</td> <td>Languages</td> <td>female</td> <td>4</td> <td>8</td> <td>12</td> <td>10</td> </tr> <tr> <td>Student47</td> <td>Mathematics</td> <td>male</td> <td>89</td> <td>10</td> <td>6</td> <td>11</td> </tr> <tr> <td>Student48</td> <td>Languages</td> <td>female</td> <td>90</td> <td>32</td> <td>21</td> <td>18</td> </tr> <tr> <td>Student49</td> <td>Mathematics</td> <td>male</td> <td>42</td> <td>49</td> <td>49</td> <td>72</td> </tr> <tr> <td>Student50</td> <td>Languages</td> <td>female</td> <td>56</td> <td>37</td> <td>67</td> <td>54</td> </tr> </tbody> </table> </body> </html> </html>
JS
$(document).ready(function() { $("#myTable").tablesorter(); }); $(function() { $.extend($.tablesorter.themes.bootstrap, { // these classes are added to the table. To see other table classes // available, // look here: http://twitter.github.com/bootstrap/base-css.html#tables table : 'table table-bordered', caption : 'caption', header : 'bootstrap-header', // give the header a gradient background footerRow : '', footerCells : '', icons : '', // add "icon-white" to make them white; this icon class is // added to the <i>in the header sortNone : 'bootstrap-icon-unsorted', sortAsc : 'icon-chevron-up glyphicon glyphicon-chevron-up', // includes // classes // for // Bootstrap // v2 & v3 sortDesc : 'icon-chevron-down glyphicon glyphicon-chevron-down', // includes // classes // for // Bootstrap // v2 & // v3 active : '', // applied when column is sorted hover : '', // use custom css here - bootstrap class may not override it filterRow : '', // filter row class even : '', // odd row zebra striping odd : '' // even row zebra striping }); // call the tablesorter plugin and apply the uitheme widget $("#myTable2").tablesorter({ // this will apply the bootstrap theme if "uitheme" widget is included // the widgetOptions.uitheme is no longer required to be set theme : "bootstrap", widthFixed : true, headerTemplate : '{content} {icon}', // new in v2.7. Needed to add // the bootstrap icon! // widget code contained in the jquery.tablesorter.widgets.js file // use the zebra stripe widget if you plan on hiding any rows (filter // widget) widgets : [ "uitheme", "filter", "zebra" ], widgetOptions : { // using the default zebra striping class name, so it actually isn't // included in the theme variable above // this is ONLY needed for bootstrap theming if you are using the // filter widget, because rows are hidden zebra : [ "even", "odd" ], // reset filters button filter_reset : ".reset" // set the uitheme widget to use the bootstrap theme class names // this is no longer required, if theme is set // ,uitheme : "bootstrap" } }).tablesorterPager({ // target the pager markup - see the HTML block below container : $(".ts-pager"), // target the pager page select dropdown - choose a page cssGoto : ".pagenum", // remove rows from the table to speed up the sort of large tables. // setting this to false, only hides the non-visible rows; needed if you // plan to add/remove rows with the pager enabled. removeRows : false, // output string - default is '{page}/{totalPages}'; // possible variables: {page}, {totalPages}, {filteredPages}, // {startRow}, {endRow}, {filteredRows} and {totalRows} output : '{startRow} - {endRow} / {filteredRows} ({totalRows})' }); });
CSS
@CHARSET "UTF-8"; /* 针对第一个表格的 */ div.demo1 table.tablesorter { background-color: #CDCDCD; font-family: arial; font-size: 8pt; margin: 10px 0 15px; text-align: left; width: 100%; } div.demo1 table.tablesorter thead tr th,div.demo1 table.tablesorter tfoot tr th { background-color: #E6EEEE; border: 1px solid #FFFFFF; font-size: 8pt; padding: 4px; } div.demo1 table.tablesorter thead tr .header { background-image: url("bg.gif"); background-position: right center; background-repeat: no-repeat; cursor: pointer; } div.demo1 table.tablesorter tbody td { background-color: #FFFFFF; color: #3D3D3D; padding: 4px; vertical-align: top; } div.demo1 table.tablesorter tbody tr.odd td { background-color: #F0F0F6; } div.demo1 table.tablesorter thead tr .headerSortUp { background-image: url("asc.gif"); } div.demo1 table.tablesorter thead tr .headerSortDown { background-image: url("desc.gif"); } div.demo1 table.tablesorter thead tr .headerSortDown,div.demo1 table.tablesorter thead tr .headerSortUp { background-color: #8DBDD8; } /************* Bootstrap theme *************/ /* jQuery Bootstrap Theme */ .tablesorter-bootstrap { width: 100%; } .tablesorter-bootstrap .tablesorter-header, .tablesorter-bootstrap tfoot th, .tablesorter-bootstrap tfoot td { font: bold 14px/20px Arial, Sans-serif; padding: 4px; margin: 0 0 18px; background-color: #eee; } .tablesorter-bootstrap .tablesorter-header { cursor: pointer; } .tablesorter-bootstrap .tablesorter-header-inner { position: relative; padding: 4px 18px 4px 4px; } /* bootstrap uses <i> for icons */ .tablesorter-bootstrap .tablesorter-header i { font-size: 11px; position: absolute; right: 2px; top: 50%; margin-top: -7px; /* half the icon height; older IE doesn't like this */ width: 14px; height: 14px; background-repeat: no-repeat; line-height: 14px; display: inline-block; } .tablesorter-bootstrap .bootstrap-icon-unsorted { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAOCAYAAAD5YeaVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAWVJREFUeNqUUL9Lw2AUTGP8mqGlpBQkNeCSRcckEBcHq1jImMElToKuDvpHFMGhU0BQcHBwLji6CE1B4uB/INQsDi4d2jQ/fPeZxo764OV6915f7lLJ81xot9tCURXqdVEUr7IsO6ffH9Q5BlEUCaLwWxWqTcbYnaIoh0Dw4gAvcWlxq1qt9hqNxg6hUGAP+uIPUrGs0qXLer2+v/pTX6QpxLtkc2U2m53ACb8sSdIDXerSEms2m6+DweAICA4d89KGbduf9MpEVdXQ9/2LVqv1CASHjjn3iq/x1xKFfxQPqGnada1W86bT6SiO42OS3qk3KPStLMvbk8nkfjwen/LLuq6blFymMB0KdUPSGhAcOualjX6/f0bCiC7NaWGPQr0BwaFjzn0gYJqmLAiCA8/zni3LmhuGkQPBoWPOPwQeaPIqD4fDruu6L6Zp5kBw6IudchmdJAkLw3DXcZwnIPjy/FuAAQCiqqWWCAFKcwAAAABJRU5ErkJggg==); } /* since bootstrap (table-striped) uses nth-child(), we just use this to add a zebra stripe color */ .tablesorter-bootstrap tr.odd td { background-color: #f9f9f9; } .tablesorter-bootstrap tbody > .odd:hover > td, .tablesorter-bootstrap tbody > .even:hover > td { background-color: #f5f5f5; } .tablesorter-bootstrap tr.even td { background-color: #fff; } /* processing icon */ .tablesorter-bootstrap .tablesorter-processing { background-image: url('data:image/gif;base64,R0lGODlhFAAUAKEAAO7u7lpaWgAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQBCgACACwAAAAAFAAUAAACQZRvoIDtu1wLQUAlqKTVxqwhXIiBnDg6Y4eyx4lKW5XK7wrLeK3vbq8J2W4T4e1nMhpWrZCTt3xKZ8kgsggdJmUFACH5BAEKAAIALAcAAAALAAcAAAIUVB6ii7jajgCAuUmtovxtXnmdUAAAIfkEAQoAAgAsDQACAAcACwAAAhRUIpmHy/3gUVQAQO9NetuugCFWAAAh+QQBCgACACwNAAcABwALAAACE5QVcZjKbVo6ck2AF95m5/6BSwEAIfkEAQoAAgAsBwANAAsABwAAAhOUH3kr6QaAcSrGWe1VQl+mMUIBACH5BAEKAAIALAIADQALAAcAAAIUlICmh7ncTAgqijkruDiv7n2YUAAAIfkEAQoAAgAsAAAHAAcACwAAAhQUIGmHyedehIoqFXLKfPOAaZdWAAAh+QQFCgACACwAAAIABwALAAACFJQFcJiXb15zLYRl7cla8OtlGGgUADs='); background-position: center center !important; background-repeat: no-repeat !important; position: absolute; z-index: 1000; } /* caption */ .caption { background: #fff; } /* filter widget */ .tablesorter-bootstrap .tablesorter-filter-row .tablesorter-filter { width: 98%; height: auto; margin: 0 auto; padding: 4px 6px; color: #333; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: height 0.1s ease; -moz-transition: height 0.1s ease; -o-transition: height 0.1s ease; transition: height 0.1s ease; } .tablesorter-bootstrap .tablesorter-filter-row .tablesorter-filter.disabled { background: #eee; cursor: not-allowed; } .tablesorter-bootstrap .tablesorter-filter-row td { background: #efefef; line-height: normal; text-align: center; padding: 4px 6px; vertical-align: middle; -webkit-transition: line-height 0.1s ease; -moz-transition: line-height 0.1s ease; -o-transition: line-height 0.1s ease; transition: line-height 0.1s ease; } /* hidden filter row */ .tablesorter-bootstrap .tablesorter-filter-row.hideme td { padding: 2px; /* change this to modify the thickness of the closed border row */ margin: 0; line-height: 0; } .tablesorter-bootstrap .tablesorter-filter-row.hideme .tablesorter-filter { height: 1px; min-height: 0; border: 0; padding: 0; margin: 0; /* don't use visibility: hidden because it disables tabbing */ opacity: 0; filter: alpha(opacity=0); } /* pager plugin */ .tablesorter-bootstrap .tablesorter-pager select { padding: 4px 6px; } .tablesorter-bootstrap .tablesorter-pager .pagedisplay { border: 0; } /* tfoot i for pager controls */ .tablesorter-bootstrap tfoot i { font-size: 11px; } /* ajax error row */ .tablesorter .tablesorter-errorRow td { cursor: pointer; background-color: #e6bf99; }
