本文实例讲述了纯JavaScript实现的分页插件。分享给大家供大家参考。具体如下:
//总条数(必填) var Num=Number(<?php echo $count;?>) //当前页(必填) var index = Number(<?php echo $page;?>); /* //每页的条数(可选,默认每页10条) */ var pageNum=Number(10); /* //最大显示的页码的数目(可选,默认显示5个页码,页码数目必须大于等于1) */ var maxPageNum=Number(5); //以下可忽略 //计算得出总页数 var count = (Num%pageNum)>0?(Num/pageNum+1):(Num/pageNum); count=Math.floor(count);//取整转化为数据类型 //显示的最小页码, var first=1; //显示的最大页码,首先last<=count;其次last是小于等于count的最大数//last=index+maxPageNum/2; var last =1; var decrease=Math.floor(maxPageNum/2);//当前页向上增加值 var increase=Math.floor(maxPageNum/2);//当前页向下减少值 if(maxPageNum>=1){ if(maxPageNum==1){//最多显示一页时 first=index<=count?index:count; last=index<=count?index:count; }else{ //first要大于零 first=(index-decrease); while(first<=0){ first++; } //first判断显示的最后一页 if((count-index)<=decrease){ var diff=count-first; while(diff<maxPageNum-1){ if(first==1){ break; }else{ --first; diff=count-first; } } } //last要小于count last=(index+increase); while(last>=1){ if(last<=count){ break; } last--; } //last//判断显示的最后一页与maxPageNum的关系 last=last>=maxPageNum?last:(maxPageNum>count?count:maxPageNum); } }else{ alert(\"至少需要显示一个页码!\"); } var prev = index - 1;//上一页 var next = index+ 1;//下一页 var str = \"<tr>\"; if(count==0){ str += \"<td>共<a href=\'#\'>0</a>页</td><td>\"; }else if(index>count||index<=0){ str=\"<td style=\'color:blue;\' >页码超出范围</td>\"; }else if (count > 0) { str += \"<td>\"; if(first>1){ str += \" <span style=\'color:#4169E1;\' >...</span> \"; } var i=1; for(i=first;i<=last; i++){ if(i==index){ str += \" <a href=\'#\' style=\'color:#4169E1;\' onclick=\'submit(\" + i + \");\'>[\" + i+ \"]</a> \"; }else{ str += \" <a href=\'#\' onclick=\'submit(\" + i + \");\'>\" + i+ \"</a> \"; } } if(last<count){ str += \" <span style=\'font-size:16px;color:#4169E1;\' >...</span> \"; } str+=\"</td><td style=\'font-size: 14px;\'>共<a href=\'#first\' style=\'color:#4169E1;font-size: 16px;\' >\"+ Num +\"</a>条</td>\"; /* if(index!=1){ str +=\"<td style=\'width:60px;font-family: 微软雅黑;font-size: 14px;\' ><a href=\'#\' id=\'prev\' onclick=\'submit(\" + prev+ \");\'>上一页</a></td>\"; } if(index<count){ str +=\"<td style=\'width:60px;font-family: 微软雅黑;font-size: 14px;\'><a href=\'#\' id=\'next\' onclick=\'submit(\"+ next + \");\'>下一页</a></td>\"; }*/ if(index!=1&&count>1){ str += \"<td style=\'width:40px;font-family: 微软雅黑;font-size: 14px;white-space: nowrap;\'> <a href=\'#\' id=\'first\' name=\'first\' onclick=\'submit(1);\'>首页</a> </td>\"; } if(index!=count&&count>1&&index<count){ str += \"<td style=\'width:40px;font-family: 微软雅黑;font-size: 14px;white-space: nowrap;\'> <a href=\'#\' onclick=\'submit(\" + count+ \");\'>尾页</a> </td>\" ; } str+=\"</tr>\"; } //分页区域填写 $(\'.page\').html(str); <table class=\"page\"> <tr><td>此处分页只需要传递给我当前页码和总页数即可</td></tr> </table> //根据页码查询, function submit(pageIndex) { //var sortInfo = $.getUrlParam(\'sortInfo\');//判断是哪一个页面的查询 var url = \"<?php echo current_url();?>?page=\"+pageIndex+\"&field=<?php echo$field;?>&value=<?php echo $field_value;?>\"; window.location.href=url; }
希望本文所述对大家的javascript程序设计有所帮助。
本文地址:https://www.stayed.cn/item/3297
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我