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. luogu5212/bzoj2555 substring(后缀自动机+动态树)

    对字符串构建一个后缀自动机. 每次查询的就是在转移边上得到节点的parent树中后缀节点数量. 由于强制在线,可以用动态树维护后缀自动机parent树的子树和. 注意一个玄学的优化:每次在执行连边操作 ...

  2. spring security之logoutHandler中的CookieClearingLogoutHandler

    CookieClearingLogoutHandler实现LogoutHandler 接口 在退出登录时实现清除指定“name” 的cookie. 例:清除name为Authorization的coo ...

  3. SDUT OJ 数据结构上机测试1：顺序表的应用

    数据结构上机测试1:顺序表的应用 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Discuss Problem Descri ...

  4. python Exception

    1.except:用来捕捉异常,如果没有捕捉到,则向上层exception传递 2.finally:用来保证其代码一定会执行,可以做收尾工作,比如关闭文件等等. 3.在with as 中, 4.try ...

  5. VSLAM技术框架详述

    最早的SLAM雏形是在军事(核潜艇的海底定位)上的应用,主要传感器是军用雷达.SLAM技术发展到如今已经几十年,目前以激光雷达作为主传感器的SLAM技术比较稳定.可靠,仍然是主流的技术方案.但随着最近 ...

  6. Python + gevent模块对单个接口进行并发测试 1

    本文知识点 利用gevent模块进行并发测试 代码如下 from gevent import monkey monkey.patch_all() import requests import geve ...

  7. POJ_1862 Stripies 【贪心】

    一.题面 POJ1862 二.分析 反省一下,自己英语水平着实不行,该题其实就是问若给出若干个这种生物,根据这种体重变换方式,最终合并成一个后,体重最少是多少.根据公式 $m = 2\sqrt{m_{ ...

  8. Oracle分析函数系列之first_value/last_value：在记录集中查找第一条记录和最后一条记录

    [转自] http://blog.csdn.net/rfb0204421/article/details/7675911 注意:与max,min的区别,虽然也可以实现,但只是针对数字字段. 1.初始化 ...

  9. 牛客小白月赛5 I - 区间

    看到一份不错的操作..... 链接:https://www.nowcoder.com/acm/contest/135/I 来源:牛客网 Apojacsleam喜欢数组. 他现在有一个n个元素的数组a, ...

  10. archlinux安装交叉编译工具链

    1. 在/usr/local下新建文件夹:arm  [guo@archlinux local]$sudo mkdir arm 2. 将交叉编译工具拷贝到arm文件夹中  [guo@archlinux ...