这节介绍如何自定义jquery插件,实现分页效果,话不多说,先看看实现的效果:
分页插件
实现的代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta charset="utf-8">
<title>page test</title>
<style>
html,body,#pages,items{
font-size:11px;
font-family:"宋体","Times New Roman";
}
.page_item{
background:#C9DCD7;
width:155px;
text-align:left;
padding:10px;
border-bottom:1px solid #3CF;
}
.page_item:hover{
background:#A9C9FA;
cursor:pointer;
}
#page_ctrl{
padding-top:5px;
}
.page_ctrl{
width:40px;
text-align:center;
background:#A9C9FA;
float:left;
margin:2px;
padding-top:5px;
padding-bottom:5px;
}
.page_ctrl:hover{
background:#C9DCD7;
cursor:pointer;
}
</style>
<script type="text/javascript" src="../../zTree/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
var showItemInfo;
(function($){
$.fn.itemPage = function(options){
var defaults = {};
var options = $.extend(defaults, options);
var data=options.data,//数据
currpage=options.currpage,//当前页
pagesize=options.pagesize;//每页显示的数据条目器
var total=data.total;
var items=$("<div id='items'></div>"),
pagectrl=$("<div id='page_ctrl'></div>");
var first=$("<div id=\"first\" class=\"page_ctrl\" onClick=\"showPage('first')\">首 页</div>"),
prev=$("<div id=\"prev\" class=\"page_ctrl\" onClick=\"showPage('prev')\">前一页</div>"),
next=$("<div id=\"next\" class=\"page_ctrl\" onClick=\"showPage('next')\">后一页</div>"),
last=$("<div id=\"last\" class=\"page_ctrl\" onClick=\"showPage('last')\">末 页</div>");
var start=getStartindex(),
end=getEndindex();
for(var i=start;i<end;i++){
var itemi=$("<div class='page_item' onClick='showItemInfo("+i+")'>"+data.items[i].text+"</div>");
items.append(itemi);
}
pagectrl.append(first),
pagectrl.append(prev),
pagectrl.append(next)
pagectrl.append(last);
var container = $(this);
container.append(items),
container.append(pagectrl);
function getStartindex(){
return (currpage-1)*pagesize;
}
function getEndindex(){
var endIndex=0;
if(data.total%pagesize!=0 && currpage==getLastPage()){
endIndex = data.total;
}
else {
endIndex = currpage*pagesize;
}
return endIndex;
}
showItemInfo = function(i){
console.log(i);
};
}
})(jQuery);
</script>
<script type="text/javascript">
var PAGE_DATA={
"total":10,
"items":[
{"id":1,"text":"数据1"},
{"id":2,"text":"数据2"},
{"id":3,"text":"数据3"},
{"id":4,"text":"数据4"},
{"id":5,"text":"数据5"},
{"id":6,"text":"数据6"},
{"id":7,"text":"数据7"},
{"id":8,"text":"数据8"},
{"id":9,"text":"数据9"},
{"id":10,"text":"数据10"}
]
};
var currpage=1;
var pagesize=4;
$(document).ready(function (){
loadPages(currpage);
});
function showPage(page){
console.log(page);
switch(page){
case "prev":{//前一页
if(currpage>1){
currpage=currpage-1;
}
else{
alert("没有上一页了!");
}
break;
}
case "next":{//后一页
if(currpage!=getLastPage()){
currpage=currpage+1;
}
else{
alert("没有下一页了!");
}
break;
}
case "last":{//最后一页
currpage=getLastPage();
break;
}
default:{
currpage=1;//第一页
break;
}
}
loadPages(currpage);
};
function loadPages(page){
$('#pages').html("");
$('#pages').itemPage({
data:PAGE_DATA,
currpage:page,
pagesize:pagesize
});
};
function getLastPage(){
var total=PAGE_DATA.total;
if(total%pagesize==0){
return total/pagesize;
}
else{
return parseInt(total/pagesize)+1;
}
}
</script>
</head>
<body>
<div id="pages">
</div>
</body>
</html>
下面说说实现思路。实现分页效果,数据的加载可以分为两种情况:一次性获取数据和动态获取数据。一次性获取数据就是将所要查询的数据一次性查询出来,在前台去做分页处理;动态获取数据是根据当前页面和每页显示的条目数去动态获取数据。对于第一种,可在数据量比较小的情况下使用,可以减去每次去请求数据库和写分页sql语句的麻烦;对于第二种,适用于数据量比较大的时候,当数据量特别大的时候,一次性查询数据不论是前端还是后端,无疑都会减缓程序的执行效率与时间。
第二种情况的实现比第一种的实现简单,所以本文就不做说明,本文为第一种。
首先,获取数据。在程序中,我模拟定义了一个数据,JSON格式的,包括总条数和各对象。
其次,根据currpage和pagesize加载所要显示的条目。这里面,获取起始数和结束数是关键。起始数比较简单,为(currpage-1)*pagesize;终止数稍微麻烦一点,因为有一个判断data.total%pagesize是否为零和当前页是不是最后一页,当data.total%pagesize!=0并且满足当前页为最后一页的条件时,终止数为data.total,否组终止数为currpage*pagesize。
再次,页面控制的实现。页面控制的关键是currpage。第一页,currpage=1即可;最后一页得判断total%pagesize是否为零,是值为total/pagesize,不是值为otal/pagesize取整+1;上一页,如果当前页大于零的情况下为当前页减1,否则,没有上一页;下一页,如果当前页小于最后一页的情况下,当前页加1,否则,没有最后一页。
最后,加载显示。