JSP页面2种简单的分页形式

最新推荐文章于 2021-09-19 10:46:33 发布

原创最新推荐文章于 2021-09-19 10:46:33 发布 · 201 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ui #ViewUI

@Java 专栏收录该内容

32 篇文章

订阅专栏

本文介绍了两种JSP分页实现方式：一种通过JavaScript进行页面跳转，另一种利用URL参数实现。前者用户体验更佳，提供了完整的代码示例及解析。

JSP页面2种简单的分页形式，写下来以做备忘，欢迎各位建议或批评。第一种使用js，第二种直接用url地址。第一种较好。

第一种形式：

<!--分页信息展示 start-->
        <div class="page-generation" id="marketingpage"> 
         共${info_totalCount}条数据.    
         <a href="javascript:go('${info_currentPage -1}');">上一页</a>
         <c:forEach begin="1" end="${info_pageNumShown}" var="tt">
          <c:choose>
           <c:when test="${tt==info_currentPage}">
            <font color="red">${tt}</font>
           </c:when>
           <c:otherwise>
            <a href="javascript:go('${tt }');">${tt}</a>
           </c:otherwise>
          </c:choose>
         </c:forEach>
         <a href="javascript:go('${info_currentPage +1 }');">下一页</a>
         <a href="javascript:go(${info_pageNumShown });">尾页</a>
        </div>
<!--分页信息展示 end-->

js代码：

<script>
//分页去向
function go(num)  
{    
	var pageNumShown = '${info_pageNumShown}' ;
	pageNumShown = parseInt(pageNumShown);
	var searchContent = $("#search_result_box_textarea").val();
	if(num<=0)  
	{  
		alert('当前已是首页');  
		return;  
    }  
	if(num>pageNumShown)  
	{  
		alert('当前已是尾页');  
		return;  
	}  
	var url = window.location;  
	var pos = String(url).indexOf("pageNum");    //查看是否存在pageNum页数参数  
	if(pos=="-1")  
	{  
        window.location.replace(url+'?pageNum='+num+"&searchContent="+searchContent) ;   //不存在则添加,值为所点击的页数  
	}  
 	else  
	{  
       	var ui = String(url).substring(0,pos);             
        window.location.replace(ui+'pageNum='+num+"&searchContent="+searchContent);      //存在,则刷新pageNum参数值  
    }  
}   
</script>

第二种形式：

<!--分页信息展示 start-->
        <div class="page-generation" id="marketingpage">
         共${info_totalCount}条数据. 
         <c:if test="${info_currentPage le 1}" var="syy">
          <a title="首页" href="#">首页</a>
          <a title="上一页" href="#">上一页</a>
         </c:if>
         <c:if test="${!syy}">
          <a title="首页"
           href="<c:url value='/search.htm?pageNum=1&searchContent=${searchContent}'/>">首页</a>
          <a title="上一页"
           href="<c:url value='/search.htm?pageNum=${info_currentPage-1}&searchContent=${searchContent}'/>">上一页</a>
         </c:if>
         <c:forEach var="pageNo" begin="1" end="${info_pageNumShown}">
          <a href="<c:url value='/search.htm?pageNum=${pageNo}&searchContent=${searchContent}'/>">
           <c:if test="${info_currentPage eq pageNo}" var="rsFy">
            <strong>${pageNo}</strong>
           </c:if> 
           <c:if test="${!rsFy}">
             ${pageNo}
           </c:if>
          </a>
         </c:forEach>
         <c:if test="${info_currentPage ge info_pageNumShown}" var="xyy">
          <a title="下一页" href="#">下一页</a>
          <a title="尾页" href="#">尾页</a>
         </c:if>
         <c:if test="${!xyy}">
          <a title="下一页"
           href="<c:url value='/search.htm?pageNum=${info_currentPage+1}'/>">下一页</a>
          <a title="尾页"
           href="<c:url value='/search.htm?pageNum=${info_pageNumShown}'/>">尾页</a>
         </c:if>
        </div>
<!--分页信息展示 end-->