- 浏览: 275117 次
- 性别:
- 来自: 广州
文章分类
最新评论
-
weituotian:
这篇文章真的很好阿
C#利用反射,遍历获得一个类的所有属性名,以及该类的实例的所有属性的值 -
clshuai:
博主,你好,看了你的这篇文章,让我很敬佩。可谓内容之全,涵盖范 ...
C#操作Excel -
devilhand:
DataGridView刷新数据的问题 -
devilhand:
DataGridView刷新数据的问题 -
devilhand:
DataGridView刷新数据的问题
新建test.css和test.js
导入jquery-1.3.2.min.js、jquery.tablesorter.js、test.css和test.js
test.css:
test.js:
html:注意一定要写<thead></thead>标签定义表格的表头
导入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.rar (32.8 KB)
- 下载次数: 78
发表评论
-
关于Jquery使用Return后还会提交问题
2010-04-20 01:01 1367$(function() { $("# ... -
jQuery $.post $.ajax用法
2009-12-31 15:04 4166来源:http://www.cnblogs.com/qiant ... -
Asp.net使用jQuery实现数据绑定与分页
2009-12-31 14:25 5757使用jQuery来实现Gridview, Repeater等服 ... -
使用 jQuery 简化 Ajax 开发
2009-12-29 19:24 723jQuery 是一个JavaScript 库,它有助于简化 J ... -
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2009-12-29 19:20 624jQuery入门指南教程 这个指南是一个对jQuery库 ...
相关推荐
主要介绍了jQuery表格排序组件-tablesorter的使用,需要的朋友可以参考下
jQuery特效插件:Tablesorter 2.0 是一款表格筛选用户体验,非常适合用在表格数据内容比较多的表格,查找数据内容非常方便快捷,非常好的用户体验效果。
这是一个挺好的表格排序JQuery插件,可以解决大部分排序的问题。如果有想学习插件开发的话也可以参考这个代码,作者写的还是比较容易理解的
jquery表格插件Tablesorter插件 表格内容筛选与分页筛选
简单易用,无需其他配置要求,下载解压后单击tablesort.html查看效果,兼容IE、FF,如不兼容其它browser,敬请提出~~~谢谢
jquery 写的可排序带分页的表格实例tablesorter
官方离线安装包,亲测可用
官方离线安装包,亲测可用
官方离线安装包,亲测可用
Rails的jQuery tablesorter插件 jQuery tablesorter( )到资产管道的简单集成。 当前tablesorter版本:2.31.3(2020-03-03) 与js / css文件相关的任何问题,请向报告。 安装 将此行添加到您的应用程序的Gemfile...
tablesorter页面表格排序工具,亲测可用,敬请下载
通过此jquery的tablesorter可以实现页面上的表单内容按表中任一列排序的功能,很好用,比在程序中通过sql语句实现简单实用多了。
基于jquery.tablesorter.js修改,原文件支持中文排序,只是修改成表头和排序表格可分开,也可在同一个表格里,包里含demo, tests/demo.html及tests/demo1.html
使用jquery插件tablesorter来完成静态排序
jquery 外部組件 tablesort 插件 , 網頁前端技術表格排序功能運用
Tablesorter 是一个用来直接在浏览器上对表格数据进行排序的jQuery插件,无需再次刷新页面,支持多种单元格数据类型,例如数值、字符串、日期和自定义排序。 主要的特点包括: •多列排序 •支持文本、URL地址、...
前端项目-jquery.tablesorter,TableSorter(fork)是一个jquery插件,用于将带有thead和tbody标记的标准HTML表转换为不刷新页面的可排序表...TableSorter可以成功地分析和排序许多类型的数据,包括单元格中的链接数据。
tablesorter实现HTML表格点击表头排序,同样适用于JSP、PHP等主流Web开发