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. 5.js与jQuery入口函数执行时机

    js与jQuery入口函数执行时机区别: JS入口函数是在所有资源加载完成后,才执行.(包括:页面.外部js文件.外部css文件.图片) jQuery入口函数,是在文档加载完成后就执行.文档加载完成指 ...

  2. sql update 代替游标写法

    update TB_AreaUserDevice_Relation set OrderID = t.r from TB_AreaUserDevice_Relation rel inner join ( ...

  3. 开启HTML5之旅。。。

    学习大纲: 一.了解HTML 1.什么是HTML? HTML是用来描述网页的一种语言 HTML是一种超文本标记语言 Hyper Text Markap Language HTML不是一种编程语言,是一 ...

  4. WPF 仿IPhone滑块开关 样式 - CheckBox

    原文:WPF 仿IPhone滑块开关 样式 - CheckBox <Style x:Key="CheckRadioFocusVisual"> <Setter Pr ...

  5. Spring学习笔记（五）—— Spring整合JDBC

    一.Spring对JDBC的支持 Spring提供了很多模板整合Dao技术 与JDBC的整合中,Spring中提供了一个可以操作数据库的对象——JdbcTemplate,该对象封装了JDBC技术,与D ...

  6. 【算法笔记】B1036 跟奥巴马一起编程

    1036 跟奥巴马一起编程 (15 分) 美国总统奥巴马不仅呼吁所有人都学习编程,甚至以身作则编写代码,成为美国历史上首位编写计算机代码的总统.2014 年底,为庆祝“计算机科学教育周”正式启动,奥巴 ...

  7. Python常用的标准库以及第三方库有哪些？

    20个必不可少的Python库也是基本的第三方库 读者您好.今天我将介绍20个属于我常用工具的Python库,我相信你看完之后也会觉得离不开它们.他们是: Requests.Kenneth Reitz ...

  8. 1149 Dangerous Goods Packaging （25 分）

    When shipping goods with containers, we have to be careful not to pack some incompatible goods into ...

  9. Hibernate Annotation

    [转自] http://blog.sina.com.cn/s/blog_7ebc1b7e0100w58e.html Table Table用来定义entity主表的name,catalog,schem ...

  10. Java基础24-文档注释

    格式: /** .......*/ /** 此类是对数组进行取最大值 @author 深海溺心 @version 1.0 */ public class Compare{ private Compar ...