前端分页代码展示

系统管理员 2020-11-15 06:25 863阅读 0赞 
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
  2.     pageEncoding="UTF-8"%>  
  3. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>  
  4. <%  
  5.    pageContext.setAttribute("APP_PATH",request.getContextPath());  
  6. %>  
  7. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  8. <html>  
  9. <head>  
  10. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  11. <title>分页</title>  
  12. <!--要先引入jquery 再引入 bootstrap 不然报错：Uncaught Error: Bootstrap's JavaScript requires jQuery at bootstrap.min.js:6  -->  
  13. <script type="text/javascript" src="${APP_PATH }/static/js/jquery-1.12.4.min.js"></script>  
  16. <!-- 引入bootstrap的js和样式 -->  
  17. <script type="text/javascript" src="${APP_PATH }/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>  
  18. <link rel="stylesheet" href="${APP_PATH }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">  
  21. </head>  
  22. <body>  
  23.     <h3 align="center" >客户列表</h3>  
  24.     <table border="1" width="70%" align="center">  
  25.         <tr>  
  26.             <td style="text-align: center;">序号</td>  
  27. <td style="text-align: center;">姓名</td>  
  28. <td style="text-align: center;">性别</td>  
  29. <td style="text-align: center;">邮箱</td>  
  30.         </tr>  
  31.         <c:forEach items="${pageInfo.list }" var="s" varStatus="ss">  
  32.         <tr>  
  33.             <td align="center">${ss.count}</td>  
  34. <td align="center">${s.empName}</td>  
  35. <td align="center">${s.gender}</td>  
  36. <td align="center">${s.email}</td>   
  37.         </tr>  
  38.         </c:forEach>  
  39.     </table>  
  40. <br/>  
  41. <center>  
  42. <ul class="pagination">  
  43.    <!--  <li><a href="test?page=1">首页</a></li> -->  
  44.     <c:if test="${pageInfo.pageNum>1}">  
  45.         <li><a href="test?page=${pageInfo.pageNum-1}">上一页</a></li>  
  46.     </c:if>  
  49.     <c:choose>  
  50.         <c:when test="${pageInfo.pages<=7}">  
  51.             <c:set var="begin" value="1"/>  
  52.             <c:set var="end" value="${pageInfo.pages}"/>  
  53.         </c:when>  
  54.         <c:otherwise>  
  55.             <c:set var="begin" value="${pageInfo.pageNum-3}"/>  
  56.             <c:set var="end" value="${pageInfo.pageNum+3}"/>  
  57.             <%--头溢出--%>  
  58.             <c:if test="${begin<1}">  
  59.                 <c:set var="begin" value="1"/>  
  60.                 <c:set var="end" value="7"/>  
  61.             </c:if>  
  62.             <%--尾溢出--%>  
  63.             <c:if test="${end>pageInfo.pages}">  
  64.                 <c:set var="begin" value="${pageInfo.pages-6}"/>  
  65.                 <c:set var="end" value="${pageInfo.pages}"/>  
  66.             </c:if>  
  67.         </c:otherwise>  
  68.     </c:choose>  
  71.     <%--循环遍历页码列表--%>  
  72.     <c:forEach var="i" begin="${begin}" end="${end}">  
  73.         <c:choose>  
  74.             <c:when test="${i eq pageInfo.pageNum}">  
  75.                <li class="page-item active"><a>${i}</a></li>  
  76.             </c:when>  
  77.             <c:otherwise>  
  78.                 <li><a href="test?page=${i}">${i}</a></li>  
  79.             </c:otherwise>  
  80.         </c:choose>  
  83.     </c:forEach>  
  88.     <c:if test="${pageInfo.pageNum<pageInfo.pages}">  
  89.     <li><a href="test?page=${pageInfo.pageNum+1}">下一页</a></li>  
  90.     </c:if>  
  91.     <%-- <li><a href="test?page=${pageInfo.pages}">尾页</a></li> --%>  
  92. </ul>  
  93. </center>  
  94. <br>  
  95. <tr>  
  96. <td>第${pageInfo.pageNum}页/共${pageInfo.pages}页</td>>  
  97. <td>每页显示：  
  98. <select id="size">  
  99. <option value="10" οnclick="size(10)">10</option>  
  100. <option value="20">20</option>  
  101. <option value="30">30</option>   
  102. </select>  
  103. </td>  
  104. </tr>  
  107. <script type="text/javascript">  
  108. function size(size) {  
  109. $.ajax({  
  110. type: 'get',  
  111. url: 'test?size=' + size   
  112. });  
  113. }  
  114. </script>  
  117. </body>  
  118. </html>

发表评论

表情：
评论列表 （有 0 条评论，863人围观）

还没有评论，来说两句吧...

相关阅读

    相关 前端分页处理

    页面中实现的分页效果，要么后端提供接口，每次点击下一页就调用接口，若不提供接口，分页得前端自己去截取。 ![3e1ca6558f0847d9a0da9685df40cc8b.

    淩亂°似流年淩亂°似流年/ 0 赞/ 235 阅读

    相关 Java实现分页展示

    一、为什么我们要使用分页展示信息    当我们的需要展示的数据比较多时，这样在我们查找的数据的量也会增加，给数据库的压力还是比较大的，查询时间也会增加；并且在页面的显示的数据

    川长思鸟来川长思鸟来/ 0 赞/ 330 阅读