java web 实现分页功能
使用框架:ssm
数据库:oracle
话说 oracle 的分页查询比 mysql 复杂多了,在这里简单谈一下:
查询 前十条数据:
1 SELECT * FROM(
2 SELECT ROWNUM WN,RN.* FROM (
3 SELECT
4 id,
5 title,
6 create_time as createTime,
7 musictor,
8 musictitle
9 FROM
10 krry_blog
11 ORDER BY create_time desc
12 )RN
13 )WN
14 WHERE WN <= 10 AND WN > 0
oracle 分页查询语法较为复杂,
同样的结果,mysql 的语法是:用一个 LIMIT 就可以解决。
LIMIT a,b : 参数 a:第 a 条数据开始查询(不包括第 a 条), 参数 b:查询 b 条数据
1 SELECT
2 id,
3 title,
4 create_time as createTime,
5 musictor,
6 musictitle
7 FROM
8 krry_blog
9 ORDER BY create_time desc
10 LIMIT 5,3
查询的是从结果集中第5条数据开始的3条数据 (即查询出第6、第7、第8条数据)
SSM 框架的搭建,就不多说了,以前的博客有详细介绍,这里就谈谈实现 java web 分页的功能。
用到插件 js : krry_page.js,还有jQuery
mapper 持久层:
BlogMapper.java
1 package com.krry.mapper;
2
3 import java.util.HashMap;
4 import java.util.List;
5 import com.krry.entity.Params;
6
7 /**
8 *
9 * Mapper:操作数据库
10 * @author krry
11 * @version 1.0.0
12 *
13 */
14 public interface BlogMapper {
15
16 /**
17 * 查询所有博客
18 * @param params
19 * @return
20 */
21 public List<HashMap<String, Object>> findBlogs(Params params);
22
23 /**
24 * 计算博客数量
25 * com.krry.dao.admin
26 * 方法名:countBlogs
27 * @author krry
28 * @param params
29 * @return int
30 * @exception
31 * @since 1.0.0
32 */
33 public long countBlogs();
34
35
36 }
BlogMapper.xml
1 <?xml version="1.0" encoding="UTF-8" ?>
2 <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
3 "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
4
5 <mapper namespace="com.krry.mapper.BlogMapper" >
6
7 <!-- 分页查询所有的博客信息 -->
8 <select id="findBlogs" resultType="java.util.HashMap" parameterType="Params">
9 SELECT * FROM(
10 SELECT ROWNUM WN,RN.* FROM (
11 SELECT
12 id,
13 title,
14 create_time as createTime,
15 musictor,
16 musictitle
17 FROM
18 krry_blog
19 ORDER BY create_time desc
20 )RN
21 )WN
22 WHERE WN <= #{pageSize} AND WN > #{pageNo}
23 </select>
24
25 <!-- 查询博客数量 -->
26 <select id="countBlogs" resultType="long">
27 SELECT
28 count(*)
29 FROM
30 krry_blog
31 </select>
32
33
34 </mapper>
service业务层:
接口类:IBlogService.java
1 package com.krry.service;
2
3 import java.util.HashMap;
4 import java.util.List;
5
6 import javax.servlet.http.HttpServletRequest;
7
8 import org.apache.ibatis.annotations.Param;
9
10 import com.krry.entity.Blog;
11 import com.krry.entity.Params;
12
13 /**
14 * service层:处理业务逻辑(impl里面实现)
15 * @author asusaad
16 *
17 */
18 public interface IBlogService {
19
20 /**
21 * 分页查询所有博客
22 * @param params
23 * @return
24 */
25 public List<HashMap<String, Object>> findBlogs(Params params);
26
27 /**
28 * 计算博客数量
29 * @param params
30 * @return
31 */
32 public long countBlogs();
33
34 }
impl 实现类:BlogService.java
1 package com.krry.service.impl;
2
3 import java.util.HashMap;
4 import java.util.List;
5
6 import org.springframework.beans.factory.annotation.Autowired;
7 import org.springframework.stereotype.Service;
8 import org.springframework.web.servlet.ModelAndView;
9
10 import com.krry.entity.Params;
11 import com.krry.mapper.BlogMapper;
12 import com.krry.service.IBlogService;
13
14 /**
15 * 实现service层接口
16 * @author asusaad
17 *
18 */
19 @Service
20 public class BlogService implements IBlogService{
21
22 @Autowired
23 private BlogMapper blogMapper;
24
25 /**
26 * 查询博客
27 */
28 public List<HashMap<String, Object>> findBlogs(Params params) {
29
30 //查询博客信息
31 List<HashMap<String, Object>> blog = blogMapper.findBlogs(params);
32
33
34 return blog;
35 }
36
37 /**
38 * 计算博客数量
39 * @param params
40 * @return
41 */
42 public long countBlogs(){
43
44 long coutBlogs = blogMapper.countBlogs();
45
46 return coutBlogs;
47 }
48
49
50
51 }
controller控制层:
KrryController.java
1 package com.krry.controller;
2
3 import java.util.HashMap;
4 import java.util.List;
5
6 import org.springframework.beans.factory.annotation.Autowired;
7 import org.springframework.stereotype.Controller;
8 import org.springframework.web.bind.annotation.RequestMapping;
9 import org.springframework.web.bind.annotation.ResponseBody;
10 import org.springframework.web.servlet.ModelAndView;
11 import com.krry.entity.Params;
12 import com.krry.service.IBlogService;
13
14 /**
15 * KrryController
16 * controller层,作为请求转发
17 * @author asusaad
18 *
19 */
20 @Controller //表示是多例模式,每个用户返回的web层是不一样的
21 public class KrryController {
22
23 @Autowired
24 private IBlogService blogService;
25
26 /**
27 * 首页,并且分页查询
28 * @return
29 */
30 @RequestMapping("/index")
31 public ModelAndView index(Params params){
32
33 params.setPageNo(0);
34 params.setPageSize(10); //一开始只查询10条
35
36 //调用业务层
37 List<HashMap<String, Object>> blogs = blogService.findBlogs(params);
38 //查询博客数量
39 long coutBlogs = blogService.countBlogs();
40
41 ModelAndView modelAndView = new ModelAndView();
42 modelAndView.addObject("blogs", blogs);
43 modelAndView.addObject("coutBlogs", coutBlogs);
44 modelAndView.setViewName("index");
45
46 return modelAndView;
47 }
48
49 /**
50 * ajax请求 的 分页查询
51 * @param params
52 * @return
53 */
54 @ResponseBody
55 @RequestMapping("/loadData")
56 public HashMap<String, Object> loadData(Params params){
57
58 HashMap<String, Object> map = new HashMap<String, Object>();
59 List<HashMap<String, Object>> blogs = blogService.findBlogs(params);
60 map.put("blogs", blogs);
61
62 return map;
63 }
64
65 }
这里要有两个实体类,作为数据库查询的注入 Blog,还有分页查询的两个参数 Params:
设置data参数:pageNo(下一页):就是当前页数 * 下一页要显示的数量
pageSize(下一页):已经查询出来的数量(pageNo) + 每页要显示的数量
在数据库中是 WN <= pageSize and WN > pageNo 来查询分页数据
Blog.java
1 package com.krry.entity;
2
3
4 /**
5 *
6 * User
7 * @author krry
8 * @version 1.0.0
9 *
10 */
11 public class Blog {
12
13 // 主键
14 private String id;
15 //博客标题
16 private String title;
17 //音乐作者
18 private String musictor;
19 //音乐标题
20 private String musictitle;
21 //创建时间
22 private String createTime;
23
24 public Blog(String id, String title, String musictor, String musictitle,
25 String createTime) {
26 this.id = id;
27 this.title = title;
28 this.musictor = musictor;
29 this.musictitle = musictitle;
30 this.createTime = createTime;
31 }
32
33 public String getId() {
34 return id;
35 }
36
37 public void setId(String id) {
38 this.id = id;
39 }
40
41 public String getTitle() {
42 return title;
43 }
44
45 public void setTitle(String title) {
46 this.title = title;
47 }
48
49 public String getMusictor() {
50 return musictor;
51 }
52
53 public void setMusictor(String musictor) {
54 this.musictor = musictor;
55 }
56
57 public String getMusictitle() {
58 return musictitle;
59 }
60
61 public void setMusictitle(String musictitle) {
62 this.musictitle = musictitle;
63 }
64
65 public String getCreateTime() {
66 return createTime;
67 }
68
69 public void setCreateTime(String createTime) {
70 this.createTime = createTime;
71 }
72
73
74 }
Params.java
1 package com.krry.entity;
2
3 /**
4 *
5 * Params
6 * @author krry
7 * @version 1.0.0
8 *
9 */
10 public class Params {
11
12 private Integer pageSize = 0;
13 private Integer pageNo = 0;
14
15
16 public Integer getPageNo() {
17 return pageNo;
18 }
19
20 public void setPageNo(Integer pageNo) {
21 this.pageNo = pageNo;
22 }
23
24 public Integer getPageSize() {
25 return pageSize;
26 }
27
28 public void setPageSize(Integer pageSize) {
29 this.pageSize = pageSize;
30 }
31
32 }
web 页面 index.jsp
1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
2 <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
3 <%
4 String path = request.getContextPath();
5 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
6 pageContext.setAttribute("basePath", basePath);
7 %>
8
9 <!DOCTYPE HTML>
10 <html>
11 <head>
12 <title>分页</title>
13 <style>
14 body{background:url("resource/images/78788.jpg");background-size:cover;}
15 .titless{font-size: 34px;text-align: center;color: black;margin-bottom: 16px;}
16 .ke_tabbox{min-height:556px;width:900px;background:#f9f9f9;margin:20px auto 0;padding:6px;position:relative;}
17 .ke_tabbox .sendMy{text-align: center;
18 font-family: "微软雅黑";
19 font-size: 28px;
20 -webkit-text-fill-color: transparent;
21 background: -webkit-gradient(linear,left top,left bottom,from(#FD8700),to(#FF00B1));
22 -webkit-background-clip: text;
23 margin:8px auto 0;line-height: 35px;}
24 .ke_tabbox .ke_table{width:100%;margin-top: 26px;}
25 .ke_tabbox th{background:#ccc;font-weight:bold;}
26 .ke_tabbox .ke_table td,th{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;border:1px solid #fff;padding:4px 12px;color:#666;font-size:12px;}
27 /*分页相关*/
28 .tzPage{font-size: 12px;position: absolute;top: 480px;right: 0px;}
29
30 #tbody tr:hover{background:#eaeaea;}
31 #tbody .t_mode{padding-right:4px;}
32 #tbody .t_avbiaoq:hover{color:#FF6857;transition:.4s}
33 #tbody .t_dele{padding-left:4px;}
34
35 .tzPage a{text-decoration:none;border:none;color:#7d7d7d;background-color:#f2f2f2;border-radius: 3px;}
36 .tzPage a:hover{background:#dd5862;color:#FFF;}
37 .tzPage a,.tzPage span{display:block;float:left;padding:0em 0.5em;margin-right:5px;margin-bottom:5px;min-width:1em;text-align:center;line-height: 22px;height: 22px;}
38 .tzPage .current{background:#dd5862;color:#FFF;border:none;border-radius: 3px;}
39 .tzPage .current.prev,.tzPage .current.next{color:#999;border:1px solid #e5e5e5;background:#fff;}
40 .tm_psize_go{margin-right:4px;float:left;height:24px;line-height:33px;position:relative;border:1px solid #e5e5e5;color:#999}
41 #tm_pagego{border-radius:3px;height:18px;width:30px;float:left;text-align:center;border:1px solid #e5e5e5;line-height: 22px;color:#999}
42 .sortdesc{border-top:5px solid;width:0px;height:0px;display:inline-block;vertical-align:middle;border-right:5px solid transparent;border-left:5px solid transparent;margin-left:5px;}
43 .sortasc{border-bottom:5px solid;width:0px;height:0px;display:inline-block;vertical-align:middle;border-right:5px solid transparent;border-left:5px solid transparent;margin-left:5px;}
44 .red{color:red}
45 .green{color:green}
46
47 .hideAdd{height: 300px;
48 text-align: center;
49 line-height: 300px;
50 margin-top: 16px;display:none;}
51 .hideAdd a{font-size:28px;-webkit-text-fill-color:transparent;background: -webkit-gradient(linear,left top,left bottom,from(#FD0051),to(#A22C93));-webkit-background-clip: text;}
52 </style>
53 </head>
54
55 <body>
56 <div class="ke_tabbox">
57 <p class="titless">分页展示</p>
58 <table class="ke_table">
59 <thead>
60 <tr>
61 <th style="width:25%">标题</th>
62 <th style="width:25%">音乐人</th>
63 <th style="width:30%">音乐标题</th>
64 <th style="width:20%">发布时间</th>
65 </tr>
66 </thead>
67
68 <tbody id="tbody" data-itemcount="${coutBlogs}">
69 <c:forEach var="blog" items="${blogs}">
70 <tr>
71 <td><a class="t_avbiaoq" title="${blog.TITLE}">${blog.TITLE}</a></td>
72 <td><a class="t_avbiaoq" title="${blog.MUSICTOR}">${blog.MUSICTOR}</a></td>
73 <td><a class="t_avbiaoq" title="${blog.MUSICTITLE}">${blog.MUSICTITLE}</a></td>
74 <td>${blog.CREATETIME}</td>
75 </tr>
76 </c:forEach>
77 </tbody>
78 </table>
79 <div id="krryPage"></div>
80 </div>
81 <script type="text/javascript" src="${basePath}/resource/js/jquery-1.11.3.min.js"></script>
82 <script type="text/javascript" src="${basePath}/resource/js/krry_page.js"></script>
83 <script type="text/javascript">var basePath = "${basePath}";</script>
84 <script type="text/javascript">
85
86 var krryAdminBlog = {
87 initPage:function(itemCount){
88 $("#krryPage").tzPage(itemCount, {
89 num_display_entries : 5, //主体页数
90 num_edge_entries : 4,//边缘页数
91 current_page : 0,//指明选中页码
92 items_per_page : 10, //每页显示多少条
93 prev_text : "上一页",
94 next_text : "下一页",
95 showGo:true,//显示
96 showSelect:false,
97 callback : function(pageNo, psize) {//会回传两个参数,第一个是当前页数,第二个是每页要显示的数量
98 krryAdminBlog.loadData(pageNo,psize);
99 }
100 });
101 },
102 //设置data参数:pageNo(下一页):就是当前页数 * 下一页要显示的数量
103 // pageSize(下一页):已经查询出来的数量(pageNo) + 每页要显示的数量
104 //在数据库中是 WN <= pageSize and WN > pageNo 来查询分页数据
105 loadData:function(pageNo,pageSize){
106 pageNo = pageNo * pageSize;
107 pageSize = pageNo + 10;
108 $.ajax({
109 type:"post",
110 url:basePath+"/loadData",
111 data:{pageNo:pageNo,pageSize:pageSize},
112 success:function(data){
113 if(data){
114 var html = "";
115 var blogArr = data.blogs;
116 for(var i=0,len=blogArr.length;i < len;i++){
117 var json = blogArr[i];
118 html+= "<tr>"+
119 " <td><a class='t_avbiaoq' title='"+json.TITLE+"'>"+json.TITLE+"</a></td>"+
120 " <td><a class='t_avbiaoq' title='"+json.NAME+"'>"+json.MUSICTOR+"</a></td>"+
121 " <td><a class='t_avbiaoq' title='"+json.MUSICTITLE+"'>"+json.MUSICTITLE+"</a></td>"+
122 " <td>"+json.CREATETIME+"</td>"+
123 "</tr>";
124 }
125 $("#tbody").html(html);
126 }
127 }
128 });
129 }
130 };
131
132 krryAdminBlog.initPage($("#tbody").data("itemcount"));
133
134 </script>
135 </body>
136 </html>
分页效果图:
相关链接:
本示例:https://www.ainyi.com/krry_pages
GitHub:https://github.com/Krryxa