分页的实现

最新推荐文章于 2025-12-16 16:02:25 发布

原创最新推荐文章于 2025-12-16 16:02:25 发布 · 139 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java #javascript #ViewUI

本文介绍了一个简单的分页导航实现方案，包括前端JavaScript判断逻辑及后端处理流程。具体实现了首页、上一页、下一页、尾页及直接跳转等功能，并通过实例代码详细展示了如何进行页面跳转判断。

js部分

/***************************************************************
* 点击 首页或上一页 时判断是否能够执行，如果已经是 首页，就提示"已经是首页！"
* 参数： nowPage: 当前的页面
* 返回： true : 还不是第一页，可以跳转到 首页
*       false: 已经是第一页，不需要跳转到 首页
*****************************************************************/
function onClickPrevPage(nowPage){
    var k_now_page = parseInt(nowPage,10);
    if( k_now_page <= 1 ){
        alert("已经是首页！");
        return false;
    }else{
        return true;
    }
}

/***************************************************************
* 点击 尾页或下一页 时判断是否能够执行，如果已经是 尾页，就提示"已经是最后一页！"
* 参数： nowPage: 当前的页面
* 参数： maxPage: 最大的页面
* 返回： true : 还不是最后一页，可以跳转到 尾页
*       false: 已经是最后一页，不需要跳转到 尾页
*****************************************************************/
function onClickNextPage(nowPage,maxPage){
    var k_now_page = parseInt(nowPage,10);
    var j_max_page = parseInt(maxPage,10);
    if(k_now_page >= j_max_page){
        alert("已经是最后一页！");
        return false;
    }else{
        return true;
    }
}

/***************************************************************
* 点击 跳转 时判断是否能够执行
* 参数： goPage: 要到的页面
* 参数： nowPage: 当前的页面
* 参数： maxPage: 最大的页面
* 返回： true : 能够执行
*       false: 不能够执行
*****************************************************************/
function onClickGoPage(goPage,nowPage,maxPage){
    if( !isPInt(goPage) ){
        alert("请输入有效的页数！");
        return false;
    }
    var i_go_page  = parseInt(goPage,10);
    var k_now_page = parseInt(nowPage,10);
    var j_max_page = parseInt(maxPage,10);

    if( i_go_page <= 0 ){
        alert("请输入有效的页数！");
        return false;
    }

    //==点击跳转
    if( i_go_page == k_now_page){
        alert("您正在浏览第 "+ i_go_page +" 页！");
        return false;
    }

    //==点击跳转
    if( i_go_page < 1 || i_go_page > j_max_page ){
        alert("可浏览的页数范围为 1 ~ "+ j_max_page +" 页！请输入有效的页数！");
        return false;
    }
    return true;
}

/***************************************************************
* 判断用户要浏览的是否就是当前页, 是否是 第一页和最后一页
* 如果已经是 尾页，就提示"已经是最后一页！"
* 如果已经是 首页，就提示"已经是首页！"
* 参数： goPage: 要浏览的页面
* 参数： nowPage: 当前的页面
* 参数： maxPage: 最大的页面
* 参数： clickFlag: 操作动作的标记，1 ＝ 首页 ， 2 ＝ 上一页 ， 3 ＝ 下一页 ， 4 ＝ 尾页 ， 5 ＝ 跳转
* 返回： true : 可以访问要浏览的页面
*       false: 要浏览的页面就是当前页或已经是第一页或最后一页
*****************************************************************/
function checkGoPage(goPage,nowPage,maxPage,clickFlag){
    if( !isPInt(goPage) ){
        alert("请输入有效的页数！");
        return false;
    }
    var i_go_page = parseInt(goPage,10);
    var k_now_page = parseInt(nowPage,10);
    var j_max_page = parseInt(maxPage,10);
    if( j_max_page == 0){
        alert("没有可以显示的记录！");
        return false;
    }

    /**
     * 判断是否正整数
     * ＠str 要判断的数据
     */
    function isPInt(str) {
	    var g = /^[1-9]*[1-9][0-9]*$/;
	    return g.test(str);
	}
/*
    if( j_max_page == 1){
        alert("显示记录只有 1 页。您正在浏览第 1 页！");
        return false;
    }
*/
    if(clickFlag == 1 || clickFlag == 2){ if(!onClickPrevPage(nowPage)) return false; }
    if(clickFlag == 3 || clickFlag == 4){ if(!onClickNextPage(nowPage,maxPage)) return false; }
    if(clickFlag == 5){ if(!onClickGoPage(goPage,nowPage,maxPage)) return false; }
    return true;
}

html部分

<tr class="TableRowEven">
        <td height="19" colspan="9" align="right" valign="top">
        共${pager.totalCount }条 第${pager.currentPage}/${pager.totalPage}页
        <a href="#" onclick="javascrpit:gotopage(1,${pager.currentPage},${pager.totalPage},1);">首页</a>
        <a href="#" onclick="javascrpit:gotopage(${pager.prePage},${pager.currentPage},${pager.totalPage},2);">上页</a>
        <a href="#" onclick="javascrpit:gotopage(${pager.nextPage},${pager.currentPage},${pager.totalPage},3);">下页</a>
        <a href="#" onclick="javascrpit:gotopage(${pager.totalPage},${pager.currentPage},${pager.totalPage},4);">尾页</a>
        <a href="#" onclick="javascrpit:gotopage(theForm.pageno.value,${pager.currentPage},${pager.totalPage},5);">跳转</a>
        <input type="text" id="pageNo" name="pageNo"  size="3"  >页
        <input type="button" id="search" name="search" value="查询" onclick="javascript:pageSearch('${pager.totalPage}');"/>
        </td>
      </tr>

向后台传参部分

function gotopage(goPage,nowPage,totalPage,flag){
    if(checkGoPage(goPage,nowPage,totalPage,flag)){
        var  url = '${ctx}/system/staff?currentPage='+goPage;
        window.location.href = url;
    }
}

function pageSearch(totalPage){
	var pageNo = $("#pageNo").val();
	if(!common.isPInt(pageNo)){
		alert("请输入数字!");
		return false;
	}
	if(pageNo > totalPage){
		alert("最大页"+totalPage+"页");
		return false;
	}
	var  url = '${ctx}/system/staff?currentPage='+pageNo;
    window.location.href = url;
}

Pager类

public class PagerBean implements java.io.Serializable {

	private static final long serialVersionUID = 2981940569512052481L;
	private int totalPage;                    //总页数  
    private int totalCount;                   //总记录数  
    private int currentPage;                //当前页  
    private int pageSize;                    //每页的数量
    private int firstPage;                     //首页
    private int prePage;                     //上一页
    private int nextPage;                    //下一页
    private int lastPage;                     //尾页
    private int startPageNumber;         //查询起始数
    private int endPageNumber;          //查询结束数
    
	public int getTotalPage() {
		return totalPage;
	}
	public void setTotalPage(int totalPage) {
		this.totalPage = totalPage;
	}
	public int getTotalCount() {
		return totalCount;
	}
	public void setTotalCount(int totalCount) {
		this.totalCount = totalCount;
	}
	public int getCurrentPage() {
		return currentPage;
	}
	public void setCurrentPage(int currentPage) {
		this.currentPage = currentPage;
	}
	public int getPageSize() {
		return pageSize;
	}
	public void setPageSize(int pageSize) {
		this.pageSize = pageSize;
	}
	public int getFirstPage() {
		return firstPage;
	}
	public void setFirstPage(int firstPage) {
		this.firstPage = firstPage;
	}
	public int getPrePage() {
		return prePage;
	}
	public void setPrePage(int prePage) {
		this.prePage = prePage;
	}
	public int getNextPage() {
		return nextPage;
	}
	public void setNextPage(int nextPage) {
		this.nextPage = nextPage;
	}
	public int getLastPage() {
		return lastPage;
	}
	public void setLastPage(int lastPage) {
		this.lastPage = lastPage;
	}
	 public int getStartPageNumber() {
		return startPageNumber;
	}
	public void setStartPageNumber(int startPageNumber) {
		this.startPageNumber = startPageNumber;
	}
	public int getEndPageNumber() {
		return endPageNumber;
	}
	public void setEndPageNumber(int endPageNumber) {
		this.endPageNumber = endPageNumber;
	}
	/** 
     * 分页处理 
     * @param currentPage 当前页 
     * @param pageSize 每页的数量 
     * @param totalCount 总记录数 
     */  
    public void setPageInfo(int currentPage, int pageSize, int totalCount){  
        this.currentPage = currentPage;  
        this.pageSize = pageSize;  
        this.totalCount = totalCount;  
          
        if(currentPage < 1){  
            this.currentPage = 1;  
        }  
          
        this.totalPage = (this.totalCount + pageSize - 1)/pageSize;  
        this.firstPage =1;  
        this.lastPage = totalPage;  
          
        if(this.currentPage > 1){  
            this.prePage = this.currentPage - 1;  
        }else{  
            this.prePage = 1;  
        }  
          
        if(this.currentPage < totalPage){  
            this.nextPage = this.currentPage + 1;   
        }else{  
            this.nextPage = totalPage;  
        } 
        
        this.startPageNumber = (this.currentPage-1)*this.pageSize;
        this.endPageNumber = (this.currentPage-1)*this.pageSize+this.pageSize;
    }

java处理分页部分

int currentPage = request.getParameter("currentPage") == null ? 1 : Integer.parseInt(request.getParameter("currentPage"));
GlobalInfoBean global = (GlobalInfoBean)session.getAttribute("global");
Integer pageSize = global.getPageRecode();
if(pageSize == null){
	pageSize = 20;
}
int totalCount = systemService.getStaffBeanListCount();
PagerBean pager  = new PagerBean();
pager.setPageInfo(currentPage, pageSize, totalCount);
List<LoginBean> staffBeanList = systemService.getStaffBeanList(pager);
request.setAttribute("pager", pager);

本文代码参考：http://jaychaoqun.iteye.com/blog/393721