1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>page</title> 6 </head> 7 <style> 8 *{margin: 0;padding: 0;} 9 #page{ 10 height: 40px; 11 border: 1px solid #777; 12 margin: 200px auto; 13 box-sizing: border-box; 14 padding: 3px 10px; 15 } 16 .prev,.next{ 17 cursor: pointer; 18 } 19 #page a{ 20 display: inline-block; 21 vertical-align: top; 22 padding: 0 20px; 23 height: 28px; 24 line-height: 28px; 25 margin-right: -1px; 26 color: #333; 27 font-size: 12px; 28 border: 1px solid #e2e2e2; 29 text-decoration: none; 30 } 31 .active{ 32 background: #009688; 33 color: #fff!important; 34 border: 1px solid #009688!important; 35 } 36 .disabled{ 37 color: #d2d2d2!important; 38 cursor: not-allowed!important; 39 } 40 .first,.last{ 41 padding: 0 10px!important; 42 } 43 .count{ 44 display: inline-block; 45 vertical-align: top; 46 height: 28px; 47 line-height: 28px; 48 background-color: #fff; 49 color: #333; 50 font-size: 12px; 51 margin-left: 10px; 52 margin-right: 10px; 53 padding: 0; 54 border: none; 55 } 56 .page-limit{ 57 display: inline-block; 58 vertical-align: middle; 59 height: 28px; 60 line-height: 28px; 61 margin: 0 -1px 5px 9px; 62 background-color: #fff; 63 color: #333; 64 font-size: 12px; 65 } 66 .page-limit select{ 67 height: 22px; 68 padding: 3px; 69 border-radius: 2px; 70 cursor: pointer; 71 border: 1px solid #e2e2e2; 72 box-sizing: content-box; 73 font-size: 12px; 74 } 75 .page-skip{ 76 display: inline-block; 77 vertical-align: middle; 78 height: 30px; 79 line-height: 30px; 80 color: #999; 81 margin-left: 10px; 82 margin: 0 -1px 5px 10px; 83 background-color: #fff; 84 color: #333; 85 font-size: 12px; 86 } 87 .page-input{ 88 display: inline-block; 89 width: 40px; 90 margin: 0 10px; 91 padding: 0 3px; 92 text-align: center; 93 height: 30px; 94 line-height: 30px; 95 border-radius: 2px; 96 vertical-align: top; 97 background-color: #fff; 98 box-sizing: border-box; 99 border: 1px solid #e2e2e2; 100 outline: none; 101 } 102 .page-btn{ 103 margin-left: 10px; 104 padding: 0 10px; 105 cursor: pointer; 106 height: 30px; 107 line-height: 30px; 108 border-radius: 2px; 109 vertical-align: top; 110 background-color: #fff; 111 box-sizing: border-box; 112 border: 1px solid #e2e2e2; 113 outline: none; 114 } 115 </style> 116 <body> 117 <div id="page"></div> 118 </body> 119 <script src="jquery-1.8.3.min.js"></script> 120 <script> 121 "use strict"; 122 function initPage(elem,num,isFL,isCount,isLimit,isSkip,limitCount,pageSizeList){ 123 //页数计算 124 var page=Math.ceil(num/limitCount); 125 var a,b,c,d,f,html; 126 if(isFL){ 127 a='<a href="javascript:;" class="first disabled">首页</a>'; 128 if(page>1){ 129 130 b='<a href="javascript:;" class="last">末页</a>'; 131 }else{ 132 b='<a href="javascript:;" class="last disabled">末页</a>'; 133 } 134 }else{ 135 a=b=''; 136 } 137 if(isCount){ 138 c='<span class="count">共 '+num+' 条</span>'; 139 }else{ 140 c=''; 141 } 142 if(isLimit){ 143 d='<span class="page-limit"><select>'+ 144 '<option value="'+pageSizeList[0]+'" selected>'+pageSizeList[0]+' 条/页</option>'+ 145 '<option value="'+pageSizeList[1]+'">'+pageSizeList[1]+' 条/页</option>'+ 146 '<option value="'+pageSizeList[2]+'">'+pageSizeList[2]+' 条/页</option>'+ 147 '<option value="'+pageSizeList[3]+'">'+pageSizeList[3]+' 条/页</option>'+ 148 '<option value="'+pageSizeList[4]+'">'+pageSizeList[4]+' 条/页</option>'+ 149 '</select></span>'; 150 }else{ 151 d=''; 152 } 153 if(isSkip){ 154 f='<span class="page-skip">'+ 155 '到第<input type="text" class="page-input" value="1">页'+ 156 '<button class="page-btn">确定</button>' 157 '</span>' 158 ; 159 }else{ 160 f=''; 161 } 162 163 164 if(page==0){ 165 html=a+'<a href="javascript:;" class="prev disabled">上一页</a><a href="javascript:;" class="next disabled">下一页</a>'+b+c+d+f; 166 } 167 if(page==1){ 168 html=a+'<a href="javascript:;" class="prev disabled">上一页</a>'+ 169 '<a href="javascript:;" data-page="1" class="numpage active" islast="true">1</a>'+ 170 '<a href="javascript:;" class="next disabled">下一页</a>'+b+c+d+f; 171 } 172 if(page>1){ 173 html=a+'<a href="javascript:;" class="prev disabled" data-page="0">上一页</a>'+ 174 '<a href="javascript:;" data-page="1" class="numpage active" islast="false">1</a>'; 175 for(var i=2;i<page+1;i++){ 176 var last="false"; 177 if(i==page){ 178 last="true"; 179 } 180 html+=`<a href="javascript:;" class="numpage" data-page="${i}" islast="${last}">${i}</a>`; 181 } 182 html+='<a href="javascript:;" class="next" data-page="2" >下一页</a>'+b+c+d+f; 183 } 184 $('#'+elem).html(html); 185 $('.page-limit select').find('option[value="'+limitCount+'"]').attr('selected','selected'); 186 } 187 function getDomByAttr(arr,key,value){ 188 var dom=''; 189 for(var i=0;i<arr.length;i++){ 190 if(arr[i].getAttribute(key) == value){ 191 dom=(arr[i]); 192 break; 193 } 194 } 195 return dom; 196 } 197 var initConfig=function(ele,options){ 198 var initDom=ele; 199 var options=options===undefined?{}:options; 200 var count=options.count===undefined?0:options.count; 201 var isFL=options.isFL===undefined?false:options.isFL; 202 var isCount=options.isCount===undefined?false:options.isCount; 203 var isLimit=options.isLimit===undefined?false:options.isLimit; 204 var isSkip=options.isSkip===undefined?false:options.isSkip; 205 var pageSizeList=options.pageSizeList===undefined?[10,20,30,40,50]:options.pageSizeList; 206 var limitCount=options.limitCount===undefined?pageSizeList[0]:options.limitCount; 207 var jump=options.jump===undefined?null:options.jump(options); 208 initPage(initDom,count,isFL,isCount,isLimit,isSkip,limitCount,pageSizeList); 209 $('#'+initDom).on('click','a',function(){ 210 211 //点击的做判断 212 if($(this).is('.prev')){ 213 //上一页 214 if($(this).next().is('.next')){ 215 return false; 216 } 217 if($(this).is('.disabled')){ 218 return false; 219 }else{ 220 $('.next,.last').removeClass('disabled'); 221 if($(this).attr('data-page') == 1){ 222 $('.prev,.first').addClass('disabled'); 223 } 224 var aDom=document.querySelectorAll('.numpage'); 225 var addDom=getDomByAttr(aDom,'data-page',$(this).attr('data-page')); 226 var resDom=getDomByAttr(aDom,'data-page',parseInt($(this).attr('data-page'))+1); 227 if($('.active').attr('data-page') == 1){ 228 229 return false; 230 } 231 $('.next').attr('data-page',$('.active').attr('data-page')); 232 $(resDom).removeClass('active'); 233 $(addDom).addClass('active'); 234 $('.prev').attr('data-page',parseInt($(this).attr('data-page'))-1); 235 } 236 }else if($(this).is('.next')){ 237 if($(this).prev().is('.prev')){ 238 return false; 239 } 240 //下一页 241 242 var aDom=document.querySelectorAll('.numpage'); 243 var addDom=getDomByAttr(aDom,'data-page',$(this).attr('data-page')); 244 var resDom=getDomByAttr(aDom,'data-page',parseInt($(this).attr('data-page'))-1); 245 if($('.active').attr('islast') == "true"){ 246 return false; 247 } 248 $('.prev').attr('data-page',$('.active').attr('data-page')); 249 $(resDom).removeClass('active'); 250 $(addDom).addClass('active'); 251 $('.next').attr('data-page',parseInt($(this).attr('data-page'))+1); 252 $('.prev,.first').removeClass('disabled'); 253 if($('.active').attr('islast') == 'true'){ 254 $('.next,.last').addClass('disabled'); 255 }else{ 256 $('.next,.last').removeClass('disabled'); 257 } 258 }else if($(this).is('.numpage')){ 259 //页数 260 $(this).addClass('active').siblings('.numpage').removeClass('active'); 261 $('.next').attr('data-page',parseInt($(this).attr('data-page'))+1); 262 $('.prev').attr('data-page',$(this).attr('data-page')-1); 263 264 if($(this).attr('data-page') == 2 && $(this).attr('islast') == "true"){//2页来回点 265 $('.prev,.first').removeClass('disabled'); 266 $('.next,.last').addClass('disabled'); 267 }else if($(this).attr('data-page') == 1 && $(this).attr('islast') == "false"){//2页来回点 268 $('.prev,.first').addClass('disabled'); 269 $('.next,.last').removeClass('disabled'); 270 }else if($(this).attr('data-page')>=2 && $(this).attr('islast')=="false"){//大于2页来回点 271 $('.prev,.next,.first,.last').removeClass('disabled'); 272 }else if($(this).attr('data-page')>=2 && $(this).attr('islast')=="true"){ 273 $('.prev,.first').removeClass('disabled'); 274 $('.next,.last').addClass('disabled'); 275 } 276 }else if(($('.first').is('.disabled')&&$('.prev').is('.disabled')&&$('.next').is('.disabled')&&$('.last').is('.disabled')) || $(this).is('disabled')){ 277 console.log(111) 278 return false; 279 }else if($(this).is('.last')&&!$('.last').is('.disabled')){ 280 console.log(222) 281 var aDom=document.querySelectorAll('.numpage'); 282 $('.active').removeClass('active'); 283 var lastDom=getDomByAttr(aDom,'islast','true'); 284 $(lastDom).addClass('active'); 285 $('.prev').attr('data-page',parseInt($(lastDom).attr('data-page'))-1); 286 $('.last,.next').addClass('disabled'); 287 $('.first,.prev').removeClass('disabled'); 288 }else if($(this).is('.first')&&!$('.first').is('.disabled')){ 289 console.log(333) 290 var aDom=document.querySelectorAll('.numpage'); 291 $('.active').removeClass('active'); 292 var firstDom=getDomByAttr(aDom,'data-page','1'); 293 $(firstDom).addClass('active'); 294 $('.prev').attr('data-page',1); 295 $('.next').attr('data-page',2); 296 $('.last,.next').removeClass('disabled'); 297 $('.first,.prev').addClass('disabled'); 298 } 299 //显示页数同步 300 $('.page-input').val($('.active').attr('data-page')); 301 options.jump(options); 302 }) 303 //跳转指定页数 304 $('#'+initDom).on('click','.page-btn',function(){ 305 306 var aDom=document.querySelectorAll('.numpage'); 307 var addDom=getDomByAttr(aDom,'data-page',$('.page-input').val()); 308 var lastDom=getDomByAttr(aDom,'islast','true'); 309 if($('.page-input').val()<=$(lastDom).html()&&$('.page-input').val()>0){ 310 311 $('.active').removeClass('active'); 312 $(addDom).addClass('active'); 313 if($('.active').html()==1){ 314 $('.first,.prev').addClass('disabled'); 315 $('.last,.next').removeClass('disabled'); 316 }else if($('.active').html()==$(lastDom).html()){ 317 $('.first,.prev').removeClass('disabled'); 318 $('.last,.next').addClass('disabled'); 319 }else{ 320 $('.first,.prev,.last,.next').removeClass('disabled'); 321 } 322 $('.prev').attr('data-page',parseInt($('.active').html())-1); 323 $('.next').attr('data-page',parseInt($('.active').html())+1); 324 } 325 options.jump(options); 326 }) 327 //每页限制条数 328 $('#'+initDom).on('change','select',function(){ 329 initPage(initDom,count,isFL,isCount,isLimit,isSkip,$(this).val(),pageSizeList); 330 // console.warn('[警告] '); 331 options.jump(options); 332 }) 333 } 334 initConfig('page',{ 335 count:31, 336 isFL:true, 337 isCount:true, 338 isLimit:true, 339 isSkip:true, 340 pageSizeList:[5,10,15,20,25], 341 jump:function(obj){ 342 console.log(obj) 343 } 344 }) 345 346 </script> 347 </html>
一个老师的原生js分页:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>分页</title> 6 </head> 7 <style> 8 a{margin:0 5px;} 9 </style> 10 <body> 11 <div id="div1"></div> 12 </body> 13 <script> 14 page({ 15 id:'div1', 16 nowNum:4, 17 allNum:10, 18 callback:function(now,all){ 19 alert('当前页'+now+'总共页'+all) 20 } 21 }) 22 function page(opt){ 23 if(!opt.id){return false} 24 var obj=document.getElementById(opt.id); 25 var nowNum=opt.nowNum || 1; 26 var allNum=opt.allNum || 5; 27 var callback=opt.callback || function(){}; 28 if( nowNum >= 4 && allNum >=6){ 29 var oA=document.createElement('a'); 30 oA.href='#'+1; 31 oA.innerHTML='首页'; 32 obj.appendChild(oA); 33 } 34 if(nowNum >= 2){ 35 var oA=document.createElement('a'); 36 oA.href='#'+(nowNum -1); 37 oA.innerHTML='上一页'; 38 obj.appendChild(oA); 39 } 40 if(allNum<=5){ 41 for(var i=0;i<=allNum;i++){ 42 var oA=document.createElement('a'); 43 oA.href='#'+i; 44 if(nowNum == i ){ 45 oA.innerHTML=i; 46 }else{ 47 oA.innerHTML='['+i+']'; 48 } 49 obj.appendChild(oA); 50 } 51 }else{ 52 for(var i=1;i<=5;i++){ 53 var oA=document.createElement('a'); 54 if(nowNum == 1 || nowNum == 2){ 55 oA.href='#'+i; 56 if(nowNum == i){ 57 oA.innerHTML=i; 58 }else{ 59 60 oA.innerHTML='['+i+']'; 61 } 62 }else if((allNum - nowNum) == 0 || (allNum - nowNum) == 1){ 63 oA.href='#'+ (allNum - 5 + i); 64 if((allNum - nowNum) == 0 && i==5){ 65 oA.innerHTML=(allNum - 5 + i); 66 }else if((allNum - nowNum) == 1 && i==4){ 67 oA.innerHTML=(allNum - 5 + i); 68 }else{ 69 70 oA.innerHTML='['+(allNum - 5 + i)+']'; 71 } 72 }else{ 73 oA.href='#'+(nowNum - 3 + i); 74 if(i == 3){ 75 oA.innerHTML=nowNum - 3 + i; 76 }else{ 77 78 oA.innerHTML='['+(nowNum - 3 + i)+']'; 79 } 80 } 81 obj.appendChild(oA); 82 } 83 } 84 if((allNum - nowNum) >=1 ){ 85 var oA=document.createElement('a'); 86 oA.href='#'+(nowNum + 1); 87 oA.innerHTML='下一页'; 88 obj.appendChild(oA); 89 } 90 if((allNum - nowNum) >=3 && allNum >= 6){ 91 var oA=document.createElement('a'); 92 oA.href='#'+allNum; 93 oA.innerHTML='尾页'; 94 obj.appendChild(oA); 95 } 96 callback(nowNum,allNum); 97 var aA=obj.getElementsByTagName('a'); 98 for(var i=0;i<aA.length;i++){ 99 aA[i].onclick=function(){ 100 var nowNum = parseInt(this.getAttribute('href').substring(1)); 101 obj.innerHTML=''; 102 page({ 103 id:opt.id, 104 nowNum:nowNum, 105 allNum:allNum, 106 callback:callback 107 }) 108 return false; 109 } 110 } 111 } 112 </script> 113 </html>
加点样式的分页:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>分页</title> 6 </head> 7 <style> 8 a{ 9 padding:5px 10px; 10 text-decoration: none; 11 border:1px solid #313c42; 12 margin-left: -1px; 13 color: #000; 14 15 } 16 .active{ 17 background: #18c752; 18 color: #fff; 19 } 20 </style> 21 <body> 22 <div id="div1"></div> 23 </body> 24 <script> 25 page({ 26 id:'div1', 27 nowNum:4, 28 allNum:10, 29 callback:function(now,all){ 30 console.log('当前页'+now+'总共页'+all) 31 } 32 }) 33 function page(opt){ 34 if(!opt.id){return false} 35 var obj=document.getElementById(opt.id); 36 var nowNum=opt.nowNum || 1; 37 var allNum=opt.allNum || 5; 38 var callback=opt.callback || function(){}; 39 if( nowNum >= 4 && allNum >=6){ 40 var oA=document.createElement('a'); 41 oA.href='#'+1; 42 oA.innerHTML='首页'; 43 obj.appendChild(oA); 44 } 45 if(nowNum >= 2){ 46 var oA=document.createElement('a'); 47 oA.href='#'+(nowNum -1); 48 oA.innerHTML='上一页'; 49 obj.appendChild(oA); 50 } 51 if(allNum<=5){ 52 for(var i=0;i<=allNum;i++){ 53 var oA=document.createElement('a'); 54 oA.href='#'+i; 55 if(nowNum == i ){ 56 oA.innerHTML=i; 57 oA.className='active'; 58 }else{ 59 oA.innerHTML=i; 60 } 61 obj.appendChild(oA); 62 } 63 }else{ 64 for(var i=1;i<=5;i++){ 65 var oA=document.createElement('a'); 66 if(nowNum == 1 || nowNum == 2){ 67 oA.href='#'+i; 68 if(nowNum == i){ 69 oA.innerHTML=i; 70 oA.className='active'; 71 }else{ 72 73 oA.innerHTML=i; 74 } 75 }else if((allNum - nowNum) == 0 || (allNum - nowNum) == 1){ 76 oA.href='#'+ (allNum - 5 + i); 77 if((allNum - nowNum) == 0 && i==5){ 78 oA.innerHTML=(allNum - 5 + i); 79 oA.className='active'; 80 }else if((allNum - nowNum) == 1 && i==4){ 81 oA.innerHTML=(allNum - 5 + i); 82 oA.className='active'; 83 }else{ 84 85 oA.innerHTML=(allNum - 5 + i); 86 } 87 }else{ 88 oA.href='#'+(nowNum - 3 + i); 89 if(i == 3){ 90 oA.innerHTML=nowNum - 3 + i; 91 oA.className='active'; 92 }else{ 93 94 oA.innerHTML=(nowNum - 3 + i); 95 } 96 } 97 obj.appendChild(oA); 98 } 99 } 100 if((allNum - nowNum) >=1 ){ 101 var oA=document.createElement('a'); 102 oA.href='#'+(nowNum + 1); 103 oA.innerHTML='下一页'; 104 obj.appendChild(oA); 105 } 106 if((allNum - nowNum) >=3 && allNum >= 6){ 107 var oA=document.createElement('a'); 108 oA.href='#'+allNum; 109 oA.innerHTML='尾页'; 110 obj.appendChild(oA); 111 } 112 callback(nowNum,allNum); 113 var aA=obj.getElementsByTagName('a'); 114 for(var i=0,len=aA.length;i<len;i++){ 115 aA[i].onclick=function(){ 116 var nowNum = parseInt(this.getAttribute('href').substring(1)); 117 obj.innerHTML=''; 118 page({ 119 id:opt.id, 120 nowNum:nowNum, 121 allNum:allNum, 122 callback:callback 123 }) 124 return false; 125 } 126 } 127 } 128 </script> 129 </html>