簡單分頁

原創 小易萊萊 2018-09-12 05:01

分頁對象

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;
        if(this.pageCurrent<1){
        	this.pageCurrent=1;
        }
        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>




發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Django-自定義分頁

jedi911 2019-02-23 00:42:19

jsp分頁總結

624126837 2019-02-23 00:32:15

MySQL存儲過程

sukunwu 2019-02-23 00:29:13

JS對數據分頁的封裝方法

rqlipeng 2019-02-22 23:54:03

使用GridView自帶分頁的代碼

adai6666 2019-02-22 23:39:28

thinkphp 分頁中間省略號實現【親測好使】

pansw113 2019-02-22 23:13:00

筆記--分頁樣式修改之後

mydeardream 2019-02-22 22:36:56

分頁問題

zhiyuan_ 2019-02-22 22:27:42

配置數據源和分頁

zhiyuan_ 2019-02-22 22:27:36

SpingBoot-Thymeleaf-bootstrapTable-分頁之Service

douruanliang 2019-02-22 21:45:07

各個數據庫的分頁算法

commonPeople 2019-02-22 21:37:08

高效的MySQL分頁

liumingzhij26 2019-02-22 21:35:50

Django 分頁

bigbeatwu 2019-02-22 20:58:36

word分節符與分頁符的區別與用法

52PiggySky 2019-02-22 20:43:11

簡單分頁

小易萊萊 2019-02-22 20:34:22