唯倚社区

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 249|回复: 5

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

[复制链接]

59

主题

169

帖子

754

积分

版主

Rank: 7Rank: 7Rank: 7

积分
754
发表于 2017-9-16 17:32:57 | 显示全部楼层 |阅读模式

轻松玩转社区

您需要 登录 才可以下载或查看,没有帐号?立即注册

x


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

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

[Java] 纯文本查看 复制代码
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   
[Java] 纯文本查看 复制代码
  <!-- 分页信息 -->
2         <%@include file="/WEB-INF/view/paging.jsp" %>



3

主题

122

帖子

426

积分

版主

Rank: 7Rank: 7Rank: 7

积分
426
发表于 2017-9-23 20:15:45 | 显示全部楼层
楼主,我这人不太会说话,要是我说错了话,你特么来咬我啊!
回复

使用道具 举报

31

主题

151

帖子

812

积分

版主

Rank: 7Rank: 7Rank: 7

积分
812
发表于 2017-9-23 20:58:55 | 显示全部楼层
高端大气上档次,低调奢华有内涵
回复

使用道具 举报

33

主题

160

帖子

434

积分

版主

Rank: 7Rank: 7Rank: 7

积分
434
发表于 2017-9-24 04:27:40 | 显示全部楼层
闪瞎了我的钛合金狗眼
回复

使用道具 举报

19

主题

128

帖子

1065

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1065

最佳新人

发表于 2017-9-24 04:46:59 | 显示全部楼层
不明觉厉
回复

使用道具 举报

31

主题

151

帖子

812

积分

版主

Rank: 7Rank: 7Rank: 7

积分
812
发表于 2017-9-24 09:16:03 | 显示全部楼层
都怪吧主删我贴所以我只能到处逛
回复

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|weiecn ( 湘ICP备14002058号 )

GMT+8, 2018-10-23 09:28 , Processed in 0.070853 second(s), 9 queries , Redis On.

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表