分享一个简洁的分页插件

谁践踏了优雅 2022-03-18 11:36 201阅读 0赞

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <title></title>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0">
    
        <style>
        	*{
        		padding: 0;
        		margin: 0;
        	}
    		
    		/*分页图标*/
    		@font-face {font-family: "iconfont";
    		  src: url('iconfont.eot?t=1542248625101'); /* IE9*/
    		  src: url('iconfont.eot?t=1542248625101#iefix') format('embedded-opentype'), /* IE6-IE8 */
    		  url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
    		  url('iconfont.ttf?t=1542248625101') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
    		  url('iconfont.svg?t=1542248625101#iconfont') format('svg'); /* iOS 4.1- */
    		}
    
    		.iconfont {
    		  font-family:"iconfont" !important;
    		  font-size:16px;
    		  font-style:normal;
    		  -webkit-font-smoothing: antialiased;
    		  -moz-osx-font-smoothing: grayscale;
    		}
    
    		.icon-iconfontjiantou5:before { content: "\e635"; }
    
    		.icon-gengduo1:before { content: "\e625"; }
    
    		.icon-fanhui:before { content: "\e600"; }
    
    		.icon-gengduo:before { content: "\e601"; }
    
    		.icon-guanbi:before { content: "\e7be"; }
    
    		.icon-guanbi1:before { content: "\e611"; }
    
    		.icon-shangyimian:before { content: "\e610"; }
    
    		.icon-xiayimian:before { content: "\e612"; }
    
    		.icon-xiala:before { content: "\e658"; }
    
    		.icon-huhuanx:before { content: "\e64e"; }
    
    		
    		/*分页样式*/
        	.page_div {margin-top: 20px;margin-bottom: 20px;font-size: 15px;font-family: "microsoft yahei";color: #999;box-sizing: border-box;clear: both;overflow: hidden;}
    		.page_div a {display: inline-block;margin-right: 5px;border-radius: 4px;border: 1px solid #d7d7d7;width: 38px;height: 35px;text-align: center;line-height: 35px;cursor: pointer;color: #999;font-weight: 200;}			
    		.page_div .pNum:hover{background: #4091fc;color: #fff !important;border: 1px solid #4091fc !important;}
    		.goPage {width: 38px;height: 35px;font-size: 15px;color: #333;line-height: 30px;border: 1px solid #d7d7d7;border-radius: 4px;text-align: center;outline: none;margin: 0 10px;}
    		#firstPage{width: 50px;color: #0073A9;border: 1px solid #0073A9!important;}			
    		#lastPage {background: #4091fc;width: 60px !important;border: 0;margin-right: 0;color: #fff;}
    		#prePage,#nextPage {border-radius: 4px;border: 1px solid #d7d7d7;width: 38px;height: 35px;text-align: center;line-height: 35px;cursor: pointer;color: #999;font-weight: 200;}			
    		.page_div .current {background: #4091fc;color: #fff !important;border: 1px solid #4091fc !important;}			
    		.totalPages {margin: 0 10px;}
    		.totalPages span,.totalSize span {color: #999;margin: 0 5px;}
    		.divPage{float: right;}
    
    		.page-s{
    			    line-height: 40px;
    		}
        </style>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    
        <script type="text/javascript">
        	(function($, window, document, undefined) {
    			function Paging(element, options) {
    				this.element = element;
    				this.options = {
    					pageNo: options.pageNo || 1,
    					totalPage: options.totalPage,
    					totalSize: options.totalSize,
    					callback: options.callback
    				};
    				this.init();
    			}
    			Paging.prototype = {
    				constructor: Paging,
    				init: function() {
    					this.creatHtml();
    					this.bindEvent();
    				},
    				creatHtml: function() {
    					var me = this;
    					var content = "";
    					var current =  (parseInt($(".totalPages .goPage").val()) > 0 ? parseInt($(".totalPages .goPage").val()) : me.options.pageNo);
    					var total = me.options.totalPage;
    					var totalNum = me.options.totalSize;
    					var pageNum = $(".totalPages .goPage").val()
    					console.log(total)
    					content += "<span class='page-s'>当前第"+current+"页，共"+total+"页，<span><span class='totalSize'> 共<span>" + totalNum + "</span>条记录 </span>";
    					content += "<div class='divPage'><a id='prePage' class='pNum'><span class=\"iconfont icon-fanhui\" style=\"position: relative;left: 3px;\"></span></a>";
    					if(total > 6) {
    						
    						if(current < 5) {
    							
    							for(var i = 1; i < 6; i++) {
    								if(current == i) {
    									content += "<a class='current pNum'>" + i + "</a>";
    								} else {
    									content += "<a class='pNum'>" + i + "</a>";
    								}
    							}
    							content += "<a>. . .</a>";
    							content += "<a class='pNum'>" + total + "</a>";
    						} else {
    							if(current < total - 3) {
    								content += "<a class='pNum'>1</a>";
    								content += "<a>. . .</a>";
    								for(var i = current - 2; i < current + 3; i++) {
    									if(current == i) {
    										content += "<a class='current pNum'>" + i + "</a>";
    									} else {
    										content += "<a class='pNum'>" + i + "</a>";
    									}
    								}
    								content += "<a>. . .</a>";
    								content += "<a class='pNum'>" + total + "</a>";
    							} else if(current > total){						
    								content += "<a class='pNum'>1</a>";
    								content += "<a>. . .</a>";
    								for(var i = total - 4; i < total + 1; i++) {
    									if(total == i) {
    										content += "<a class='current pNum'>" + i + "</a>";
    									} else {
    										content += "<a class='pNum'>" + i + "</a>";
    									}
    								}
    							} else {
    								content += "<a class='pNum'>1</a>";
    								content += "<a>. . .</a>";
    								for(var i = total - 4; i < total + 1; i++) {
    									if(current == i) {
    										content += "<a class='current pNum'>" + i + "</a>";
    									} else {
    										content += "<a class='pNum'>" + i + "</a>";
    									}
    								}
    							}
    						}
    					} else {
    						for(var i = 1; i < total + 1; i++) {
    							if(current == i) {
    								content += "<a class='current pNum'>" + i + "</a>";
    							} else {
    								content += "<a class='pNum'>" + i + "</a>";
    							}
    						}
    					}
    					content += "<a id='nextPage' class='pNum'><span class=\"iconfont icon-gengduo\" style=\"position: relative;left: -3px;\"></span></a>";
    					
    					content += "<span class='totalPages'>到第<span><input type=\"text\" class = \"goPage\" width=\"30\" height=\"30\"/></span>页 </span>";
    					content += "<a id=\"lastPage\">确定</a>";
    
    					content += "</div>";
    					
    					me.element.html(content);
    				},
    				bindEvent: function() {
    					var me = this;
    					me.element.off('click', 'a');
    					me.element.on('click', 'a', function() {
    						var num = $(this).html();
    						var id = $(this).attr("id");
    						if(id == "prePage") {
    							if(me.options.pageNo == 1) {
    								//me.options.pageNo = 1;
    								return;
    							} else {
    								me.options.pageNo = +me.options.pageNo - 1;
    							}
    						} else if(id == "nextPage") {
    							if(me.options.pageNo == me.options.totalPage) {
    								//me.options.pageNo = me.options.totalPage
    								return;
    							} else {
    								me.options.pageNo = +me.options.pageNo + 1;
    							}
    						} else if(id == "lastPage") {
    							
    							var pageNum = $(".totalPages .goPage").val()
    							if(pageNum < me.options.totalPage && pageNum >= 1){
    								me.options.pageNo = pageNum;
    							}else if(pageNum < 1){
    								me.options.pageNo = 1;
    							}else{
    								me.options.pageNo = me.options.totalPage
    							}
    							
    						}else {
    							if(me.options.pageNo == parseInt(num) || num == '. . .'){
    								return;
    							}else{
    								me.options.pageNo = +num;
    							}	
    						}
    						me.creatHtml();
    						if(me.options.callback) {
    							me.options.callback(me.options.pageNo);
    						}
    					});
    					me.element.off('keydown', 'input');
    					me.element.on('keydown', 'input', function() {				
    						var id = $(this).attr("id");
    						var num = $(this).html();
    						var curkey = event.which;
    			            if(curkey == 13){            	
    			            	var pageNum = $(".totalPages .goPage").val()
    							if(pageNum < me.options.totalPage && pageNum >= 1){
    								me.options.pageNo = pageNum;
    							}else if(pageNum < 1){
    								me.options.pageNo = 1;
    							}else{
    								me.options.pageNo = me.options.totalPage
    							}
    			            	
    			            	me.creatHtml();
    							if(me.options.callback) {
    								me.options.callback(me.options.pageNo);
    							}
    			            	
    			            } 
    					})
    					
    				}
    			};
    			$.fn.paging = function(options) {
    				return new Paging($(this), options);
    			}
    		})(jQuery, window, document);
        </script>
    
    
    </head>
    <body>
    
    	<div class="page_div"></div>
    
    
    	<script type="text/javascript">
    		$('.page_div').paging({
    			pageNo: 1,
    			totalPage: 10,
    			totalSize: 100,
    			callback: function(e){
    				console.log(e);
    				console.log('分页回调')
    			}
    		});
    	</script>
    </body>
    </html>