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:;
} /* 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:;
line-height:;
}
.tablesorter-bootstrap .tablesorter-filter-row.hideme .tablesorter-filter {
height: 1px;
min-height:;
border:;
padding:;
margin:;
/* don't use visibility: hidden because it disables tabbing */
opacity:;
filter: alpha(opacity=0);
} /* pager plugin */
.tablesorter-bootstrap .tablesorter-pager select {
padding: 4px 6px;
}
.tablesorter-bootstrap .tablesorter-pager .pagedisplay {
border:;
}
/* tfoot i for pager controls */
.tablesorter-bootstrap tfoot i {
font-size: 11px;
} /* ajax error row */
.tablesorter .tablesorter-errorRow td {
cursor: pointer;
background-color: #e6bf99;
}
jQuery tablesort插件推荐的更多相关文章
- 让网站动起来！12款优秀的 jQuery 动画插件推荐
如今,大多数设计师和开发人员被要客户要求开发动态的网站.创造视觉震撼和醒目的动态网站是艰巨的任务,因为它需要大量的努力和创造力.在网络上有大量的工具和插件可用于创建网站动画.许多开发人员正在使用 HT ...
- 有用的jQuery布局插件推荐
网页设计中排版也是很重要的,但有些比较难的网页排版我们可以用一些jQuery来实现,今天文章中主要分享一些有用的jQuery布局插件,有类似Pinterest流布局插件.友荐的滑动提示块以及其它jQu ...
- jQuery树结构插件推荐zTree
JQuery zTree 下载地址http://plugins.jquery.com/zTree.v3/
- 【特别推荐】8个富有创意的jQuery/CSS3插件
现在的互联网上什么都有,但是真正好的创意却非常稀缺,包括WEB界面也是如此,今天我们要特别推荐8个富有创意的jQuery/CSS3插件,也许这几个插件能让你的WEB界面更加富有创意和人性化. 1.jQ ...
- 推荐几款jQuery表格插件
平时项目中,会碰到很多表格元素,这里推荐几款jQuery表格插件. Stackable.js 通常在小屏幕上,表格的表形形式不大好,因为用户会缩放平移,或者就是表格太小,导致数据不可见.Stackab ...
- vscode前端常用插件推荐，搭建JQuery、Vue等开发环境
vscode是微软开发的的一款代码编辑器,就如官网上说的一样,vscode重新定义(redefined)了代码编辑器.当前市面上常用的轻型代码编辑器主要是:sublime,notepad++,edit ...
- <IDE>vscode前端常用插件推荐，搭建JQuery、Vue等开发环境
vscode是微软开发的的一款代码编辑器,就如官网上说的一样,vscode重新定义(redefined)了代码编辑器.当前市面上常用的轻型代码编辑器主要是:sublime,notepad++,edit ...
- jquery validate表单验证插件-推荐
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
- 2016年4月最佳的20款 jQuery 插件推荐
这个列表包括20个我们觉得是最有用的免费的 jQuery 插件,它们都是最具创新性和最省时省力的解决方案,很多都是现代化的设计和开发中碰到的问题的处理方案.如果你熟悉下面列出的任何插件,请与我们的读者 ...
随机推荐
- 在 Visual C++ 中开发自定义的绘图控件
本文讨论的重点介于两者 之间 — 公共控件赋予您想要的大部分功能,但控件的外观并不是您想要的.例如,列表视图控件提供在许多视图风格中显示数据列表的方式 — 小图标.大图标.列表和详细列表(报告).然而 ...
- Course(简单的字符串处理问题)
Course 时间限制:1000 ms | 内存限制:65535 KB [问题描述] There is such a policy in Sichuan University that if yo ...
- php获取apk信息
使用方法如下: <?php require('apk_parser.php'); $p = new ApkParser(); /* if($argc<2) { echo "usa ...
- 第八届河南省赛G.Interference Signal（dp）
G.Interference Signal Time Limit: 2 Sec Memory Limit: 128 MB Submit: 35 Solved: 17 [Submit][Status ...
- iOS中Block介绍（二）内存管理与其他特性
我们在前一章介绍了block的用法,而正确使用block必须要求正确理解block的内存管理问题.这一章,我们只陈述结果而不追寻原因,我们将在下一章深入其原因. 一.block放在哪里 我们针对不同情 ...
- android 向serverGet和Post请求的两种方式,android向server发送文件,自己组装协议和借助第三方开源
一个适用于Android平台的第三方和apache的非常多东西类似,仅仅是用于Android上 我在项目里用的是这个 https://github.com/loopj/android-async-ht ...
- 23种设计模式的C++实现
之前看Head First设计模式的时候照着书上的代码实现了一个C++版本(书上是Java版本的),代码上传在https://github.com/clpsz/Book-HFDP-Code. 当时因为 ...
- MVC Razor中 如何截断字符串
有时候显示的内容过长,使用MVC编程时,如何截断显示的内容呢.我知道你肯定有很多办法这样做的,但是在学习MVC时,还是使用一些新的办法做吧> Razor 标记语法编程. @helper Trun ...
- Linux新手笔记 sudo
centos 6.4 32bit 你是也像我一样,厌烦了在root用户和个人用户之间来回切换.或者干脆直接用root用户.可以这样设置,然后在命令前加sudo 即可使用自己到密码,临时用root身份执 ...
- iOS 设置状态栏的颜色
1.在plist文件中设置如下属性: 2.在delegate中设置 [[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarSt ...