类似百度搜索后分页的实现

最新推荐文章于 2024-01-26 14:48:27 发布

Cter12138

最新推荐文章于 2024-01-26 14:48:27 发布

阅读量948

点赞数

文章标签： javascript 分页

本文链接：https://blog.youkuaiyun.com/qq794096244/article/details/47285465

版权

本文介绍如何使用JavaScript实现类似百度搜索后的分页功能。每页显示10条数据，最多显示5页。当超过5页时，仅显示2到6页的编号，第一页不再显示。每次从服务器获取10条新数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

百度搜索出数据之后，底下出现的页面标识的类似实现

我这个是设置为一页显示10条，最多显示5页，是之前参考过一些网上的例子之后改写的。

function paping (pg_num){
            	
            	var maxPageCount = 5;//最大显示页数
            	var pageCount = ${pages};//总页数，由服务器端进行计算，传回
            	// 如果当前页数大于总页数，则设置当前页数等于总页数
            	if(pg_num >= pageCount){
            		pg_num = pageCount;
            		
            	}
            	var option = "";
            	var pageNow = (pg_num-1>1?pg_num-1:1);
            	//alert(pageNow);
                var root = "<%=request.getContextPath()%>";
            /* 	option+="<li><a href='"+root+"'>下一页</a></li>";
            	alert(option); */
            option+="<li> <a href='" +root+"/merchant/queryAllMerchantList.action?page="+pageNow+"'> 上一页</a></li>" ;
            	
            	if(pageCount<maxPageCount+1){
            		for(var i=1;i<pageCount+1;i++){
            			if(i==pg_num){
            				option+="<li><a>"+i+"</a></li>"
            			}else{
            				option+="<li> <a href='" +root+"/merchant/queryAllMerchantList.action?page="+i+"'>"+i+"</a></li>";
            			}
            			
            		}
            		
                	
           option+="<li> <a href='" +root+"/merchant/queryAllMerchantList.action?page="+(pg_num+1<pageCount?pg_num+1:pageCount)+"'> 下一页</a></li>"	;
            	}else{
            		var begin=0;
            		var end=0;
            		if(pg_num-2>0){
            			/*限制每次最多展示5页*/
            			begin = pg_num-2;
            			end =pg_num+2;
            			if(pg_num>=pageCount-2){
            				 begin=pageCount-maxPageCount+1;
    						 end=pageCount;
            			}
            			for(var i=begin;i<end;i++){
            				if(i==pg_num){
                				option+="<li><a>"+i+"</a></li>"
                			}else{
                				option+="<li> <a href='" +root+"/merchant/queryAllMerchantList.action?page="+i+"'>"+i+"</a></li>"; 
                			}
            			}
            			 option+="<li> <a href='" +root+"/merchant/queryAllMerchantList.action?page="+(pg_num+1<end?pg_num+1:end)+"'> 下一页</a></li>";
            		}else{
            			for(var i=1;i<maxPageCount+1;i++){
            				if(i==pg_num){
                				option+="<li><a>"+i+"</a></li>"
                			}else{
                				option+="<li> <a href='" +root+"/merchant/queryAllMerchantList.action?page="+i+"'>"+i+"</a></li>";
                			}
            			}
            			
            		}
            	option+="<li> <a href='" +root+"/merchant/queryAllMerchantList.action?page="+(pg_num+1<pageCount?pg_num+1:pageCount)+"'> 下一页</a></li>";
            	}
            		
            	return option;
             
    }

效果如下

当超过5页，出现第六页时，就会显示23456，第一页则不会再显示。这里每次只从服务器取10条数据。