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 插件,它们都是最具创新性和最省时省力的解决方案,很多都是现代化的设计和开发中碰到的问题的处理方案.如果你熟悉下面列出的任何插件,请与我们的读者 ...
随机推荐
- SPOJ 687 Repeats（后缀数组+ST表）
[题目链接] http://www.spoj.com/problems/REPEATS/en/ [题目大意] 求重复次数最多的连续重复子串的长度. [题解] 考虑错位匹配,设重复部分长度为l,记s[i ...
- addEventlistener监听的事件完成一次后自动取消与jquery的one方法比较；animate动画制作，arguments.callee的用法
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js字面量
以前一直对js字面量模棱两可. '字面量是一种表示值的记法.' js字面量(literal) 分为以下几个 number literal 8 就是数字字面量 string liter ...
- Objective-c 内存管理
与 C 有一点类似,oc 需要使用 alloc 方法申请内存.不同的是,c 直接调用 free 函数来释放内存,而 oc 并不直接调用 dealloc 来释放.整个 oc 都使用对象引用,而且每一 ...
- dubbo架构演变之路
背景 (#) 随着互联网的发展,网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式服务架构以及流动计算架构势在必行,亟需一个治理系统确保架构有条不紊的演进. 单一应用架构 当网站流量很小时, ...
- Android 调用webservice faultactor 错误
1.错误:02-05 09:56:17.266: E/WebServiceUtil(801): --- 内部异常堆栈跟踪的结尾 ---' faultactor: 'null' detail: org. ...
- HTML+CSS笔记 CSS入门
简介: </span>年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的<span>脚本解释程序</span>,作为ABC语言的一种继承. & ...
- Qt的“undefined reference to `vtable for”错误解决（手动解决，加深理解）
使用QT编程时,当用户自定义了一个类,只要类中使用了信号或槽. Code::Blocks编译就会报错(undefined reference to `vtable for). Google上有很多这个 ...
- 面试题：给定一个长度为N的数组，其中每个元素的取值范围都是1到N。判断数组中是否有重复的数字
题目:给定一个长度为N的数组,其中每个元素的取值范围都是1到N.判断数组中是否有重复的数字.(原数组不必保留) 方法1.对数组进行排序(快速,堆),然后比较相邻的元素是否相同.时间复杂度为O(nlog ...
- 输出1到最大的N位数
题目:输入数字n,按顺序输出从1最大的n位10进制数.比如输入3,则输出1.2.3一直到最大的3位数即999. 分析:这是一道很有意思的题目.看起来很简单,其实里面却有不少的玄机. 应聘者在解决这个问 ...