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. Python里面的负号的各种神奇用法？来填坑啦

    1.x.reshape(-1,2) x = np.linspace(1,10,10) x.reshape(-1,2) reshape(-1,2)里-1的应该是不管多少行,按两列算,行数自动算出.同理, ...

  2. SDUT OJ 数据结构实验之串三：KMP应用

    数据结构实验之串三:KMP应用 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Discuss Problem Descrip ...

  3. java基础_02

    一.this和super 作用: this:区分成员变量和局部变量 super:区分父类的成员变量和局部变量 用法: this.成员变量名://访问本类的成员变量 this.成员方法名()://访问本 ...

  4. java 实现word 转 pdf

    java 实现word  转 pdf 不知道网上为啥道友们写的这么复杂  ,自己看到过一篇还不错的  , 自己动手改了改 ,测试一下可以用  , 希望大家可以参考一下 , 对大家有帮助 1.引入jar ...

  5. php 编码和解码的函数

    URL: urlencode(); //编码 urldecode(); //解码 URL与数组互转: parse_url () http_build_query() base64: base64_en ...

  6. C++_类继承1-从一个简单的类开始

    面向对象编程的主要目的之一是:提供可重用的代码.尤其是项目很庞大的时候,重用测试过的代码比重新编码代码要好得多. C++提供了更高层次的重用性.其中之一就是继承这个概念. 一些厂商提供了类库.类库由类 ...

  7. LeetCode记录之27——Remove Element

    这道题跟26题很类似,并且有官方的答案.看了官方的答案之后发现写得特别巧,自己做的题太少思路太窄.有意思的是我的算法的时间复杂度是O(N^2),官方的是O(N),我的实际运行时间还少了2ms. ive ...

  8. Oracle SET UNUSED的用法

    SET UNUSED的用法 原理:清楚掉字典信息(撤消存储空间),不可恢复.    可以使用 SET UNUSED选项标记一列或者多列不可用.    使用DROP SET UNUSED选项删除被被标记 ...

  9. Q680 验证回文字符串 Ⅱ

    给定一个非空字符串 s,最多删除一个字符.判断是否能成为回文字符串. 示例 1: 输入: "aba" 输出: True 示例 2: 输入: "abca" 输出: ...

  10. scrapy模块之分页处理,post请求,cookies处理,请求传参

    一.scrapy分页处理 1.分页处理 如上篇博客,初步使用了scrapy框架了,但是只能爬取一页,或者手动的把要爬取的网址手动添加到start_url中,太麻烦接下来介绍该如何去处理分页,手动发起分 ...