新建test.css和test.js
导入jquery-1.3.2.min.js、jquery.tablesorter.js、test.css和test.js
test.css：
.even{
background-color: #fea;
}
.odd{
background-color: #6BAE00;
}
test.js:
$(document).ready(function() {
$("#large")
.tablesorter({widthFixed: true, widgets: ['zebra']})//隔行变色
.tablesorterPager({container: $("#pager")}); //把分页功能放在#pager容器里
});
html:注意一定要写<thead></thead>标签定义表格的表头
<html>
<head>
<title>tablesorter测试</title>
<link rel="stylesheet" type="text/css" href="test.css" />
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="addons/pager/jquery.tablesorter.pager.js"></script>
<script src="jquery.tablesorter.js" type="text/javascript"></script>
<script src="test.js" type="text/javascript"></script>
</head>
<body>
<table id="large" >
<thead>
<tr>
<th>Email</th>
<th>Id</th>
<th>Phone</th>
<th>Total</th>
<th>Ip</th>
<th>Url</th>
<th>Time</th>
<th>ISO Date</th>
<th>UK Date</th>
</tr>
</thead>
<tfoot>
<th>Email</th>
<th>Id</th>
<th>Phone</th>
<th>Total</th>
<th>Ip</th>
<th>Url</th>
<th>Time</th>
<th>ISO Date</th>
<th>UK Date</th>
</tfoot>
<tbody>
<tr>
<td>devo@flexomat.com</td>
<td>66672</td>
<td>941-964-8535</td>
<td>$2482.79</td>
<td>172.78.200.124</td>
<td>http://gmail.com</td>
<td>15:10</td>
<td>1988/12/14</td>
<td>14/12/1988</td>
</tr>
<tr>
<td>henry@mountdev.net</td>
<td>35889</td>
<td>941-964-9543</td>
<td>$2776.09</td>
<td>119.232.182.142</td>
<td>http://www.gmail.com</td>
<td>3:54</td>
<td>1974/1/19</td>
<td>19/1/1974</td>
</tr>
<tr>
<td>christian@reno.gov</td>
<td>60021</td>
<td>941-964-5617</td>
<td>$2743.41</td>
<td>167.209.64.181</td>
<td>http://www.dotnet.ca</td>
<td>10:58</td>
<td>2000/3/25</td>
<td>25/3/2000</td>
</tr>
<tr>
<td>muffins@donuts.com</td>
<td>17927</td>
<td>941-964-9511</td>
<td>$2998.18</td>
<td>210.214.231.182</td>
<td>http://google.se</td>
<td>21:22</td>
<td>1993/1/24</td>
<td>24/1/1993</td>
</tr>
<tr>
<td>muffins@reno.gov</td>
<td>76375</td>
<td>941-964-2757</td>
<td>$1836.09</td>
<td>220.222.93.171</td>
<td>http://www.samba.org</td>
<td>15:22</td>
<td>1988/4/4</td>
<td>4/4/1988</td>
</tr>
<tr>
<td>mendez@gmail.com</td>
<td>45834</td>
<td>941-964-2575</td>
<td>$2805.46</td>
<td>228.170.245.253</td>
<td>http://flexomat.com</td>
<td>11:31</td>
<td>1975/12/12</td>
<td>12/12/1975</td>
</tr>
<tr>
<td>dev@gmail.com</td>
<td>20022</td>
<td>941-964-4967</td>
<td>$3296.54</td>
<td>175.248.70.240</td>
<td>http://www.flexomat.com</td>
<td>4:27</td>
<td>2002/7/3</td>
<td>3/7/2002</td>
</tr>
<tr>
<td>foo@polyester.se</td>
<td>55977</td>
<td>941-964-745</td>
<td>$2953.73</td>
<td>222.114.227.156</td>
<td>http://www.donuts.com</td>
<td>23:49</td>
<td>1977/8/4</td>
<td>4/8/1977</td>
</tr>
<tr>
<td>adam@aftonbladet.se</td>
<td>38867</td>
<td>941-964-6302</td>
<td>$1949.27</td>
<td>116.241.143.196</td>
<td>http://flexomat.com</td>
<td>23:35</td>
<td>1995/7/27</td>
<td>27/7/1995</td>
</tr>
<tr>
<td>devo@donuts.com</td>
<td>51426</td>
<td>941-964-1234</td>
<td>$1067.00</td>
<td>88.96.149.82</td>
<td>http://www.polyester.se</td>
<td>15:17</td>
<td>1986/1/5</td>
<td>5/1/1986</td>
</tr>
<tr>
<td>henry@samba.org</td>
<td>40859</td>
<td>941-964-4856</td>
<td>$3401.19</td>
<td>68.152.250.74</td>
<td>http://www.flexomat.com</td>
<td>4:36</td>
<td>1990/3/7</td>
<td>7/3/1990</td>
</tr>
<tr>
<td>found@dotnet.ca</td>
<td>23986</td>
<td>941-964-2686</td>
<td>$1393.52</td>
<td>98.102.181.138</td>
<td>http://lostnfound.org</td>
<td>5:51</td>
<td>1993/7/22</td>
<td>22/7/1993</td>
</tr>
<tr>
<td>carl@fish.org</td>
<td>73392</td>
<td>941-964-5792</td>
<td>$3876.04</td>
<td>246.234.182.243</td>
<td>http://www.google.se</td>
<td>6:52</td>
<td>1984/7/14</td>
<td>14/7/1984</td>
</tr>
<tr>
<td>found@mountdev.net</td>
<td>03519</td>
<td>941-964-1599</td>
<td>$1176.48</td>
<td>104.212.122.177</td>
<td>http://donuts.com</td>
<td>18:52</td>
<td>2000/8/6</td>
<td>6/8/2000</td>
</tr>
<tr>
<td>lost@fish.org</td>
<td>36628</td>
<td>941-964-5975</td>
<td>$822.23</td>
<td>153.63.68.208</td>
<td>http://www.gmail.com</td>
<td>7:53</td>
<td>1994/7/14</td>
<td>14/7/1994</td>
</tr>
<tr>
<td>mendez@dotnet.ca</td>
<td>90442</td>
<td>941-964-1649</td>
<td>$1975.72</td>
<td>128.161.95.170</td>
<td>http://reno.gov</td>
<td>8:35</td>
<td>1997/10/20</td>
<td>20/10/1997</td>
</tr>
<tr>
<td>carl@donuts.com</td>
<td>00412</td>
<td>941-964-6432</td>
<td>$1834.77</td>
<td>141.231.126.192</td>
<td>http://gmail.com</td>
<td>16:15</td>
<td>1997/8/23</td>
<td>23/8/1997</td>
</tr>
<tr>
<td>foo@fish.org</td>
<td>80653</td>
<td>941-964-1022</td>
<td>$260.26</td>
<td>98.102.97.81</td>
<td>http://samba.org</td>
<td>8:27</td>
<td>1991/11/24</td>
<td>24/11/1991</td>
</tr>
<tr>
<td>found@fish.org</td>
<td>54635</td>
<td>941-964-6439</td>
<td>$1442.80</td>
<td>108.133.231.154</td>
<td>http://dotnet.ca</td>
<td>6:47</td>
<td>1977/7/12</td>
<td>12/7/1977</td>
</tr>
<tr>
<td>found@flexomat.com</td>
<td>20953</td>
<td>941-964-5544</td>
<td>$575.42</td>
<td>247.246.235.138</td>
<td>http://gmail.com</td>
<td>3:12</td>
<td>1978/6/10</td>
<td>10/6/1978</td>
</tr>
<tr>
<td>lost@aftonbladet.se</td>
<td>60810</td>
<td>941-964-8406</td>
<td>$1054.39</td>
<td>130.80.125.154</td>
<td>http://www.samba.org</td>
<td>15:50</td>
<td>1978/5/18</td>
<td>18/5/1978</td>
</tr>
<tr>
<td>carl@reno.gov</td>
<td>22666</td>
<td>941-964-104</td>
<td>$373.59</td>
<td>185.150.127.115</td>
<td>http://www.lostnfound.org</td>
<td>10:11</td>
<td>1971/11/5</td>
<td>5/11/1971</td>
</tr>
<tr>
<td>carl@donuts.com</td>
<td>82867</td>
<td>941-964-1031</td>
<td>$631.03</td>
<td>62.244.222.152</td>
<td>http://www.reno.gov</td>
<td>11:24</td>
<td>1985/1/22</td>
<td>22/1/1985</td>
</tr>
<tr>
<td>foo@donuts.com</td>
<td>11268</td>
<td>941-964-208</td>
<td>$3730.64</td>
<td>234.192.138.252</td>
<td>http://aftonbladet.se</td>
<td>22:45</td>
<td>1979/8/4</td>
<td>4/8/1979</td>
</tr>
<tr>
<td>devo@google.se</td>
<td>17059</td>
<td>941-964-2903</td>
<td>$1404.67</td>
<td>73.189.246.202</td>
<td>http://www.gmail.com</td>
<td>22:28</td>
<td>1983/4/28</td>
<td>28/4/1983</td>
</tr>
<tr>
<td>muffins@flexomat.com</td>
<td>90584</td>
<td>941-964-4640</td>
<td>$3706.01</td>
<td>243.162.73.115</td>
<td>http://www.fish.org</td>
<td>11:12</td>
<td>1997/4/8</td>
<td>8/4/1997</td>
</tr>
<tr>
<td>foo@samba.org</td>
<td>82966</td>
<td>941-964-7245</td>
<td>$1001.38</td>
<td>255.182.148.252</td>
<td>http://www.reno.gov</td>
<td>8:42</td>
<td>1995/11/1</td>
<td>1/11/1995</td>
</tr>
<tr>
<td>foo@reno.gov</td>
<td>03603</td>
<td>941-964-8942</td>
<td>$1677.07</td>
<td>176.96.162.192</td>
<td>http://www.flexomat.com</td>
<td>19:11</td>
<td>1980/7/31</td>
<td>31/7/1980</td>
</tr>
<tr>
<td>found@flexomat.com</td>
<td>84939</td>
<td>941-964-7004</td>
<td>$3916.83</td>
<td>240.145.198.78</td>
<td>http://www.fish.org</td>
<td>1:29</td>
<td>1980/8/26</td>
<td>26/8/1980</td>
</tr>
<tr>
<td>henry@lostnfound.org</td>
<td>76453</td>
<td>941-964-3084</td>
<td>$3875.88</td>
<td>235.225.168.168</td>
<td>http://www.fish.org</td>
<td>15:31</td>
<td>2000/10/22</td>
<td>22/10/2000</td>
</tr>
<tr>
<td>sam@aftonbladet.se</td>
<td>36274</td>
<td>941-964-7784</td>
<td>$73.43</td>
<td>114.190.194.148</td>
<td>http://www.dn.se</td>
<td>18:24</td>
<td>1994/11/11</td>
<td>11/11/1994</td>
</tr>
<tr>
<td>dev@polyester.se</td>
<td>15971</td>
<td>941-964-7527</td>
<td>$1855.18</td>
<td>179.121.143.189</td>
<td>http://www.flexomat.com</td>
<td>10:25</td>
<td>1984/8/16</td>
<td>16/8/1984</td>
</tr>
<tr>
<td>devo@fish.org</td>
<td>31734</td>
<td>941-964-9760</td>
<td>$3201.35</td>
<td>213.186.220.205</td>
<td>http://www.samba.org</td>
<td>19:37</td>
<td>1979/3/4</td>
<td>4/3/1979</td>
</tr>
<tr>
<td>devo@reno.gov</td>
<td>52074</td>
<td>941-964-2068</td>
<td>$3035.24</td>
<td>189.62.225.163</td>
<td>http://www.dn.se</td>
<td>21:18</td>
<td>1998/2/24</td>
<td>24/2/1998</td>
</tr>
<tr>
<td>mendez@fish.org</td>
<td>87800</td>
<td>941-964-7933</td>
<td>$618.59</td>
<td>254.119.153.91</td>
<td>http://www.dn.se</td>
<td>22:34</td>
<td>1979/5/28</td>
<td>28/5/1979</td>
</tr>
<tr>
<td>muffins@reno.gov</td>
<td>95926</td>
<td>941-964-147</td>
<td>$3897.91</td>
<td>105.85.121.209</td>
<td>http://www.flexomat.com</td>
<td>9:50</td>
<td>2003/4/1</td>
<td>1/4/2003</td>
</tr>
<tr>
<td>carl@donuts.com</td>
<td>74513</td>
<td>941-964-4507</td>
<td>$2150.68</td>
<td>106.175.123.125</td>
<td>http://www.fish.org</td>
<td>21:42</td>
<td>1977/4/8</td>
<td>8/4/1977</td>
</tr>
<tr>
<td>sam@fish.org</td>
<td>82420</td>
<td>941-964-2134</td>
<td>$3947.54</td>
<td>129.78.102.122</td>
<td>http://mountdev.net</td>
<td>11:33</td>
<td>1990/11/26</td>
<td>26/11/1990</td>
</tr>
<tr>
<td>devo@mountdev.net</td>
<td>81905</td>
<td>941-964-3535</td>
<td>$722.17</td>
<td>229.101.84.111</td>
<td>http://fish.org</td>
<td>7:29</td>
<td>1975/12/28</td>
<td>28/12/1975</td>
</tr>
<tr>
<td>john@lostnfound.org</td>
<td>93124</td>
<td>941-964-1508</td>
<td>$394.82</td>
<td>61.184.235.77</td>
<td>http://www.mountdev.net</td>
<td>14:38</td>
<td>1979/12/10</td>
<td>10/12/1979</td>
</tr>
</tbody>
</table>
</div>
<div id="pager" class="pager">
<form>
<img src="addons/pager/icons/first.png" class="first"/>
<img src="addons/pager/icons/prev.png" class="prev"/>
<input type="text" class="pagedisplay"/>
<img src="addons/pager/icons/next.png" class="next"/>
<img src="addons/pager/icons/last.png" class="last"/>
<select class="pagesize">
<option value="10" selected=true>10</option>
<option value="20" >20</option>
<option value="30">30</option>
<option value="40">40</option>
</select>
</form>
</div>
</html>
分享到：
相关推荐
《表格排序神器：tablesorter-master插件深度解析》 在网页开发中，表格数据的展示和排序是一项常见的需求。为了提升用户体验，许多开发者选择使用JavaScript库或插件来实现这一功能。今天我们要深入探讨的是一款名...
3. **分页**：对于包含大量数据的表格，Tablesorter 可以实现分页功能，将数据分成多个页面显示，降低用户一次性处理过多信息的压力。用户可以设置每页显示的行数，并通过导航按钮在不同页面间切换。 ### **二、...
jQuery表格排序组件-tablesorter使用示例主要向我们介绍了如何使用jQuery表格排序组件-tablesorter来实现表格内容的排序功能。该组件能够帮助我们快速地对HTML表格中的数据进行排序，无需编写复杂的JavaScript代码。...
《jQuery TableSorter：实现高效表格排序与分页功能》 在网页开发中，数据的展示往往离不开表格，而对表格进行排序和分页则能极大地提升用户体验。jQuery TableSorter是一款强大的JavaScript插件，它使得表格排序和...
jQuery的TableSorter插件为开发者提供了一种便捷的方式来实现交互式的、可排序和分页的表格，极大地提升了用户体验。本文将详细讲解jQuery TableSorter插件的使用方法、核心功能以及如何实现分页。 TableSorter是一...
本文将深入探讨Tablesorter插件的核心特性以及如何实现表格内容筛选与分页筛选。 **1. Tablesorter插件介绍** Tablesorter是一款轻量级的JavaScript库，它可以自动检测表格中的数据类型并进行相应的排序。用户只需...
- tablesorter与许多其他jQuery插件兼容，比如pager插件，可以实现分页功能。 - 而且，它还可以与服务器端的数据绑定技术（如ASP.NET GridView）很好地协同工作，只需在页面加载时触发排序即可。 7. **性能优化**...
它允许添加额外的插件来增强功能，例如，分页插件可以实现表格的分页显示，过滤插件可以对表格数据进行筛选，而表头固定插件则能在滚动时保持表头可见，这些都极大地增强了tablesorter的实用性。 在实际使用中，...
`TableSorter` 是一个流行的JavaScript库，它允许用户对HTML表格进行排序和分页，极大地提升了用户在网页上的数据浏览体验。这篇博客"自己添加的tablesorter分页跳转功能"似乎探讨了如何为`TableSorter`自定义分页...
jQuery的tablesorter插件为开发者提供了一种便捷的方式，使得表格数据可以实现动态排序、分页以及与服务器端的数据交互，大大提升了用户体验。本文将围绕"jquery.tablesorter.js +排序、分页、ajax demo"这一主题，...
- **分页**：除了排序，tablesorter还提供了分页功能，可以将大量数据分成多页显示，提高网页加载速度，同时使用户更容易浏览和管理信息。用户可以自定义每页显示的行数，并提供向前、向后翻页以及跳转到特定页码的...
Tablesorter 有许多内置的模块，如过滤（filter）、解析器（parser）和 pager（分页）。这些模块可以按需加载，以增强表格的功能。例如，启用过滤模块： ```javascript $(document).ready(function() { $('table')...
`jQuery Tablesorter` 是一个基于 `jQuery` 的开源插件，主要用于表格数据的排序，提供了用户友好的交互式表格排序功能。这个插件能够轻松地将任何HTML表格转化为可排序的状态，支持多种排序方式，如升序、降序以及...
本文将深入探讨如何使用 jQuery 来实现排序和分页功能，这两个功能在数据展示和用户交互中非常常见，特别是对于表格数据。 **一、jQuery 排序** 1. **jQuery Tablesorter 插件**： `jquery.tablesorter` 是一个...
TableSorter 支持多种插件，例如： pager 插件用于分页，headers 插件用于自定义表头样式， widgets 插件提供更多的增强功能，如zebra striping（斑马线样式）和 column highlighting（高亮显示某一列）。...
你还可以使用其他内置的插件，如“pager”用于分页显示表格，或者“resizable”允许用户调整列宽。只需在初始化时指定这些插件，然后在HTML中添加相应的元素和样式。 ```javascript $(document).ready(function() {...
`tablesorter`还提供了一些增强功能的小部件，如过滤器（filter widget）允许用户搜索表格内容， pager widget 提供分页功能，zebra widget 用于给行添加交替颜色等。这些小部件可以单独引入并激活。 7. **性能...
此外，还有许多可选的插件，如过滤、分页等，可以进一步增强表格的功能。 在实际应用中，我们可能还需要处理排序后的事件，比如更新UI或者重新加载数据。`tablesorter`提供了`sortStart`和`sortEnd`事件，可以在...