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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<title>jQuery plugin: Tablesorter 2.0 - Pager plugin</title>

	<!-- jQuery -->

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

	<!-- Demo stuff -->

	<link rel="stylesheet" href="css/jq.css"/>

	<link href="css/prettify.css" rel="stylesheet"/>

	<script type="text/javascript" src="js/prettify.js"></script>

	<script type="text/javascript" src="js/docs.js"></script>

	<!-- Tablesorter: required -->

	<link rel="stylesheet" href="themes/blue/theme.blue.css"/>

	<script type="text/javascript" src="js/jquery.tablesorter.js"></script>

	<!-- Tablesorter: optional -->

	<link rel="stylesheet" href="css/jquery.tablesorter.pager.css"/>

	<script type="text/javascript" src="js/jquery.tablesorter.pager.js"></script>

	<script type="text/javascript" src="js/settablepage.js" id="js"></script>

</head>

<body>

<div class="pager">

		<img src="scripts/first.png" class="first" alt="First" />

		<img src="scripts/prev.png" class="prev" alt="Prev" />

		<span class="pagedisplay"></span> <!-- this can be any element, including an input -->

		<img src="scripts/next.png" class="next" alt="Next" />

		<img src="scripts/last.png" class="last" alt="Last" />

		<select class="pagesize" title="Select page size">

			<option value="10">10</option>

			<option value="20">20</option>

			<option value="30">30</option>

			<option value="40">40</option>

		</select>

		<select class="gotoPage" title="Select page number"></select>

	</div>

<table class="tablesorter">

	<thead>

		<tr>

			<th>Name</th>

			<th>Major</th>

			<th>Sex</th>

			<th>English</th>

			<th>Japanese</th>

			<th>Calculus</th>

			<th>Geometry</th>

			<th class="remove sorter-false"></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>

			<th></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>

			<td></td>

		</tr>

		<tr>

			<td>Student02</td>

			<td>Mathematics</td>

			<td>male</td>

			<td>90</td>

			<td>88</td>

			<td>100</td>

			<td>90</td>

			<td></td>

		</tr>

		<tr>

			<td>Student03</td>

			<td>Languages</td>

			<td>female</td>

			<td>85</td>

			<td>95</td>

			<td>80</td>

			<td>85</td>

			<td></td>

		</tr>

		<tr>

			<td>Student04</td>

			<td>Languages</td>

			<td>male</td>

			<td>60</td>

			<td>55</td>

			<td>100</td>

			<td>100</td>

			<td></td>

		</tr>

		<tr>

			<td>Student05</td>

			<td>Languages</td>

			<td>female</td>

			<td>68</td>

			<td>80</td>

			<td>95</td>

			<td>80</td>

			<td></td>

		</tr>

		<tr>

			<td>Student06</td>

			<td>Mathematics</td>

			<td>male</td>

			<td>100</td>

			<td>99</td>

			<td>100</td>

			<td>90</td>

			<td></td>

		</tr>

		<tr>

			<td>Student07</td>

			<td>Mathematics</td>

			<td>male</td>

			<td>85</td>

			<td>68</td>

			<td>90</td>

			<td>90</td>

			<td></td>

		</tr>

		<tr>

			<td>Student08</td>

			<td>Languages</td>

			<td>male</td>

			<td>100</td>

			<td>90</td>

			<td>90</td>

			<td>85</td>

			<td></td>

		</tr>

	<tr><td>Student23</td><td>塗聚文</td><td>男</td><td>82</td><td>77</td><td>0</td><td>79</td><td></td></tr>

		<tr><td>Student24</td><td>劉亮</td><td>女</td><td>100</td><td>91</td><td>13</td><td>82</td><td></td></tr>

		<tr><td>Student25</td><td>涂聚文</td><td>男</td><td>22</td><td>96</td><td>82</td><td>53</td><td></td></tr>

		<tr><td>Student26</td><td>曾用名</td><td>女</td><td>37</td><td>29</td><td>56</td><td>59</td><td></td></tr>

		<tr><td>Student27</td><td>一落千丈</td><td>male</td><td>86</td><td>82</td><td>69</td><td>23</td><td></td></tr>

		<tr><td>Student28</td><td>共青团</td><td>female</td><td>44</td><td>25</td><td>43</td><td>1</td><td></td></tr>

		<tr><td>Student29</td><td>生龙活虎</td><td>male</td><td>77</td><td>47</td><td>22</td><td>38</td><td></td></tr>

		<tr><td>Student30</td><td>语言</td><td>female</td><td>19</td><td>35</td><td>23</td><td>10</td><td></td></tr>

		<tr><td>Student31</td><td>物理</td><td>male</td><td>90</td><td>27</td><td>17</td><td>50</td><td></td></tr>

		<tr><td>Student32</td><td>物色</td><td>female</td><td>60</td><td>75</td><td>33</td><td>38</td><td></td></tr>

		<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>

		<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>

		<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>

		<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>

		<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>

		<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>

		<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>

		<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>

		<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>

		<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>

		<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>

		<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>

		<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>

		<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>

		<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>

		<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>

		<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>

		<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>

</tbody>

</table>

<div class="pager">

	<img src="scripts/first.png" class="first" alt="First" />

	<img src="scripts/prev.png" class="prev" alt="Prev" />

	<span class="pagedisplay"></span> <!-- this can be any element, including an input -->

	<img src="scripts/next.png" class="next" alt="Next" />

	<img src="scripts/last.png" class="last" alt="Last" />

	<select class="pagesize" title="Select page size">

		<option value="10">10</option>

		<option value="20">20</option>

		<option value="30">30</option>

		<option value="40">40</option>

	</select>

	<select class="gotoPage" title="Select page number"></select>

</div>

</body>

</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. Linux硬件信息采集

    dmidecode: 简介: dmidecode命令通过读取DMI数据库获取硬件信息并输出.由于DMI信息可以人为修改,因此里面的信息不一定是系统准确的信息 dmidecode遵循SMBIOS/DMI ...

  2. docker 安装 redis

    docker拉去镜像以及配置生成容器的步骤几乎和之前的nginx安装一样,直接写下面的命令了 1. docker pull redis 2. docker run -p 6379:6379 -v /U ...

  3. [JSOI2007]麻将 模拟 BZOJ1028

    题目描述 麻将是中国传统的娱乐工具之一.麻将牌的牌可以分为字牌(共有东.南.西.北.中.发.白七种)和序数牌(分为条子.饼子.万子三种花色,每种花色各有一到九的九种牌),每种牌各四张. 在麻将中,通常 ...

  4. netstat查看tcp连接的状态

    netstat -n | awk '/^tcp/ {++state[$NF]} END {for(key in state) print key,"\t",state[key]}'

  5. C++ Timer

    Timer机制 这里所说的Timer机制是定时器(Timer),例如在Javascript中就提供定时执行代码的功能.但是在C++标准中暂时没有实现这一功能的函数. Javascript中的Timer ...

  6. python基础03-循环结构及函数基础

    循环结构及函数基础 循环结构(for-in) 说明:也是循环结构的一种,经常用于遍历字符串.列表,元组,字典等 格式: for x in y: 循环体 执行流程:x依次表示y中的一个元素,遍历完所有元 ...

  7. php opcache 详解

    PHP性能提升之OPcache相关参数详解 工具 memory 发布于December 15, 2016 标签: PHP OPcache 通过将 PHP 脚本预编译的字节码存储到共享内存中来提升 PH ...

  8. R语言批量生成变量(变量名中含有参数)

    我们经常会需要生成这样一类的变量,比如a1,a2,a3...... 这时候我们需要用到这两个函数:get()和assign() get()用法 get()函数只是在环境中搜索该变量名的变量,如果该变量 ...

  9. 教你搭建SpringMVC框架（ 附源码）

    一.项目目录结构 二.SpringMVC需要使用的jar包 commons-logging-1.2.jar junit-4.10.jar log4j-api-2.0.2.jar log4j-core- ...

  10. POJ2248 Addition Chains 迭代加深

    不知蓝书的标程在说什么,,,,于是自己想了一下...发现自己的代码短的一批... 限制搜索深度+枚举时从大往小枚举,以更接近n+bool判重,避免重复搜索 #include<cstdio> ...