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. 递归-归并排序 思想 JAVA实现

    已知一个数组   15.58.61.75.21.32.89.4.78.83.采用递归实现的归并排序将数组有序. 分治策略:(摘自<算法导论>) 在分治策略中,我们采用递归解决问题 分解:将 ...

  2. SDUT OJ 数据结构实验之链表七：单链表中重复元素的删除

    数据结构实验之链表七:单链表中重复元素的删除 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Discuss Problem ...

  3. 20165224 陆艺杰 Exp4 恶意代码分析

    Exp4 恶意代码分析 1实验后回答问题 (1)如果在工作中怀疑一台主机上有恶意代码,但只是猜想,所有想监控下系统一天天的到底在干些什么.请设计下你想监控的操作有哪些,用什么方法来监控. 计划任务每段 ...

  4. svn学习笔记（一）

    一.svn介绍 1.1 项目管理中的版本控制问题 通常软件开发由多人协作开发,如果对代码文件.配置文件.文档等没有进行版本控制,将会出现很多问题: 备份多个版本,占用磁盘空间大 解决代码冲突困难 容易 ...

  5. ProgressBar(进度条)、SeekBar(拖动条)与星级评分条(RatingBar)

    1.ProgressBar(进度条) (1)介绍 (2)常用属性 (3)xml代码 <ProgressBar android:id="@+id/progressBar2" s ...

  6. 深入理解promise

    如今promise大行其道,关于异步方面的几乎都有它的影子,新的fetch api返回的是promise对象,generator中的yield后面一般也会跟promise对象,async的await后 ...

  7. once函数，简约不简单的

    module.exports = once once.proto = once(function () { Object.defineProperty(Function.prototype, 'onc ...

  8. mysql数据库知识

    学而时习之,不亦说乎!                              --<论语> 数据库所有操作的总结.   1.mysql的数据库服务为mysqld.exe   windo ...

  9. CNN Advanced

    from sys import path path.append('/home/ustcjing/models/tutorials/image/cifar10/') import cifar10,ci ...

  10. 数据库nomount mount open阶段走向

    先来简要了解一下Oracle数据库体系架构以便于后面深入理解,Oracle Server主要由实例(instance)和数据库(database)组成.实例(instance)由共享内存(SGA)和后 ...