简单分页

标签：分页

分页对象

pageDto:

package nnnmc.auditor.datacenter.dto;

public class PageDTO {

	/**
     * 总记录数
     */
	private int itemCount;
	/**
	 * 当前页码
	 */
    private int pageCurrent = 1;
    /**
     * 每页显示记录数
     */
    private int pageSize = 10;
    /**
     * 总页数
     */
    private int pageCount;
    /**
     * 是否首页
     */
    private boolean hasPre;
    /**
     * 是否尾页
     */
    private boolean hasNext;
    
    public PageDTO(int itemCount, int pageCurrent, int pageSize) {
        this.itemCount = itemCount;
        this.pageSize = pageSize;
        this.pageCount=(itemCount % pageSize == 0) ? itemCount/pageSize :itemCount/pageSize+1;
        this.pageCurrent=pageCurrent>pageCount?pageCount:pageCurrent;
        this.hasPre=pageCurrent>1;
        this.hasNext=pageCurrent<pageCount;
    }
    
    public PageDTO() {
		super();
	}

	public int getItemCount() {
        return this.itemCount;
    }
    
    public int getPageCurrent(){
    	return this.pageCurrent;
    }
    
    public int getPageSize() {
        return this.pageSize;
    }
    
    public int getPageCount() {
    	return this.pageCount;
    }
    
    public boolean getHasPre(){
    	return this.hasPre;
    }
    
    public boolean getHasNext(){
    	return this.hasNext;
    }
    
    public void setItemCount(int itemCount) {
		this.itemCount = itemCount;
	}

	public void setPageCurrent(int pageCurrent) {
		this.pageCurrent = pageCurrent == 0?1:pageCurrent;
	}

	public void setPageSize(int pageSize) {
		this.pageSize = pageSize < 1 ? 10:pageSize;
	}

	public void setPageCount() {
		this.pageCount = this.itemCount % this.pageSize == 0 ? this.itemCount/this.pageSize :this.itemCount/this.pageSize+1;
	}


	public void setHasPre() {
		this.hasPre=this.pageCurrent>1;
	}


	public void setHasNext() {
		this.hasNext=this.pageCurrent<this.pageCount;
	}

	@Override
	public String toString() {
		return "PageDTO [itemCount=" + itemCount + ", pageCurrent="
				+ pageCurrent + ", pageSize=" + pageSize + ", pageCount="
				+ pageCount + ", hasPre=" + hasPre + ", hasNext=" + hasNext
				+ "]";
	}

	
}

CSS:

@CHARSET "UTF-8";

.pagination {
    float: right;
    padding: 5px;
}

.pagination span.disabled {
    border: 1px solid #eee;
    color: #ddd;
    margin: 2px;
    padding: 2px 5px;
}
.pagination span.current {
    background-color: #006699;
    border: 1px solid #006699;
    color: #fff;
    font-weight: bold;
    margin: 2px;
    padding: 2px 5px;
}
.pagination a, .pagination a:link, .pagination a:visited {
    border: 1px solid #aaaadd;
    color: #006699;
    margin: 2px;
    padding: 2px 5px;
    text-decoration: none;
    cursor: pointer;
}
.pagination a:hover, .pagination a:active {
    border: 1px solid #006699;
    color: #000;
    text-decoration: none;
}
div#content {
    text-align: left;
}

JS:

1，第一种：分页元素（即点击的其它页，如上一页之类的）直接onclick执行一个方法；

	//显示分页
	function showPage(pageObj){
		var pagehtml="";
		if(pageObj.hasPre){
			pagehtml+="<a class=‘href_page‘  onclick=‘pageRequest("+eval(pageObj.pageCurrent-1)+")‘> 上一页</a>";
		}else{
			pagehtml+="<span class=‘disabled prev_page‘> 上一页</span>";
		}
		
		//如果小于10页
		if(pageObj.pageCount<=10){
			for(var i=1;i<=pageObj.pageCount;i++){
				if(i==pageObj.pageCurrent){
					pagehtml+="<span class=‘current‘>"+i+"</span>";
				}else{
					pagehtml+="<a class=‘href_page‘ onclick=‘pageRequest("+i+")‘>"+i+"</a>";
				}
			}
		}
		
		//大于10页
		if(pageObj.pageCount>10){
			if(pageObj.pageCurrent<6){
				for(var i=1;i<=pageObj.pageCurrent+1;i++){
					if(i==pageObj.pageCurrent){
						pagehtml+="<span class=‘current‘>"+i+"</span>";
					}else{
						pagehtml+="<a class=‘href_page‘ onclick=‘pageRequest("+i+")‘>"+i+"</a>";
					}
				}
				pagehtml+="<span class=‘gap‘>…</span>";
				pagehtml+="<a class=‘href_page‘  onclick=‘pageRequest("+eval(pageObj.pageCount-1)+")‘>"+eval(pageObj.pageCount-1)+"</a>";
				pagehtml+="<a class=‘href_page‘  onclick=‘pageRequest("+pageObj.pageCount+")‘>"+pageObj.pageCount+"</a>";
			}
			if(pageObj.pageCurrent>5&&pageObj.pageCurrent<pageObj.pageCount-5){
				pagehtml+="<a class=‘href_page‘ onclick=‘pageRequest(1)‘>"+1+"</a>";
				pagehtml+="<a class=‘href_page‘  onclick=‘pageRequest(2)‘>"+2+"</a>";
				pagehtml+="<span class=‘gap‘>…</span>";
				pagehtml+="<a class=‘href_page‘  onclick=‘pageRequest("+eval(pageObj.pageCurrent-1)+")‘>"+eval(pageObj.pageCurrent-1)+"</a>";
				pagehtml+="<span class=‘current‘>"+pageObj.pageCurrent+"</span>";
				pagehtml+="<a class=‘href_page‘  onclick=‘pageRequest("+eval(pageObj.pageCurrent+1)+")‘>"+eval(pageObj.pageCurrent+1)+"</a>";
				pagehtml+="<span class=‘gap‘>…</span>";
				pagehtml+="<a class=‘href_page‘  onclick=‘pageRequest("+eval(pageObj.pageCount-1)+")‘>"+eval(pageObj.pageCount-1)+"</a>";
				pagehtml+="<a class=‘href_page‘  onclick=‘pageRequest("+pageObj.pageCount+")‘>"+pageObj.pageCount+"</a>";
			}
			if(pageObj.pageCurrent>pageObj.pageCount-6){
				pagehtml+="<a class=‘href_page‘ item=‘1‘  onclick=‘pageRequest(1)‘>"+1+"</a>";
				pagehtml+="<a class=‘href_page‘ item=‘2‘  onclick=‘pageRequest(2)‘>"+2+"</a>";
				pagehtml+="<span class=‘gap‘>…</span>";
				for(var i=pageObj.pageCurrent-1;i<=pageObj.pageCount;i++){
					if(i==pageObj.pageCurrent){
						pagehtml+="<span class=‘current‘>"+i+"</span>";
					}else{
						pagehtml+="<a class=‘href_page‘  onclick=‘pageRequest("+i+")‘>"+i+"</a>";
					}
				}
			}
		}
		
		if(pageObj.hasNext){
			pagehtml+="<a class=‘next_page‘  onclick=‘pageRequest("+eval(pageObj.pageCurrent+1)+")‘>下一页 </a>";
		}else{
			pagehtml+="<span class=‘disabled next_page‘>下一页 </span>";
		}
		return pagehtml;
	}
	
	//点击分页页码执行函数，n表示点击的页码数（需要跳转的页码）
	//将这个函数复制到所在网页中完善功能
	//	function pageRequest(n){
	//		console.log("pageRequert:"+n);
	//	}

2，第二种：为每个元素绑定onclick监听事件，去执行一个方法；

$(function(){
        //快速搜索分页
	$("#quick_search_page").on("click","a",function(){
		var currpage = $(this).attr("item");
		console.log("session_page a:"+currpage)
		quickSearch(currpage);
	}); 
}

	//显示分页
	function showPage(pageObj){
		var pagehtml="";
		if(pageObj.hasPre){
			pagehtml+="<a class=‘href_page‘  item=‘"+eval(pageObj.pageCurrent-1)+"‘> 上一页</a>";
		}else{
			pagehtml+="<span class=‘disabled prev_page‘> 上一页</span>";
		}
		
		//如果小于10页
		if(pageObj.pageCount<=10){
			for(var i=1;i<=pageObj.pageCount;i++){
				if(i==pageObj.pageCurrent){
					pagehtml+="<span class=‘current‘>"+i+"</span>";
				}else{
					pagehtml+="<a class=‘href_page‘ item=‘"+i+"‘>"+i+"</a>";
				}
			}
		}
		
		//大于10页
		if(pageObj.pageCount>10){
			if(pageObj.pageCurrent<6){
				for(var i=1;i<=pageObj.pageCurrent+1;i++){
					if(i==pageObj.pageCurrent){
						pagehtml+="<span class=‘current‘>"+i+"</span>";
					}else{
						pagehtml+="<a class=‘href_page‘ item=‘"+i+"‘>"+i+"</a>";
					}
				}
				pagehtml+="<span class=‘gap‘>…</span>";
				pagehtml+="<a class=‘href_page‘  item=‘"+eval(pageObj.pageCount-1)+"‘>"+eval(pageObj.pageCount-1)+"</a>";
				pagehtml+="<a class=‘href_page‘  item=‘"+pageObj.pageCount+"‘>"+pageObj.pageCount+"</a>";
			}
			if(pageObj.pageCurrent>5&&pageObj.pageCurrent<pageObj.pageCount-5){
				pagehtml+="<a class=‘href_page‘ item=‘1‘>"+1+"</a>";
				pagehtml+="<a class=‘href_page‘  item=‘2‘>"+2+"</a>";
				pagehtml+="<span class=‘gap‘>…</span>";
				pagehtml+="<a class=‘href_page‘  item=‘"+eval(pageObj.pageCurrent-1)+"‘>"+eval(pageObj.pageCurrent-1)+"</a>";
				pagehtml+="<span class=‘current‘>"+pageObj.pageCurrent+"</span>";
				pagehtml+="<a class=‘href_page‘  item=‘"+eval(pageObj.pageCurrent+1)+"‘>"+eval(pageObj.pageCurrent+1)+"</a>";
				pagehtml+="<span class=‘gap‘>…</span>";
				pagehtml+="<a class=‘href_page‘  item=‘"+eval(pageObj.pageCount-1)+"‘>"+eval(pageObj.pageCount-1)+"</a>";
				pagehtml+="<a class=‘href_page‘  item=‘"+pageObj.pageCount+"‘>"+pageObj.pageCount+"</a>";
			}
			if(pageObj.pageCurrent>pageObj.pageCount-6){
				pagehtml+="<a class=‘href_page‘ item=‘1‘ >"+1+"</a>";
				pagehtml+="<a class=‘href_page‘ item=‘2‘ >"+2+"</a>";
				pagehtml+="<span class=‘gap‘>…</span>";
				for(var i=pageObj.pageCurrent-1;i<=pageObj.pageCount;i++){
					if(i==pageObj.pageCurrent){
						pagehtml+="<span class=‘current‘>"+i+"</span>";
					}else{
						pagehtml+="<a class=‘href_page‘  item=‘"+i+"‘>"+i+"</a>";
					}
				}
			}
		}
		
		if(pageObj.hasNext){
			pagehtml+="<a class=‘next_page‘  item=‘"+eval(pageObj.pageCurrent+1)+"‘>下一页 </a>";
		}else{
			pagehtml+="<span class=‘disabled next_page‘>下一页 </span>";
		}
		return pagehtml;
	}
	
	function quickSearch(n){
	    $("#quick_search_page").empty();
	    $("#quick_search_page").append(pagehtml);
	}

html:

<!-- 分页 -->
<div class="pagination" id="quick_search_page"></div>

本文出自 “东方小阁” 博客，谢绝转载！

简单分页

标签：分页

原文地址：http://lailai.blog.51cto.com/3362373/1692835