简单的web分页控件

简单的web分页控件

很多时候做web前端页面都会用到分页，这是之前在网上找的这里我又给整理了下。

这里包括js和css，如果对css不满意可以自己调整，如果对分页的元素不满意同样可以自己去修改js代码来达到满意的效果。

不废话，直接贴代码。

 

<script src="jquery-1.11.1.min.js" type="text/javascript"></script><script src="page.js" type="text/javascript"></script><script> $(function(){ //初始化加载分页 getPage(1,10); }); function getPage(pageIndex,totalPage){ $(".information_page").createPage({ //创建分页 pageCount : totalPage, //总页数 current : pageIndex, //当前页 backFn : function(p) { //p不用管 getPage(p,totalPage); //点击页码或者跳转页码时的回掉函数，p为要跳转的页码 } }); } </script> //存放分页的p

 

js文件可以不用看，直接copy

page.js

 

//分页插件
/**
2017-06-15 zh
**/
(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(parseInt(args.current) > 1){
					obj.append('

上一页

'); }else{ obj.remove('.prevPage'); obj.append('

上一页

'); } //中间页码 if(parseInt(args.current) != 1 && parseInt(args.current) >= 4 && parseInt(args.pageCount) != 4){ obj.append('

'+1+'

'); } if(parseInt(args.current-2) > 2 && parseInt(args.current) <= parseInt(args.pageCount) && parseInt(args.pageCount) > 5){ obj.append('

...

'); } var start = parseInt(args.current) -2; var end = parseInt(args.current) +2; if((start > 1 && parseInt(args.current) < 4)||parseInt(args.current) == 1){ end++; } if(parseInt(args.current) > parseInt(args.pageCount)-4 && parseInt(args.current) >= parseInt(args.pageCount)){ start--; } for (;start <= end; start++) { if(start <= parseInt(args.pageCount) && start >= 1){ if(start != parseInt(args.current)){ obj.append('

'+ start +'

'); }else{ obj.append('

'+ start +'

'); } } } if(parseInt(args.current) + 2 < parseInt(args.pageCount) - 1 && parseInt(args.current) >= 1 && parseInt(args.pageCount) > 5){ obj.append('

...

'); } if(parseInt(args.current) != parseInt(args.pageCount) && parseInt(args.current) < parseInt(args.pageCount) -2 && parseInt(args.pageCount) != 4){ obj.append('

'+args.pageCount+'

'); } //下一页 if(parseInt(args.current) < parseInt(args.pageCount)){ obj.append('

下一页

'); }else{ obj.remove('.nextPage'); obj.append('

下一页

'); } obj.append('

跳转页

确定'); })(); }, //绑定事件 bindEvent:function(obj,args){ return (function(){ obj.off("click","a.tcdNumber"); 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.off("click","a.prevPage"); 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.off("click","a.nextPage"); 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); } }); obj.off("click","a.btn"); obj.on("click","a.btn",function(){ var current =$("#pageIndex").val(); if(parseInt(current)>0 && parseInt(current)<=parseInt(args.pageCount) && current!=""){ ms.fillHtml(obj,{"current":current,"pageCount":args.pageCount}); if(typeof(args.backFn)=="function"){ args.backFn(current); } $("#pageIndex").val(current); }else{ $("#pageIndex").val(""); } }); })(); }, init1:function(obj,args){ return (function(){ ms.fillHtml(obj,args); })(); } } $.fn.createPage = function(options){ var args = $.extend({ pageCount : 50, current : 1, backFn : function(){ } },options); ms.init(this,args); }; })(jQuery);
运行效果：

 

如有问题欢迎讨论...