利用jquery.page.js如何实现分页效果

2020-11-27 来源：赴品旅游

这篇文章主要为大家详细介绍了基于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> 
 
<p class="tcdPageCode"></p> 
 
<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);

上面是我整理给大家的，希望今后会对大家有帮助。

在JS中如何实现预览效果

使用three.js制作一个项目

详细介绍js中this对象用法

显示全文

全部栏目

利用jquery.page.js如何实现分页效果