Pagination是一款不但加载数据而且还能进行分页的jQuery插件，实现的过程是：先一次性将需要显示的数据载入到页面中，然后根据当前页面的索引号，获取指定某页需要显示的数据，并将这部分数据追加到内容显示容器中，从而实现分页加载数据的效果。
根据这一过程，Pagination插件在加载和显示数据时，时一次性，及时的，而不是异步请求，因此，它在执行分页显示数据时，速度很快，用户体验很好。但这种一次性加载数据到页面的操作并不适合对大量数据的请求，因此在页面中，如果是小数据量的分页显示需求，使用该插件还是十分好的。
Pagination插件的使用：
（1）插件文件：
Js-8-12/jquery.pagination.js
（2）下载地址：
http://d-scribe.de/webtools/jquery-pagintion/demo_options.htm
（3）功能描述：
在页面中，通过数据分页插件，以列表的形式显示全部的订单信息，包括"订单号"，"姓名"，"性别"，"总金额"，"详细"等内容。用户单击"详细"列中"查看"链接时，再次通过数据分页插件显示对应订单的全部图片信息。
（4）实现代码：
<Link href="Css-8-12/jquery.pagination.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="Jscript/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="Js-8-12/jquery.pagination.js"></script>
<style type="text/css">
...省略部分代码
</style>
<script type="text/javascript">
function psCallback(pi,jq){
//获取指定页码中的内容
var newcxt = $('#Result ul:eq(' + pi + ')').clone();
//向内容区添加指定页码的内容
$('#Content').empty().append(newcxt);
return false;
}
function isCallback(pi,jq){
//隐藏图片区域中的图片
$('#Picture img:visible').hide();
//显示图片区域中指定页码的图片
$('#Picture img:eq(' + pi + ')').show();
}
function initPagination(){
//获取全部记录数量
var SumNum = $('#Result ul').length;
//记录显示区绑定数据分页插件
$(".divpage").pagination(SumNum,{
num_edge_entries:1,
callback:paCallbck,
items_per_page:1
});
//获取全部图片数量
SumNum = $('#Picture img').length;
//图片显示区绑定另一个数据分页插件
$.(".divimg").pagination(SumNum,{
callback:paCallbck,
items_per_page:1
});
}
function showPic(){
$("ImgLst").toggle();
}
$(function(){
//调用数据分页插件
initPagination();
});
</script><div id="Iframe">
<div class="divpage"></div>
<br style="clear:both" />
<ul>
<li class="li">
<span>订单号</span>
<span>姓名</span>
<span>性别</span>
<span>总金额</span>
<span>详细</span>
</li>
</ul>
<div id="Content">
<span class="spntip">正在加载...</span>
</div>
<div class="divpage"></div>
<div id="Result">
<ul>
<li>
<span>10101</span>
<span>张小虎</span>
<span>男</span>
<span>465.98</span>
<span>
<a href="javascript:showPic()">
查看
</a>
</span>
</li>
<li>
<span>10101</span>
<span>张小虎</span>
<span>男</span>
<span>465.98</span>
<span>
<a href="javascript:showPic()">
查看
</a>
</span>
</li>
<li>
<span>10102</span>
<span>刘海</span>
<span>女</span>
<span>600.12</span>
<span>
<a href="javascript:showPic()">
查看
</a>
</span>
</li>
<li>
<span>10103</span>
<span>李烨海</span>
<span>男</span>
<span>930.12</span>
<span>
<a href="javascript:showPic()">
查看
</a>
</span>
</li>
</ul>
<ul>
<li>
<span>10201</span>
<span>张三百</span>
<span>男</span>
<span>565.98</span>
<span>
<a href="javascript:showPic()">
查看
</a>
</span>
</li>
<li>
<span>10202</span>
<span>接小海</span>
<span>男</span>
<span>900.12</span>
<span>
<a href="javascript:showPic()">
查看
</a>
</span>
</li>
<li>
<span>10203</span>
<span>李明明</span>
<span>女</span>
<span>630.12</span>
<span>
<a href="javascript:showPic()">
查看
</a>
</span>
</li>
</ul>
<ul>
<li>
<span>10301</span>
<span>程虎</span>
<span>男</span>
<span>765.98</span>
<span>
<a href="javascript:showPic()">
查看
</a>
</span>
</li>
<li>
<span>10302</span>
<span>张明海</span>
<span>女</span>
<span>802.12</span>
<span>
<a href="javascript:showPic()">
查看
</a>
</span>
</li>
<li>
<span>10303</span>
<span>胡小明</span>
<span>男</span>
<span>630.12</span>
<span>
<a href="javascript:showPic()">
查看
</a>
</span>
</li>
</ul>
</div>
<div id="ImgLst">
<div id="Picture" class="pic">
<img src="Images-8-12/pic08.jpg" />
<img src="Images-8-12/pic09.jpg" />
<img src="Images-8-12/pic10.jpg" />
<img src="Images-8-12/pic11.jpg" />
</div>
<div class="divimg"></div>
</div>
</div>（5）代码分析：
在本示例中，在使用数据分页插件Pagination之前，首先在页面的<head>元素中导入对应的CSS样式和插件文件，代码如下：
<Link href="Css-8-12/jquery.pagination.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="Jscript/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="Js-8-12/jquery.pagination.js"></script>在导入插件对应文件，需要注意与jQuery框架的先后顺序，因为数据分页插件Pagination是基于jQuery开发的，应该首先导入jQuery框架，然后导入插件对应的JS文件，否则使用将会有异常。
在完成插件导入后，接下来的工作就是编写对应的JavaScript代码，将页面中的内容元素与数据分页插件相绑定，实现数据分页显示的效果，核心代码如下：
function psCallback(pi,jq){
//获取指定页码中的内容
var newcxt = $('#Result ul:eq(' + pi + ')').clone();
//向内容区添加指定页码的内容
$('#Content').empty().append(newcxt);
return false;
}
function isCallback(pi,jq){
//隐藏图片区域中的图片
$('#Picture img:visible').hide();
//显示图片区域中指定页码的图片
$('#Picture img:eq(' + pi + ')').show();
}
function initPagination(){
//获取全部记录数量
var SumNum = $('#Result ul').length;
//记录显示区绑定数据分页插件
$(".divpage").pagination(SumNum,{
num_edge_entries:1,
callback:paCallbck,
items_per_page:1
});
//获取全部图片数量
SumNum = $('#Picture img').length;
//图片显示区绑定另一个数据分页插件
$.(".divimg").pagination(SumNum,{
callback:paCallbck,
items_per_page:1
});
}
function showPic(){
$("ImgLst").toggle();
}
$(function(){
//调用数据分页插件
initPagination();
});
...省略部分代码在上述代码中，首先自定两个用户插件回调的函数psCallback和isCallback，分别用于记录和图片数据在绑定数据分页插件时的回调处理；在这两个回调函数中都有两个参数：
pi：int类型，表示新的页码索引号。
jq：一个jQuery对象，表示加载分页链接数据的容器。
在编写完回调函数后，接下来自定义一个initPagination()函数，将页面中的元素数据分页插件相绑定，绑定的格式如下：
$(内容显示容器).pagination(num_display_entries,[options])在上述代码中，参数num_display_entries为必选项，表示需要显示的总条目数量，页面一次性加载后的记录总量；参数options算是一个可选项对象，该对象可以设置数据插件绑定元素时的相关属性，如显示主体记录条数，上一页或下一页对应的文本内容，该对象的详细功能属性和事件说明如下所示：
options对象的常用参数
参数名称 | 功能描述 |
items_per_page | 每页显示的条目数量，默认值为10。 |
num_display_entries | 连续分页页码主体部分显示的数量，默认值为10。 |
current_page | 当前选中的页面，默认值为0，表示第1页。 |
num_edge_entries | 分页页码首尾部分显示的条目数量，默认值为10。 |
link_to | 分页时链接，默认值为"#"。 |
prev_text | "上一页"分页按钮显示的文字内容，默认值为"Prev"。 |
next_text | "下一页"分页按钮显示的文字内容，默认值为"Next"。 |
ellipse_text | 省略的分页页面的表示文字，默认值为"..." |
prev_show_always | 是否显示"上一页"分页按钮，默认值为"true"，表示显示。 |
next_show_always | 是否显示"下一页"分页按钮，默认值为"true"，表示显示。 |
renderer | 分页时的模块名称，默认值为"defaultRenderer"。 |
show_if_single_page | 如果只有一页，是否显示分页导航，默认值为false，表示不显示。 |
load_first_page | 是否显示第1页，默认值为false，表示不显示。 |
callback | 数据插件绑定时，执行的回调函数，默认值为无执行效果。 |
