本文实例讲述了纯JavaScript实现的分页插件。分享给大家供大家参考。具体如下：

//总条数(必填)var Num=Number(<?php echo $count;?>)//当前页(必填)var index = Number(<?php echo $page;?>);var pageNum=Number(10); 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 += "&nbsp;&nbsp;<span style='color:#4169E1;' >...</span>&nbsp;&nbsp;"; } var i=1; for(i=first;i<=last; i++){ if(i==index){ str += "&nbsp;&nbsp;<a href='#' style='color:#4169E1;' onclick='submit(" + i + ");'>[" + i+ "]</a>&nbsp;&nbsp;"; }else{ str += "&nbsp;&nbsp;<a href='#' onclick='submit(" + i + ");'>" + i+ "</a>&nbsp;&nbsp;"; } } if(last<count){ str += "&nbsp;&nbsp;<span style='font-size:16px;color:#4169E1;' >...</span>&nbsp;&nbsp;"; } str+="</td><td style='font-size: 14px;'>共<a href='#first' style='color:#4169E1;font-size: 16px;' >"+ Num +"</a>条</td>"; if(index!=1&&count>1){ str += "<td style='width:40px;font-family: 微软雅黑;font-size: 14px;white-space: nowrap;'>&nbsp;&nbsp;<a href='#' id='first' name='first' onclick='submit(1);'>首页</a>&nbsp;&nbsp;</td>"; } if(index!=count&&count>1&&index<count){ str += "<td style='width:40px;font-family: 微软雅黑;font-size: 14px;white-space: nowrap;'>&nbsp;&nbsp;<a href='#' onclick='submit(" + count+ ");'>尾页</a>&nbsp;&nbsp;</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程序设计有所帮助。