基于jquery.page.js实现分页效果
程序员文章站
2022-07-02 16:34:43
基于jquery.page.js的一款简单的分页效果，供大家参考，具体内容如下
...
基于jquery.page.js的一款简单的分页效果，供大家参考，具体内容如下
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>简单的jquery分页插件</title>
<style>
*{ margin:0; padding:0; list-style:none;}
a{ text-decoration:none;}
a:hover{ text-decoration:none;}
.tcdpagecode{padding: 15px 20px;text-align: left;color: #ccc;text-align:center;}
.tcdpagecode a{display: inline-block;color: #428bca;display: inline-block;height: 25px; line-height: 25px; padding: 0 10px;border: 1px solid #ddd; margin: 0 2px;border-radius: 4px;vertical-align: middle;}
.tcdpagecode a:hover{text-decoration: none;border: 1px solid #428bca;}
.tcdpagecode span.current{display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px;color: #fff;background-color: #428bca; border: 1px solid #428bca;border-radius: 4px;vertical-align: middle;}
.tcdpagecode span.disabled{ display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px; color: #bfbfbf;background: #f2f2f2;border: 1px solid #bfbfbf;border-radius: 4px;vertical-align: middle;}
</style>
</head>
<body>
<br><br><br>
<div class="tcdpagecode"></div>
<center><pre><br>
</pre></center>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.page.js"></script>
<script>
$(".tcdpagecode").createpage({
pagecount:100,
current:1,
backfn:function(p){
console.log(p);
}
});
</script>
</body>
</html>
调用方法如下：
$(".tcdpagecode").createpage({
pagecount:10,
current:1,
backfn:function(p){
//单击回调方法，p是当前页码
}
});
pagecount：总页数
current：当前页
以下是jquery.page.js源代码：
(function($){
var ms = {
init:function(obj,args){
return (function(){
ms.fillhtml(obj,args);
ms.bindevent(obj,args);
})();
},
//填充html
fillhtml:function(obj,args){
return (function(){
obj.empty();
//上一页
if(args.current > 1){
obj.append('<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="prevpage">上一页</a>');
}else{
obj.remove('.prevpage');
obj.append('<span class="disabled">上一页</span>');
}
//中间页码
if(args.current != 1 && args.current >= 4 && args.pagecount != 4){
obj.append('<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="tcdnumber">'+1+'</a>');
}
if(args.current-2 > 2 && args.current <= args.pagecount && args.pagecount > 5){
obj.append('<span>...</span>');
}
var start = args.current -2,end = args.current+2;
if((start > 1 && args.current < 4)||args.current == 1){
end++;
}
if(args.current > args.pagecount-4 && args.current >= args.pagecount){
start--;
}
for (;start <= end; start++) {
if(start <= args.pagecount && start >= 1){
if(start != args.current){
obj.append('<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="tcdnumber">'+ start +'</a>');
}else{
obj.append('<span class="current">'+ start +'</span>');
}
}
}
if(args.current + 2 < args.pagecount - 1 && args.current >= 1 && args.pagecount > 5){
obj.append('<span>...</span>');
}
if(args.current != args.pagecount && args.current < args.pagecount -2 && args.pagecount != 4){
obj.append('<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="tcdnumber">'+args.pagecount+'</a>');
}
//下一页
if(args.current < args.pagecount){
obj.append('<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="nextpage">下一页</a>');
}else{
obj.remove('.nextpage');
obj.append('<span class="disabled">下一页</span>');
}
})();
},
//绑定事件
bindevent:function(obj,args){
return (function(){
obj.on("click","a.tcdnumber",function(){
var current = parseint($(this).text());
ms.fillhtml(obj,{"current":current,"pagecount":args.pagecount});
if(typeof(args.backfn)=="function"){
args.backfn(current);
}
});
//上一页
obj.on("click","a.prevpage",function(){
var current = parseint(obj.children("span.current").text());
ms.fillhtml(obj,{"current":current-1,"pagecount":args.pagecount});
if(typeof(args.backfn)=="function"){
args.backfn(current-1);
}
});
//下一页
obj.on("click","a.nextpage",function(){
var current = parseint(obj.children("span.current").text());
ms.fillhtml(obj,{"current":current+1,"pagecount":args.pagecount});
if(typeof(args.backfn)=="function"){
args.backfn(current+1);
}
});
})();
}
}
$.fn.createpage = function(options){
var args = $.extend({
pagecount : 10,
current : 1,
backfn : function(){}
},options);
ms.init(this,args);
}
})(jquery);
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： 深度解密Go语言之反射
下一篇： 关于css的总结