分页技术实现与优化
本文详细介绍了分页技术的设计思路、实现方式及其优化方法，包括如何根据总条数、当前页码、每页条数和显示页码数量计算出合适的页码范围，并通过实例代码演示了具体应用。
设计思路：
-
至少需要知道页码的显示范围从first到last，以及当前页index
-
首先确定first的值和last的值。
-
无论什么时候first>=1
-
无论任何时候1<=last<=count
-
当前页index应该在first和last的中间
-
每页显示条数为pageNum,最多显示的页码数目为maxPageNum
-
一般情况：last=index+maxPageNum/2
-
一般情况：first=index-maxPageNum/2
-
特殊情况：当index处于最后一页或者接近最后一页时
-
如上一条时。first=count(总页数)-maxPageNum-1且(第3条)，效果如下
完整代码如下：
//总条数(必填)
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;
}
上一页下一页的功能也有，只是被我屏蔽隐藏了，想要使用只需要解除屏蔽即可
使用方法及注意：
-
参数配置，前几行，如下
-
//总条数(必填) var Num=Number(<?php echo $count;?>) //当前页(必填) var index = Number(<?php echo $page;?>); /* //每页的条数(可选,默认每页10条) */ var pageNum=Number(10); /* //最大显示的页码的数目(可选，默认显示5个页码,页码数目必须大于等于1) */ var maxPageNum=Number(5); -
分页位置及html代码，如下
-
//分页区域填写 $('.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; }
OK,可以使用了
或者，另一种比较容易理清思路的方式
//分页区域填写
v
ar Pagination=function(number,index,eachpage,showpage){
var page={
TOTAL_NUM:Number(number),//数据的总条数，必填
INDEX_PAGE:Number(index),//当前页码，必填
EACH_PAGE_NUM:eachpage!=undefined?Number(eachpage):5,//每页的条数(可选,默认每页10条)
SHOW_PAGES_NUM:showpage!=undefined?Number(showpage):5,//显示的页码数目(可选，默认显示5个页码,页码数目必须大于等于1)
TOTLE_PAGE_NUM:Math.floor((number%eachpage)>0?(number/eachpage+1):(number/eachpage)),//总页数，通过上面计算得来
CREASE:Math.floor(showpage/2),//增加或者减少的变化量，
PREV:Number(index-1),//上一页
NEXT:Number(index+1)//下一页
};
var P=function(){
};
P.getByName=function(name){
return page[name];
};
return P;
};
//初始化分页
var Fy=new Pagination(100,1,10,5);
var first=1,last=1;
var Num=Number(Fy.getByName("TOTAL_NUM"));
var Mpn=Number(Fy.getByName("SHOW_PAGES_NUM"));
var count=Number(Fy.getByName("TOTLE_PAGE_NUM"));
var index=Number(Fy.getByName("INDEX_PAGE"));
var crease=Number(Fy.getByName("CREASE"));
var prev=Number(Fy.getByName("PREV"));
var next=Number(Fy.getByName("NEXT"));
//显示范围判断
if(Mpn>=1){
if(Mpn==1){//最多显示一页时
first=index<=count?index:count;
last=index<=count?index:count;
}else{
//first要大于零
first=(index-crease);
while(first<=0){
first++;
}
//first判断显示的最后一页
if((count-index)<=crease){
var diff=count-first;
while(diff<Mpn-1){
if(first==1){
break;
}else{
--first;
diff=count-first;
}
}
}
//last要小于count
last=(index+crease);
while(last>=1){
if(last<=count){
break;
}
last--;
}
//last//判断显示的最后一页与maxPageNum的关系
last=last>=Mpn?last:(Mpn>count?count:Mpn);
}
}else{
alert("至少需要显示一个页码!");
}
//组装分页代码
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>";
}
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
