页面做分页

最新推荐文章于 2024-08-16 15:07:38 发布

原创最新推荐文章于 2024-08-16 15:07:38 发布 · 171 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

JS 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一个基于Java的分页导航实现方案，通过自定义JavaScript函数完成页面跳转，并利用隐藏参数存储当前页码等信息。文章展示了如何通过条件判断确保输入的页码有效，以及如何动态生成分页链接。


/**
 * 跳转
 * 
 * @param 跳转的页号
 */
function jumpPage(pageNo) {
	$("#pageNo").val(pageNo);
	$("#listForm").submit();
}

  //输入页码然后跳转
    function goPage(){
    	if($("#goPageNo").val()>=1){
    		if($("#goPageNo").val()<=$("#totalPage").val()){
    			jumpPage($("#goPageNo").val());
    		}else{
        		jumpPage($("#totalPage").val());
        	}
    	}else{
    		jumpPage(1);
    	}
    }

//隐藏参数
  <input type="hidden" name="pageNo" id="pageNo" value="${pageData.pagination.pageNo}" />
 <input type="hidden" name="fieldName" id="fieldName" value="${pageData.compositor.fieldName}" />
<input type="hidden" name="compositorType" id="compositorType" value="${pageData.compositor.compositorType}" />
 <input type="hidden" name="totalPage" id="totalPage" value="${pageData.pagination.totalPage}" />

//具体分页
<div class="pagination"> 
      <a href="javascript:jumpPage(1)" title="First Page">« 首页</a>
      <c:if test="${pageData.pagination.hasPrevPage}">  <a href="javascript:jumpPage(${pageData.pagination.prevPage})">« 上一页</a> </c:if>
      <c:if test="${pageData.pagination.pageNo<=pageData.pagination.totalPage}">
      <a href="javascript:jumpPage(${pageData.pagination.pageNo})" class="number current" title="${pageData.pagination.pageNo}">${pageData.pagination.pageNo}</a>
      </c:if>
      <c:if test="${pageData.pagination.pageNo+1<=pageData.pagination.totalPage}">
       <a href="javascript:jumpPage(${pageData.pagination.pageNo+1})" class="number" title="${pageData.pagination.pageNo+1}">${pageData.pagination.pageNo+1}</a> 
      </c:if>
      <c:if test="${pageData.pagination.pageNo+2<=pageData.pagination.totalPage}">
       <a href="javascript:jumpPage(${pageData.pagination.pageNo+2})" class="number" title="${pageData.pagination.pageNo+2}">${pageData.pagination.pageNo+2}</a> 
     </c:if>
     <c:if test="${pageData.pagination.pageNo+3<=pageData.pagination.totalPage}">
      <a href="javascript:jumpPage(${pageData.pagination.pageNo+3})" class="number" title="${pageData.pagination.pageNo+3}">${pageData.pagination.pageNo+3}</a> 
     </c:if>
      <c:if test="${pageData.pagination.hasNextPage}"><a href="javascript:jumpPage(${pageData.pagination.nextPage})" title="Next Page">下一页 »</a> </c:if>
       <a href="javascript:jumpPage(${pageData.pagination.totalPage})"> 尾页»</a> 总记录数 <i class="color_red">${pageData.pagination.totalCount}</i> 条
        <input type="text" id="goPageNo" name="goPageNo" value="" class="page">
        /${pageData.pagination.totalPage}
        <input type="reset" value="GO" onclick="javascript:goPage();" class="btn btn_gray go">
      </div>
    </div>
  </div>