搜索结果的第一条网址(似乎是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;
}