基于jquery分页插件
今天终于完成了基于jquery的分页插件的代码编写，也通过了功能测试，实现了分页功能；由于刚开始写jquery的插件，所以梳理逻辑的时间也很长，整个过程整整一周时间，今天终于搞完了，先将整个分页插件的逻辑分享给大家，并将源码上传到自己的github仓库，有需要的请点击这里下载；给大家先看一下效果图;
整个分页逻辑如下：
首先判断分页类型，有两种情况，第一：pageCount > showNum；第二：pageCount <= showNum；
在第一种情况下还会出现如下三种情况;
1、pageNo <= showNum + 2;
2、showNum + 2 < pageNo <= pageCount – showNum + 3;
3、pageCount – showNum + 3 < pageNo <= pageCount;
在1的情况下又分为两种情况：
（1）、pageNo <= showNum;
（2）、showNum < pageNo <= showNum + 2;
在（2）中情况下面要考虑pageNo是否为最后一页或倒数第二页，如果是则隐藏…
提示：
pageNo当前页码
pageCount总页码数
pageSize每页显示条数
showNum显示几条页码在页面上
不多说了，给大家附上js源码，如果在阅读的过程中发现问题，欢迎大家在评论区与我探讨；
1 (function($){ 2 $.fn.paging = function (option) { //通过$.fn定义分页函数paging，在需要分页的地方直接调用 3 var defaultOptions = {//默认项设置 4 pageNo:1,//默认当前页 5 pageSize:10,//默认每页显示条数 6 count:0,//默认数据总条数 7 showNum:6,//默认显示页码数 8 jumpTo:true,//默认显示跳转指定页模块 9 jumpBtnName:'确定',//默认跳转按钮的名称 10 fontSize:16,//跳转按钮字体大小 11 }; 12 13 var self = this; 14 var pagingCount = 0;//共计页码 15 var Settings = $.extend( {}, defaultOptions, option );/*将defaultOptions对象和option 16 随想相应的属性合并，并将新的对象赋值给Setting对象本身*/ 17 $(this).empty();//清空当前$作用域 18 19 var checkDigit = function () {/*校验数据条数count,每页显示条数pageSize,当前页pageNo, 20 显示页码数showNum是否非法输入*/ 21 if( Settings.pagNo < 0 || Settings.pageSize < 0 || Settings.count < 0){ 22 console.error( "请检查 pagNo,pageSize,count这个三个参数是否存在非法输入" ); 23 return false; 24 } 25 //如果showNum为非法数值，那么设置为默认值 26 if( Settings.showNum < 0 ){ 27 Setting.showNum = 6; 28 return true; 29 } 30 } 31 32 var JsonPageConstruct = function (pageNo,pageCount,pageSize,showNum) { 33 //构建分页页码的变现形式，返回json字符串 34 //pageNo当前页码 35 //pageCount总页码数 36 //pageSize每页显示条数 37 //showNum显示几条页码在页面上 38 var data = ''; 39 if(pageNo == 1){ 40 data = '{"jsonData":[{"text":"上一页","num":0,"state":"disabled"},'; 41 } 42 else{ 43 data = '{"jsonData":[{"text":"上一页","num":"'+ ( pageNo - 1 ) +'",'+ 44 '"state":"abled"},'; 45 } 46 /* 47 判断分页类型，有两种情况，第一：pageCount > showNum；第二：pageCount <= 48 showNum； 49 在第一种情况下还会出现如下三种情况; 50 1、pageNo <= showNum + 2; 51 2、showNum + 2 < pageNo <= pageCount - showNum + 3; 52 3、pageCount - showNum + 3 < pageNo <= pageCount; 53 在1的情况下又分为两种情况： 54 （1）、pageNo <= showNum; 55 （2）、showNum < pageNo <= showNum + 2; 56 在（2）中情况下面要考虑pageNo是否为最后一页或倒数第二页，如果是则隐藏... 57 */ 58 if( pageCount > showNum ) { 59 if( pageNo <= showNum + 2 ) { 60 if( pageNo <= showNum ) { 61 for(var i= 1 ;i <= showNum ; i++ ){ 62 if( pageNo == i ) { 63 data += '{"text":"'+ i +'","num":"'+ i +'","state":"active"},'; 64 } 65 else{ 66 data += '{"text":"'+ i +'","num":"'+ i +'","state":"abled"},'; 67 } 68 } 69 if( pageNo == showNum ) { 70 //显示页面后面在刷新出一个， 71 //此时i = showNum + 1,这边之所以能够访问到i，是因为js在声明变量 72 //的时候提升申明了，提升到最前面声明 73 data += '{"text":"'+ i +'","num":"'+ i +'","state":"abled"},'; 74 } 75 } 76 else{ 77 for (var j = 1; j <= pageNo; j++) { 78 if( pageNo == j ) { 79 data += '{"text":"'+ j +'","num":"'+ j +'","state":"active"},'; 80 } 81 else{ 82 data += '{"text":"'+ j +'","num":"'+ j +'","state":"abled"},'; 83 } 84 } 85 if(pageNo != pageCount){ 86 data += '{"text":"'+ j +'","num":"'+ j +'","state":"abled"},'; 87 } 88 } 89 //如果总页数pageCount <= showNum + 2,则隐藏... 90 if(pageNo != pageCount){ 91 if(pageNo != (pageCount - 1)){ 92 data+='{"text":"...","num":"more","state":"disabled"},'; 93 } 94 } 95 } 96 else if(pageNo <= pageCount - showNum + 3){ 97 data += '{"text":"1","num":"1","state":"abled"},'; 98 data += '{"text":"2","num":"2","state":"abled"},'; 99 data += '{"text":"...","num":"more","state":"disabled"},'; 100 for (var m = pageNo - 2; m <= pageNo + 2; m++) { 101 if(pageNo == m){ 102 data += '{"text":"'+ m +'","num":"'+ m +'","state":"active"},'; 103 } 104 else{ 105 data += '{"text":"'+ m +'","num":"'+ m +'","state":"abled"},'; 106 } 107 } 108 data += '{"text":"...","num":"more","state":"disabled"},'; 109 } 110 else{ 111 data += '{"text":"1","num":"1","state":"abled"},'; 112 data += '{"text":"2","num":"2","state":"abled"},'; 113 data += '{"text":"...","num":"more","state":"disabled"},'; 114 for (var n = pageCount - showNum + 1; n <= pageCount; n++) { 115 if(pageNo == n){ 116 data += '{"text":"'+ n +'","num":"'+ n +'","state":"active"},'; 117 } 118 else{ 119 data += '{"text":"'+ n +'","num":"'+ n +'","state":"abled"},'; 120 } 121 } 122 } 123 } 124 if(pageNo == pageCount){ 125 data += '{"text":"下一页","num":"'+ (pageNo + 1) +'","state":"disabled"}]}'; 126 }else{ 127 data += '{"text":"下一页","num":"'+ (pageNo + 1) +'","state":"abled"}]}'; 128 } 129 var json_return = JSON.parse(data); 130 return json_return; 131 } 132 133 /* 134 将分页结果显示到页面的相应的位置 135 */ 136 function PagingJson(json){ 137 138 if(parseInt(Settings.count)>0){ 139 var html = '<ul class="pagination" style="display:flex;list-style:none;">'; 140 for(var a in json.jsonData){ 141 if(json.jsonData[a].state == "disabled"){ 142 html +='<li id="pageNum'+ json.jsonData[a].num +'" class="disabled" num="'+ json.jsonData[a].num +'" ><a href="javascript:;">'+ json.jsonData[a].text +'</a></li>'; 143 } 144 else if(json.jsonData[a].state == "active"){ 145 html +='<li id="pageNum'+ json.jsonData[a].num +'" class="active" num="'+ json.jsonData[a].num +'" ><a href="javascript:;">'+ json.jsonData[a].text +'</a></li>'; 146 147 }else{ 148 html +='<li id="pageNum'+ json.jsonData[a].num +'" num="'+ json.jsonData[a].num +'" ><a href="javascript:;">'+ json.jsonData[a].text +'</a></li>'; 149 } 150 } 151 $(self).html(html); 152 if(Settings.jumpTo == true){ 153 $(self).find(".pagination").append('<span class="text-muted" style="margin:5px;margin-left:10px;display:inline-block;font-size:18px;font-size:'+ Settings.fontSize +'px">共有'+ pagingCount +'页/'+ Settings.count +'个</span><div style="display:inline-block" name="changePage"><span class="text-muted" style="margin:5px;margin-left:0px;display:inline-block;font-size:'+ Settings.fontSize +'px">,到第</span> <input type="number" min="1" max="'+ pagingCount +'"class="pagination_change_page" style="width:45px;border-color:#ddd"> <span class="text-muted" style="margin:5px;margin-left:10px;display:inline-block;font-size:font-size:'+ Settings.fontSize +'px">页</span> <button class="btn btn-default btn-sm pagination_search">'+ Settings.jumpBtnName +'</button></div>'); 154 } 155 }else{ 156 157 } 158 } 159 160 161 162 163 var main = function () {//主函数 164 var check = checkDigit(); 165 if( check == false ){ 166 return false; 167 } 168 var pageNo = parseInt( Settings.pageNo ); 169 var pageSize = parseInt( Settings.pageSize ); 170 var count = parseInt( Settings.count ); 171 if( count % pageSize == 0){ 172 pagingCount = count / pageSize; 173 } 174 else{ 175 pagingCount = parseInt( count / pageSize ) + 1; 176 } 177 var showNum = parseInt( Settings.showNum ); 178 var pageJson = JsonPageConstruct(pageNo,pagingCount,pageSize,showNum); 179 PagingJson(pageJson); 180 $(self).off(); 181 }; 182 main(); 183 184 185 }; 186 })(jQuery)
paging
注意：
一定要引入jquery哦
版权声明：本文为hexiaobao原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。