java ssm框架实现分页功能 （oracle）

java web 实现分页功能

使用框架：ssm

数据库：oracle

话说 oracle 的分页查询比 mysql 复杂多了，在这里简单谈一下：

查询 前十条数据：

1 1 SELECT * FROM(
2 2        SELECT ROWNUM WN,RN.* FROM (
3 3             SELECT
4 4                   id,
5 5                   title,
6 6                   create_time as createTime,
7 7                   musictor,
8 8                   musictitle
9 9              FROM
1010                  krry_blog
1111              ORDER BY create_time desc
1212          )RN
1313     )WN
1414 WHERE WN <= 10 AND WN > 0

oracle 分页查询语法较为复杂，

同样的结果，mysql 的语法是：用一个 LIMIT 就可以解决。

LIMIT a,b ： 参数 a：第 a 条数据开始查询（不包括第 a 条）， 参数 b：查询 b 条数据

1 1 SELECT
2 2     id,
3 3     title,
4 4     create_time as createTime,
5 5     musictor,
6 6     musictitle
7 7 FROM
8 8     krry_blog
9 9     ORDER BY create_time desc
1010 LIMIT 5,3

 查询的是从结果集中第5条数据开始的3条数据 （即查询出第6、第7、第8条数据）

SSM 框架的搭建，就不多说了，以前的博客有详细介绍，这里就谈谈实现 java web 分页的功能。

用到插件 js ： krry_page.js，还有jQuery

mapper 持久层：

BlogMapper.java

1 1 package com.krry.mapper;
2 2 
3 3 import java.util.HashMap;
4 4 import java.util.List;
5 5 import com.krry.entity.Params;
6 6 
7 7 /**
8 8  * 
9 9  * Mapper：操作数据库
1010  * @author krry
1111  * @version 1.0.0
1212  *
1313  */
1414 public interface BlogMapper {
1515 
1616     /**
1717      * 查询所有博客
1818      * @param params
1919      * @return
2020      */
2121     public List<HashMap<String, Object>> findBlogs(Params params);
2222     
2323     /**
2424      * 计算博客数量
2525      * com.krry.dao.admin 
2626      * 方法名：countBlogs
2727      * @author krry 
2828      * @param params
2929      * @return int
3030      * @exception 
3131      * @since  1.0.0
3232      */
3333     public long countBlogs();
3434     
3535     
3636 }

BlogMapper.xml

1 1 <?xml version="1.0" encoding="UTF-8" ?>
2 2 <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
3 3 "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
4 4 
5 5 <mapper namespace="com.krry.mapper.BlogMapper" >
6 6     
7 7     <!-- 分页查询所有的博客信息 -->
8 8     <select id="findBlogs" resultType="java.util.HashMap" parameterType="Params">
9 9         SELECT * FROM(
1010             SELECT ROWNUM WN,RN.* FROM (
1111                 SELECT
1212                     id,
1313                     title,
1414                     create_time as createTime,
1515                     musictor,
1616                     musictitle
1717                 FROM
1818                     krry_blog
1919                 ORDER BY create_time desc
2020             )RN
2121         )WN
2222         WHERE WN &lt;= #{pageSize} AND WN &gt; #{pageNo}
2323     </select>
2424     
2525     <!-- 查询博客数量 -->
2626     <select id="countBlogs" resultType="long">
2727         SELECT
2828             count(*)
2929         FROM
3030             krry_blog
3131     </select>
3232     
3333     
3434 </mapper>

service业务层：

接口类：IBlogService.java

1 1 package com.krry.service;
2 2 
3 3 import java.util.HashMap;
4 4 import java.util.List;
5 5 
6 6 import javax.servlet.http.HttpServletRequest;
7 7 
8 8 import org.apache.ibatis.annotations.Param;
9 9 
1010 import com.krry.entity.Blog;
1111 import com.krry.entity.Params;
1212 
1313 /**
1414  * service层：处理业务逻辑（impl里面实现）
1515  * @author asusaad
1616  *
1717  */
1818 public interface IBlogService {
1919     
2020     /**
2121      * 分页查询所有博客
2222      * @param params
2323      * @return
2424      */
2525     public List<HashMap<String, Object>> findBlogs(Params params);
2626     
2727     /**
2828      * 计算博客数量
2929      * @param params
3030      * @return
3131      */
3232     public long countBlogs();
3333     
3434 }

impl 实现类：BlogService.java

1 1 package com.krry.service.impl;
2 2 
3 3 import java.util.HashMap;
4 4 import java.util.List;
5 5 
6 6 import org.springframework.beans.factory.annotation.Autowired;
7 7 import org.springframework.stereotype.Service;
8 8 import org.springframework.web.servlet.ModelAndView;
9 9 
1010 import com.krry.entity.Params;
1111 import com.krry.mapper.BlogMapper;
1212 import com.krry.service.IBlogService;
1313 
1414 /**
1515  * 实现service层接口
1616  * @author asusaad
1717  *
1818  */
1919 @Service
2020 public class BlogService implements IBlogService{
2121 
2222     @Autowired
2323     private BlogMapper blogMapper;
2424     
2525     /**
2626      * 查询博客
2727      */
2828     public List<HashMap<String, Object>> findBlogs(Params params) {
2929         
3030         //查询博客信息
3131         List<HashMap<String, Object>> blog = blogMapper.findBlogs(params);
3232         
3333         
3434         return blog;
3535     }
3636     
3737     /**
3838      * 计算博客数量
3939      * @param params
4040      * @return
4141      */
4242     public long countBlogs(){
4343         
4444         long coutBlogs = blogMapper.countBlogs();
4545         
4646         return coutBlogs;
4747     }
4848     
4949     
5050 
5151 }

controller控制层：

KrryController.java

1 1 package com.krry.controller;
2 2 
3 3 import java.util.HashMap;
4 4 import java.util.List;
5 5 
6 6 import org.springframework.beans.factory.annotation.Autowired;
7 7 import org.springframework.stereotype.Controller;
8 8 import org.springframework.web.bind.annotation.RequestMapping;
9 9 import org.springframework.web.bind.annotation.ResponseBody;
1010 import org.springframework.web.servlet.ModelAndView;
1111 import com.krry.entity.Params;
1212 import com.krry.service.IBlogService;
1313 
1414 /**
1515  * KrryController
1616  * controller层，作为请求转发
1717  * @author asusaad
1818  *
1919  */
2020 @Controller  //表示是多例模式，每个用户返回的web层是不一样的
2121 public class KrryController {
2222     
2323     @Autowired
2424     private IBlogService blogService;
2525     
2626     /**
2727      * 首页，并且分页查询
2828      * @return
2929      */
3030     @RequestMapping("/index")
3131     public ModelAndView index(Params params){
3232         
3333         params.setPageNo(0);
3434         params.setPageSize(10); //一开始只查询10条
3535         
3636         //调用业务层
3737         List<HashMap<String, Object>> blogs = blogService.findBlogs(params);
3838         //查询博客数量
3939         long coutBlogs = blogService.countBlogs();
4040         
4141         ModelAndView modelAndView = new ModelAndView();
4242         modelAndView.addObject("blogs", blogs);
4343         modelAndView.addObject("coutBlogs", coutBlogs);
4444         modelAndView.setViewName("index");
4545         
4646         return modelAndView;
4747     }
4848     
4949     /**
5050      * ajax请求 的 分页查询
5151      * @param params
5252      * @return
5353      */
5454     @ResponseBody
5555     @RequestMapping("/loadData")
5656     public HashMap<String, Object> loadData(Params params){
5757         
5858         HashMap<String, Object> map = new HashMap<String, Object>();
5959         List<HashMap<String, Object>> blogs = blogService.findBlogs(params);
6060         map.put("blogs", blogs);
6161         
6262         return map;
6363     }
6464     
6565 }

这里要有两个实体类，作为数据库查询的注入 Blog，还有分页查询的两个参数 Params：

设置data参数：pageNo（下一页）：就是当前页数 * 下一页要显示的数量

  　　　　　　 pageSize（下一页）：已经查询出来的数量（pageNo） + 每页要显示的数量
在数据库中是 WN <= pageSize and WN > pageNo 来查询分页数据

Blog.java

1 1 package com.krry.entity;
2 2 
3 3 
4 4 /**
5 5  * 
6 6  * User
7 7  * @author krry
8 8  * @version 1.0.0
9 9  *
1010  */
1111 public class Blog {
1212 
1313     // 主键
1414     private String id;
1515     //博客标题
1616     private String title;
1717     //音乐作者
1818     private String musictor;
1919     //音乐标题
2020     private String musictitle;
2121     //创建时间
2222     private String createTime;
2323      
2424     public Blog(String id, String title, String musictor, String musictitle,
2525             String createTime) {
2626         this.id = id;
2727         this.title = title;
2828         this.musictor = musictor;
2929         this.musictitle = musictitle;
3030         this.createTime = createTime;
3131     }
3232 
3333     public String getId() {
3434         return id;
3535     }
3636 
3737     public void setId(String id) {
3838         this.id = id;
3939     }
4040 
4141     public String getTitle() {
4242         return title;
4343     }
4444 
4545     public void setTitle(String title) {
4646         this.title = title;
4747     }
4848 
4949     public String getMusictor() {
5050         return musictor;
5151     }
5252 
5353     public void setMusictor(String musictor) {
5454         this.musictor = musictor;
5555     }
5656 
5757     public String getMusictitle() {
5858         return musictitle;
5959     }
6060 
6161     public void setMusictitle(String musictitle) {
6262         this.musictitle = musictitle;
6363     }
6464 
6565     public String getCreateTime() {
6666         return createTime;
6767     }
6868 
6969     public void setCreateTime(String createTime) {
7070         this.createTime = createTime;
7171     }
7272      
7373      
7474 }

Params.java

1 1 package com.krry.entity;
2 2 
3 3 /**
4 4  * 
5 5  * Params
6 6  * @author krry
7 7  * @version 1.0.0
8 8  *
9 9  */
1010 public class Params {
1111 
1212     private Integer pageSize = 0;
1313     private Integer pageNo = 0;
1414     
1515 
1616     public Integer getPageNo() {
1717         return pageNo;
1818     }
1919 
2020     public void setPageNo(Integer pageNo) {
2121         this.pageNo = pageNo;
2222     }
2323     
2424     public Integer getPageSize() {
2525         return pageSize;
2626     }
2727 
2828     public void setPageSize(Integer pageSize) {
2929         this.pageSize = pageSize;
3030     }
3131 
3232 }

web 页面 index.jsp

1  1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
2  2 <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
3  3 <%
4  4 String path = request.getContextPath();
5  5 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
6  6 pageContext.setAttribute("basePath", basePath);
7  7 %>
8  8 
9  9 <!DOCTYPE HTML>
10 10 <html>
11 11   <head>
12 12     <title>分页</title>
13 13     <style>
14 14         body{background:url("resource/images/78788.jpg");background-size:cover;}
15 15         .titless{font-size: 34px;text-align: center;color: black;margin-bottom: 16px;}
16 16         .ke_tabbox{min-height:556px;width:900px;background:#f9f9f9;margin:20px auto 0;padding:6px;position:relative;}
17 17             .ke_tabbox .sendMy{text-align: center;
18 18                     font-family: "微软雅黑";
19 19                     font-size: 28px;
20 20                     -webkit-text-fill-color: transparent;
21 21                     background: -webkit-gradient(linear,left top,left bottom,from(#FD8700),to(#FF00B1));
22 22                     -webkit-background-clip: text;
23 23                     margin:8px auto 0;line-height: 35px;}
24 24             .ke_tabbox .ke_table{width:100%;margin-top: 26px;}
25 25             .ke_tabbox  th{background:#ccc;font-weight:bold;}
26 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 27             /*分页相关*/
28 28             .tzPage{font-size: 12px;position: absolute;top: 480px;right: 0px;}
29 29             
30 30             #tbody tr:hover{background:#eaeaea;}
31 31             #tbody .t_mode{padding-right:4px;}
32 32             #tbody .t_avbiaoq:hover{color:#FF6857;transition:.4s}
33 33             #tbody .t_dele{padding-left:4px;}
34 34     
35 35             .tzPage a{text-decoration:none;border:none;color:#7d7d7d;background-color:#f2f2f2;border-radius: 3px;}
36 36             .tzPage a:hover{background:#dd5862;color:#FFF;}
37 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 38             .tzPage .current{background:#dd5862;color:#FFF;border:none;border-radius: 3px;}
39 39             .tzPage .current.prev,.tzPage .current.next{color:#999;border:1px solid #e5e5e5;background:#fff;}
40 40             .tm_psize_go{margin-right:4px;float:left;height:24px;line-height:33px;position:relative;border:1px solid #e5e5e5;color:#999}
41 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 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 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 44             .red{color:red}    
45 45             .green{color:green}
46 46             
47 47             .hideAdd{height: 300px;
48 48                     text-align: center;
49 49                     line-height: 300px;
50 50                     margin-top: 16px;display:none;}
51 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 52     </style>
53 53   </head>
54 54   
55 55   <body>
56 56       <div class="ke_tabbox">
57 57           <p class="titless">分页展示</p>
58 58         <table class="ke_table">
59 59             <thead>
60 60                 <tr>
61 61                     <th style="width:25%">标题</th>
62 62                     <th style="width:25%">音乐人</th>
63 63                     <th style="width:30%">音乐标题</th>
64 64                     <th style="width:20%">发布时间</th>
65 65                 </tr>
66 66             </thead>
67 67             
68 68             <tbody id="tbody" data-itemcount="${coutBlogs}">
69 69                 <c:forEach var="blog" items="${blogs}">
70 70                     <tr>
71 71                         <td><a class="t_avbiaoq" title="${blog.TITLE}">${blog.TITLE}</a></td>
72 72                         <td><a class="t_avbiaoq" title="${blog.MUSICTOR}">${blog.MUSICTOR}</a></td>
73 73                         <td><a class="t_avbiaoq" title="${blog.MUSICTITLE}">${blog.MUSICTITLE}</a></td>
74 74                         <td>${blog.CREATETIME}</td>
75 75                     </tr>
76 76                 </c:forEach>
77 77             </tbody>
78 78         </table>
79 79         <div id="krryPage"></div>
80 80     </div>
81 81     <script type="text/javascript" src="${basePath}/resource/js/jquery-1.11.3.min.js"></script>
82 82     <script type="text/javascript" src="${basePath}/resource/js/krry_page.js"></script>
83 83     <script type="text/javascript">var basePath = "${basePath}";</script>
84 84     <script type="text/javascript">
85 85         
86 86         var krryAdminBlog = {
87 87             initPage:function(itemCount){
88 88                 $("#krryPage").tzPage(itemCount, {
89 89                     num_display_entries : 5, //主体页数
90 90                     num_edge_entries : 4,//边缘页数
91 91                     current_page : 0,//指明选中页码
92 92                     items_per_page : 10, //每页显示多少条
93 93                     prev_text : "上一页",
94 94                     next_text : "下一页",
95 95                     showGo:true,//显示
96 96                     showSelect:false,
97 97                     callback : function(pageNo, psize) {//会回传两个参数，第一个是当前页数，第二个是每页要显示的数量
98 98                         krryAdminBlog.loadData(pageNo,psize);
99 99                     }
100100                 });
101101             },
102102             //设置data参数：pageNo（下一页）：就是当前页数 * 下一页要显示的数量
103103             //            pageSize（下一页）：已经查询出来的数量（pageNo）  + 每页要显示的数量
104104             //在数据库中是  WN <= pageSize and WN > pageNo 来查询分页数据
105105             loadData:function(pageNo,pageSize){
106106                 pageNo = pageNo * pageSize;
107107                 pageSize = pageNo + 10;
108108                 $.ajax({
109109                     type:"post",
110110                     url:basePath+"/loadData",
111111                     data:{pageNo:pageNo,pageSize:pageSize},
112112                     success:function(data){
113113                         if(data){
114114                             var html = "";
115115                             var blogArr = data.blogs;
116116                             for(var i=0,len=blogArr.length;i < len;i++){
117117                                 var json = blogArr[i];
118118                                 html+= "<tr>"+
119119                                 "    <td><a class='t_avbiaoq' title='"+json.TITLE+"'>"+json.TITLE+"</a></td>"+
120120                                 "    <td><a class='t_avbiaoq' title='"+json.NAME+"'>"+json.MUSICTOR+"</a></td>"+
121121                                 "    <td><a class='t_avbiaoq' title='"+json.MUSICTITLE+"'>"+json.MUSICTITLE+"</a></td>"+
122122                                 "    <td>"+json.CREATETIME+"</td>"+
123123                                 "</tr>";
124124                             }
125125                             $("#tbody").html(html);
126126                         }
127127                     }
128128                 });
129129             }
130130         };
131131         
132132         krryAdminBlog.initPage($("#tbody").data("itemcount"));
133133         
134134     </script>
135135   </body>
136136 </html>

分页效果图：

相关链接：

本示例：https://www.ainyi.com/krry_pages

GitHub：https://github.com/Krryxa

音乐博客：https://www.ainyi.com