http://mottie.github.io/tablesorter/docs/example-pager.html
http://tablesorter.com/docs/example-pager.html

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  
  4. <head>
  5. <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  6. <title>jQuery plugin: Tablesorter 2.0 - Pager plugin</title>
  7.  
  8. 	<!-- jQuery -->
  9. 	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
  10.  
  11. 	<!-- Demo stuff -->
  12. 	<link rel="stylesheet" href="css/jq.css"/>
  13. 	<link href="css/prettify.css" rel="stylesheet"/>
  14. 	<script type="text/javascript" src="js/prettify.js"></script>
  15. 	<script type="text/javascript" src="js/docs.js"></script>
  16.  
  17. 	<!-- Tablesorter: required -->
  18. 	<link rel="stylesheet" href="themes/blue/theme.blue.css"/>
  19. 	<script type="text/javascript" src="js/jquery.tablesorter.js"></script>
  20.  
  21. 	<!-- Tablesorter: optional -->
  22. 	<link rel="stylesheet" href="css/jquery.tablesorter.pager.css"/>
  23. 	<script type="text/javascript" src="js/jquery.tablesorter.pager.js"></script>
  24.  
  25. 	<script type="text/javascript" src="js/settablepage.js" id="js"></script>
  26.  
  27. </head>
  28.  
  29. <body>
  30. <div class="pager">
  31. 		<img src="scripts/first.png" class="first" alt="First" />
  32. 		<img src="scripts/prev.png" class="prev" alt="Prev" />
  33. 		<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
  34. 		<img src="scripts/next.png" class="next" alt="Next" />
  35. 		<img src="scripts/last.png" class="last" alt="Last" />
  36. 		<select class="pagesize" title="Select page size">
  37. 			<option value="10">10</option>
  38. 			<option value="20">20</option>
  39. 			<option value="30">30</option>
  40. 			<option value="40">40</option>
  41. 		</select>
  42. 		<select class="gotoPage" title="Select page number"></select>
  43. 	</div>
  44. <table class="tablesorter">
  45. 	<thead>
  46. 		<tr>
  47. 			<th>Name</th>
  48. 			<th>Major</th>
  49. 			<th>Sex</th>
  50. 			<th>English</th>
  51. 			<th>Japanese</th>
  52. 			<th>Calculus</th>
  53. 			<th>Geometry</th>
  54. 			<th class="remove sorter-false"></th>
  55. 		</tr>
  56. 	</thead>
  57. 	<tfoot>
  58. 		<tr>
  59. 			<th>Name</th>
  60. 			<th>Major</th>
  61. 			<th>Sex</th>
  62. 			<th>English</th>
  63. 			<th>Japanese</th>
  64. 			<th>Calculus</th>
  65. 			<th>Geometry</th>
  66. 			<th></th>
  67. 		</tr>
  68. 	</tfoot>
  69. 	<tbody>
  70. 		<tr>
  71. 			<td>Student01</td>
  72. 			<td>Languages</td>
  73. 			<td>male</td>
  74. 			<td>80</td>
  75. 			<td>70</td>
  76. 			<td>75</td>
  77. 			<td>80</td>
  78. 			<td></td>
  79. 		</tr>
  80. 		<tr>
  81. 			<td>Student02</td>
  82. 			<td>Mathematics</td>
  83. 			<td>male</td>
  84. 			<td>90</td>
  85. 			<td>88</td>
  86. 			<td>100</td>
  87. 			<td>90</td>
  88. 			<td></td>
  89. 		</tr>
  90. 		<tr>
  91. 			<td>Student03</td>
  92. 			<td>Languages</td>
  93. 			<td>female</td>
  94. 			<td>85</td>
  95. 			<td>95</td>
  96. 			<td>80</td>
  97. 			<td>85</td>
  98. 			<td></td>
  99. 		</tr>
  100. 		<tr>
  101. 			<td>Student04</td>
  102. 			<td>Languages</td>
  103. 			<td>male</td>
  104. 			<td>60</td>
  105. 			<td>55</td>
  106. 			<td>100</td>
  107. 			<td>100</td>
  108. 			<td></td>
  109. 		</tr>
  110. 		<tr>
  111. 			<td>Student05</td>
  112. 			<td>Languages</td>
  113. 			<td>female</td>
  114. 			<td>68</td>
  115. 			<td>80</td>
  116. 			<td>95</td>
  117. 			<td>80</td>
  118. 			<td></td>
  119. 		</tr>
  120. 		<tr>
  121. 			<td>Student06</td>
  122. 			<td>Mathematics</td>
  123. 			<td>male</td>
  124. 			<td>100</td>
  125. 			<td>99</td>
  126. 			<td>100</td>
  127. 			<td>90</td>
  128. 			<td></td>
  129. 		</tr>
  130. 		<tr>
  131. 			<td>Student07</td>
  132. 			<td>Mathematics</td>
  133. 			<td>male</td>
  134. 			<td>85</td>
  135. 			<td>68</td>
  136. 			<td>90</td>
  137. 			<td>90</td>
  138. 			<td></td>
  139. 		</tr>
  140. 		<tr>
  141. 			<td>Student08</td>
  142. 			<td>Languages</td>
  143. 			<td>male</td>
  144. 			<td>100</td>
  145. 			<td>90</td>
  146. 			<td>90</td>
  147. 			<td>85</td>
  148. 			<td></td>
  149. 		</tr>
  150. 	<tr><td>Student23</td><td>塗聚文</td><td>男</td><td>82</td><td>77</td><td>0</td><td>79</td><td></td></tr>
  151. 		<tr><td>Student24</td><td>劉亮</td><td>女</td><td>100</td><td>91</td><td>13</td><td>82</td><td></td></tr>
  152. 		<tr><td>Student25</td><td>涂聚文</td><td>男</td><td>22</td><td>96</td><td>82</td><td>53</td><td></td></tr>
  153. 		<tr><td>Student26</td><td>曾用名</td><td>女</td><td>37</td><td>29</td><td>56</td><td>59</td><td></td></tr>
  154. 		<tr><td>Student27</td><td>一落千丈</td><td>male</td><td>86</td><td>82</td><td>69</td><td>23</td><td></td></tr>
  155. 		<tr><td>Student28</td><td>共青团</td><td>female</td><td>44</td><td>25</td><td>43</td><td>1</td><td></td></tr>
  156. 		<tr><td>Student29</td><td>生龙活虎</td><td>male</td><td>77</td><td>47</td><td>22</td><td>38</td><td></td></tr>
  157. 		<tr><td>Student30</td><td>语言</td><td>female</td><td>19</td><td>35</td><td>23</td><td>10</td><td></td></tr>
  158. 		<tr><td>Student31</td><td>物理</td><td>male</td><td>90</td><td>27</td><td>17</td><td>50</td><td></td></tr>
  159. 		<tr><td>Student32</td><td>物色</td><td>female</td><td>60</td><td>75</td><td>33</td><td>38</td><td></td></tr>
  160. 		<tr><td>Student33</td><td>Mathematics</td><td>male</td><td>4</td><td>31</td><td>37</td><td>15</td><td></td></tr>
  161. 		<tr><td>Student34</td><td>Languages</td><td>female</td><td>77</td><td>97</td><td>81</td><td>44</td><td></td></tr>
  162. 		<tr><td>Student35</td><td>Mathematics</td><td>male</td><td>5</td><td>81</td><td>51</td><td>95</td><td></td></tr>
  163. 		<tr><td>Student36</td><td>Languages</td><td>female</td><td>70</td><td>61</td><td>70</td><td>94</td><td></td></tr>
  164. 		<tr><td>Student37</td><td>Mathematics</td><td>male</td><td>60</td><td>3</td><td>61</td><td>84</td><td></td></tr>
  165. 		<tr><td>Student38</td><td>Languages</td><td>female</td><td>63</td><td>39</td><td>0</td><td>11</td><td></td></tr>
  166. 		<tr><td>Student39</td><td>Mathematics</td><td>male</td><td>50</td><td>46</td><td>32</td><td>38</td><td></td></tr>
  167. 		<tr><td>Student40</td><td>Languages</td><td>female</td><td>51</td><td>75</td><td>25</td><td>3</td><td></td></tr>
  168. 		<tr><td>Student41</td><td>Mathematics</td><td>male</td><td>43</td><td>34</td><td>28</td><td>78</td><td></td></tr>
  169. 		<tr><td>Student42</td><td>Languages</td><td>female</td><td>11</td><td>89</td><td>60</td><td>95</td><td></td></tr>
  170. 		<tr><td>Student43</td><td>Mathematics</td><td>male</td><td>48</td><td>92</td><td>18</td><td>88</td><td></td></tr>
  171. 		<tr><td>Student44</td><td>Languages</td><td>female</td><td>82</td><td>2</td><td>59</td><td>73</td><td></td></tr>
  172. 		<tr><td>Student45</td><td>Mathematics</td><td>male</td><td>91</td><td>73</td><td>37</td><td>39</td><td></td></tr>
  173. 		<tr><td>Student46</td><td>Languages</td><td>female</td><td>4</td><td>8</td><td>12</td><td>10</td><td></td></tr>
  174. 		<tr><td>Student47</td><td>Mathematics</td><td>male</td><td>89</td><td>10</td><td>6</td><td>11</td><td></td></tr>
  175. 		<tr><td>Student48</td><td>Languages</td><td>female</td><td>90</td><td>32</td><td>21</td><td>18</td><td></td></tr>
  176. 		<tr><td>Student49</td><td>Mathematics</td><td>male</td><td>42</td><td>49</td><td>49</td><td>72</td><td></td></tr>
  177. 		<tr><td>Student50</td><td>Languages</td><td>female</td><td>56</td><td>37</td><td>67</td><td>54</td><td></td></tr>
  178.  
  179. </tbody>
  180. </table>
  181.  
  182. <div class="pager">
  183. 	<img src="scripts/first.png" class="first" alt="First" />
  184. 	<img src="scripts/prev.png" class="prev" alt="Prev" />
  185. 	<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
  186. 	<img src="scripts/next.png" class="next" alt="Next" />
  187. 	<img src="scripts/last.png" class="last" alt="Last" />
  188. 	<select class="pagesize" title="Select page size">
  189. 		<option value="10">10</option>
  190. 		<option value="20">20</option>
  191. 		<option value="30">30</option>
  192. 		<option value="40">40</option>
  193. 	</select>
  194. 	<select class="gotoPage" title="Select page number"></select>
  195. </div>
  196. </body>
  197.  
  198. </html>

jQuery plugin: Tablesorter 2.0的更多相关文章

  1. javascript:jQuery tablesorter 2.0

    https://mottie.github.io/tablesorter/docs/index.html 1.GridView <%@ Page Language="C#" ...

  2. The ultimate jQuery Plugin List(终极jQuery插件列表)

    下面的文章可能出自一位奥地利的作者,  列出很多jQuery的插件.类似的网站:http://jquerylist.com/原文地址: http://www.kollermedia.at/archiv ...

  3. jQuery plugin: Autocomplete 参数及实例

    官网:jQuery plugin: Autocomplete          (注:此插件已经不再更新.它的继任者是jQuery UI的一部分,) 此插件依赖于 jquery 1.2.6 --- j ...

  4. [jQuery] 自做 jQuery Plugin - Part 1

    有時候寫 jQuery 時,常會發現一些簡單的效果可以重複利用.只是每次用 Copy & Paste 大法似乎不是件好事,有沒有什麼方法可以讓我們把這些效果用到其他地方呢? 沒錯,就是用 jQ ...

  5. Element DOM Tree jQuery plugin – Firebug like functionality | RockingCode

    Element DOM Tree jQuery plugin – Firebug like functionality | RockingCode Element DOM Tree jQuery pl ...

  6. HTML5 Video player jQuery plugin

    <!DOCTYPE html> <html lang="en" > <head> <meta charset="utf-8&qu ...

  7. JQuery Plugin 开发

    学习 JQuery 插件开发之后, 可以将自己平时常用的功能封装成插件, 便于在不同的项目之间使用. JQuery 官网上的 插件开发教程就很不错, 简单易懂. 参考网址: http://learn. ...

  8. JQuery plugin ---- simplePagination.js API

    CSS Themes "light-theme" "dark-theme" "compact-theme" How To Use Step ...

  9. jquery中$("#afui").get(0)为什么要加get(0)呢？

    jquery中$("#afui").get(0)为什么要加get(0)呢? 2015-04-13 17:46SYYZZ3 | 浏览 509 次  Jquery $("#a ...

随机推荐

  1. Github 三种克隆模式

    1.我称为平常模式,用于项目的本地克隆使用.(无权限.无加密.ssh protocol) git clone http://github.com/username/exampleproject 2.我 ...

  2. ArcGIS10.4破解

    arcgis 10.4破解方法 *注意!Desktop,Engine,Server必须为同一版本* Engine10.4破解失败,SDE10.4未进行破解 1.先安装License10.4 2.再安装 ...

  3. leetcode-229.求众数(二)

     题目: 给定一个大小为 n 的数组,找出其中所有出现超过 ⌊ n/3 ⌋ 次的元素. 说明: 要求算法的时间复杂度为O(n),空间复杂度为O(1). 示例 1: 输入: [3,2,3] 输出: [3 ...

  4. JS 方法注入 attachEvent

    写法1: <html> <head> <title></title> <script language="javascript" ...

  5. 网络控制芯片AX88796B系列使用简介

    目录 1. 特性 2. 结构框图 3. 接收 3.1 缓存空间 3.2 Receiver Buffer Ring 3.3 接收机制 4. 发送 5. 编程过程简要说明 5.1 初始化配置 5.2 接收 ...

  6. Ubuntu Server 中实际内存与物理内存不相等的问题

    记录 来源 v2ex,提到了一个平时不是很起眼的问题,Ubuntu Server 中系统默认会占用 128M 内存,用于 CVM 内部的 kdump 服务. 科普 查看 CVM 所拥有的物理内存 通过 ...

  7. EasyUI学习笔记（二）—— Layout

    一.layout页面布局 EasyUI布局容器包括东.西.南.北.中五个区域,其中中心面板是必须的,而东.西.南.北这四个面板是可选的,如果布局里面不需要东.西.南.北这四个面板,那么可以把相应的di ...

  8. C++_类入门1-对象和类的介绍

    面向对象是(OOP)是特殊的.设计程序的概念性方法:包含以下特性: 抽象: 封装和数据隐藏: 多态: 继承: 代码的可重用性: 为了实现这些特性并且将这些特性组合在一起,C++所做的最重要的改进是提供 ...

  9. docker image rm ubuntu 失败

    [root@hadoop14 ~]# docker image rm ubuntu Failed to remove image (ubuntu:v2): Error response from da ...

  10. xml转换csv

    /// <summary> /// xml文件转换为CSV /// </summary> /// <param name="fileName"> ...