java ssm框架实现分页功能 (oracle)
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
语法较为复杂,
同样的结果,mysql 的语法是:用一个 LIMIT 就可以解决。
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 0,5
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