Jquery仿百度分页，无其他插件实现

实现方式

采用jquery手写分页组件，实现页面显示的页码数量固定，并且当前页在中间显示。

这里只放前端jquery代码，后端数据就不放了。

实现代码

	/**
从后台传来的数据包括：当前页数、总页数、等等
下面代码实现的效果就是：根据总页数进行判断，如果总页数小于五个 则加载所有页，大于5页的话就加载当前页码的前2页和后2页，当前页码在中间显示。以下代码的思路很重要，可以忽略onclick事件和a标签 这些都是根据业务 需求进行改变的。

*/


				var dqPage = res.currentPage;//得到当前页数
			    dqPage = parseInt(dqPage);//得到的文本转成int
			    var pageCount = res.totalPage;//得到总页数
			    pageCount = parseInt(pageCount);
			    var i = 1;
			    i = parseInt(i);
			    var item="";
			    if (pageCount <= 5 ) {//总页数小于五页，则加载所有页
			        for (i; i <= pageCount; i++) {
			        	//前一页li显示
			        	if(i==1){
			        		if(dqPage==1){
			        			item+="<li class='disabled'><a href='javascript:;' aria-label='Previous'><span aria-hidden='true'>&laquo;</span></a></li>";
			        		}else{
			        			item+="<li><a href='javascript:;' aria-label='Previous' onclick='pageToActionService("+(dqPage-2)+")'><span aria-hidden='true'>&laquo;</span></a></li>";
			        		}
			        	}
			            if (i == dqPage) {
			                item += "<li><a href='javascript:;' style='color: black;'>"+i+"</a></li>"; 
			            }else{
//			                item += "<a href='"+href+i+"' >"+i+"</a>";
			            	item += "<li><a href='javascript:;' onclick='pageToActionService("+(i-1)+")'>"+i+"</a></li>";
			            }
			          //后一页li显示
			            if(i==pageCount){
			            	if(dqPage==pageCount){
			            		item +="<li class='disabled'><a href='javascript:;' aria-label='Next'><span aria-hidden='true'>&raquo;</span></a></li>"; 
			            	}else{
			            		item +="<li><a href='javascript:;' aria-label='Next' onclick='pageToActionService("+(dqPage)+")'><span aria-hidden='true'>&raquo;</span></a></li>";
			            	}
			            }
			        };
			        $('#pageBtn').html(item);
			        return;
			    }else if (pageCount > 5) {//总页数大于五页，则加载五页
			        if (dqPage <= 3) {//当前页 小于等于3，加载1-5页
			            for (i; i <= 5; i++) {
			            	//前一页显示
			            	if(i==1){
				        		if(dqPage==1){
				        			item+="<li class='disabled'><a href='javascript:;' aria-label='Previous'><span aria-hidden='true'>&laquo;</span></a></li>";
				        		}else{
				        			item+="<li><a href='javascript:;' aria-label='Previous' onclick='pageToActionService("+(dqPage-2)+")'><span aria-hidden='true'>&laquo;</span></a></li>";
				        		}
				        	}
			                if (i == dqPage) {
			                    item += "<li><a href='javascript:;' style='color: black;'>"+i+"</a></li>"; 
			                }else{
			                    item += "<li><a href='javascript:;' onclick='pageToActionService("+(i-1)+")'>"+i+"</a></li>"; 
			                }
			                //后一页显示
			                if(i==5){
			                		if(dqPage==5){
			                			item +="<li class='disabled'><a href='javascript:;' aria-label='Next'><span aria-hidden='true'>&raquo;</span></a></li>";
			                		}else{
			                			item +="<li><a href='javascript:;' aria-label='Next' onclick='pageToActionService("+(dqPage)+")'><span aria-hidden='true'>&raquo;</span></a></li>";
			                		}
				            }
			                
			                
			            };
			            $('#pageBtn').html(item);
			            return;
			        }else if (dqPage > 3) {//当前页大于3页
			        	//当前页>=总页码-2时 显示 最后5页
			        	if(dqPage>=pageCount-2){
			        		for(i=pageCount-4;i<=pageCount;i++){
			        			//前一页显示
			        			if(i==pageCount-4){
					        			item+="<li><a href='javascript:;' aria-label='Previous' onclick='pageToActionService("+(dqPage-2)+")'><span aria-hidden='true'>&laquo;</span></a></li>";
					        	}
			        			if(i==dqPage){
			        				item +="<li><a href='javascript:;' style='color: black;'>"+i+"</a></li>";
			        			}else{
			        				item +="<li><a href='javascript:;' onclick='pageToActionService("+(i-1)+")'>"+i+"</a></li>";
			        			}
			        			//后一页显示
			        			if(i==pageCount){
			        				if(dqPage==pageCount){
			        					item +="<li class='disabled'><a href='javascript:;' aria-label='Next'><span aria-hidden='true'>&raquo;</span></a></li>";
			        				}else{
			        					item +="<li><a href='javascript:;' aria-label='Next' onclick='pageToActionService("+(dqPage)+")'><span aria-hidden='true'>&raquo;</span></a></li>";
			        				}
					            }
			        		}
			        	}else{
			        		//大于3 总页码大于当前页的+2
				        	for(i=dqPage-2;i<=dqPage+2;i++){
				        		//前一页显示
				        		if(i==dqPage-2){
				        			item+="<li><a href='javascript:;' aria-label='Previous' onclick='pageToActionService("+(dqPage-2)+")'><span aria-hidden='true'>&laquo;</span></a></li>";
				        		}	
			        			if(i==dqPage){
			        				item +="<li><a href='javascript:;' style='color: black;'>"+i+"</a></li>";
			        			}else{
			        				item +="<li><a href='javascript:;' onclick='pageToActionService("+(i-1)+")'>"+i+"</a></li>";
			        			}
			        			//后一页显示
			        			if(i==dqPage+2){
					            		item +="<li ><a href='javascript:;' aria-label='Next' onclick='pageToActionService("+(dqPage)+")'><span aria-hidden='true'>&raquo;</span></a></li>"; 
					            }
			        			
			        		}
			        	}
			            $('#pageBtn').html(item);
			            return;
			        }
			    }

实现效果

效果如图所示：

如果总页码小与5页 效果如下：