码迷,mamicode.com
首页 > 数据库 > 详细

分页显示数据----前端(将数据库中的信息分页显示到网页)

时间:2017-08-16 20:27:05      阅读:257      评论:0      收藏:0      [点我收藏+]

标签:png   win   4.0   ==   window   click   代码   enum   完成   

  在上篇文章中,我们已经完成了分页显示的后台处理,现在进行前端的处理。 

  期望显示结果:技术分享

 

  由于对于不同的项目、不同的数据库数据部分不同,所以我们将分页部分提取出来,单独建立jsp页面:

 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   <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 5   <html>
 6   <head>
 7   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 8   <title>Insert title here</title>
 9   </head>
10   <body>
11       <div id="page_nav" align="center">
12           <a href="${page.path}?pageNo=1">首页</a>
13           <a href="${page.path}?pageNo=${page.pageNumber -1}">上一页</a>
14               <c:choose>
15                   <c:when test="${page.totalPage<=5}">
16                       <c:set var="begin" value="1"></c:set>
17                       <c:set var="end" value="${page.totalPage}"></c:set>
18                   </c:when>
19                   <c:when test="${page.pageNumber<=3}">
20                       <c:set var="begin" value="1"></c:set>
21                       <c:set var="end" value="5"></c:set>
22                   </c:when>
23                   
24                   <c:otherwise>    
25                       <c:set var="begin" value="${page.pageNumber-2}"></c:set>
26                       <c:set var="end" value="${page.pageNumber+2}"></c:set>
27                       
28                       <c:if test="${end>page.totalPage}">
29                           <c:set var="begin" value="${page.pageNumber-4}"></c:set>
30                           <c:set var="end" value="${page.totalPage}"></c:set>
31                       </c:if>
32                   </c:otherwise>
33               </c:choose>
34               
35               <c:forEach begin="${begin}" end="${end}" var="num">
36                   <c:if test="${page.pageNumber== num}">
37                       <a href="${page.path}?pageNo=${num}">【${num}】</a>
38                   </c:if>
39                   <c:if test="${page.pageNumber!= num}">
40                       <a href="${page.path}?pageNo=${num}">${num}</a>
41                   </c:if>    
42               </c:forEach>
43           <a href="${page.path}?pageNo=${page.pageNumber +1}">下一页</a>
44           <a href="${page.path}?pageNo=${page.totalPage}">末页</a>
45           共${page.totalPage}页,${page.totalRecord }条记录    到第<input value="${page.totalPage}" name = "pn" id ="pn_input"/>46           <input type="button" value="确定" id="btn_id"/>
47           <script type="text/javascript">
48               $("#btn_id").click(function(){
49                   var value= $("#pn_input").val();
50                   window.location="${page.path}?pageNo="+value;
51               })
52           </script>
53       </div>
54   </body>
55   </html>

    

  以上代码实现了跳转页面的功能,自动显示5个页面,并在当前页面>=3并且<=总页面数时居中显示,如下图的"【4】":  

                            技术分享  

 

  最后在数据查询显示页面的jsp中包含paging页面即可。

                  

1     <!-- 分页信息 -->
2         <%@include file="/WEB-INF/view/paging.jsp" %>

 

分页显示数据----前端(将数据库中的信息分页显示到网页)

标签:png   win   4.0   ==   window   click   代码   enum   完成   

原文地址:http://www.cnblogs.com/alternative/p/7375233.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!