java web 实现分页功能

使用框架：ssm

数据库：oracle

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

查询 前十条数据：

 SELECT * FROM(

        SELECT ROWNUM WN,RN.* FROM (

             SELECT

                   id,

                   title,

                   create_time as createTime,

                   musictor,

                   musictitle

              FROM

                  krry_blog

              ORDER BY create_time desc

          )RN

     )WN

 WHERE WN <= 10 AND WN > 0

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

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

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

 SELECT

     id,

     title,

     create_time as createTime,

     musictor,

     musictitle

 FROM

     krry_blog

     ORDER BY create_time desc

 LIMIT 5,3

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

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

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

mapper 持久层：

BlogMapper.java

 package com.krry.mapper;

 import java.util.HashMap;

 import java.util.List;

 import com.krry.entity.Params;

 /**

  *

  * Mapper：操作数据库

  * @author krry

  * @version 1.0.0

  *

  */

 public interface BlogMapper {

     /**

      * 查询所有博客

      * @param params

      * @return

      */

     public List<HashMap<String, Object>> findBlogs(Params params);

     /**

      * 计算博客数量

      * com.krry.dao.admin

      * 方法名：countBlogs

      * @author krry

      * @param params

      * @return int

      * @exception

      * @since  1.0.0

      */

     public long countBlogs();

 }

BlogMapper.xml

 <?xml version="1.0" encoding="UTF-8" ?>

 <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"

 "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

 <mapper namespace="com.krry.mapper.BlogMapper" >

     <!-- 分页查询所有的博客信息 -->

     <select id="findBlogs" resultType="java.util.HashMap" parameterType="Params">

         SELECT * FROM(

             SELECT ROWNUM WN,RN.* FROM (

                 SELECT

                     id,

                     title,

                     create_time as createTime,

                     musictor,

                     musictitle

                 FROM

                     krry_blog

                 ORDER BY create_time desc

             )RN

         )WN

         WHERE WN &lt;= #{pageSize} AND WN &gt; #{pageNo}

     </select>

     <!-- 查询博客数量 -->

     <select id="countBlogs" resultType="long">

         SELECT

             count(*)

         FROM

             krry_blog

     </select>

 </mapper>

service业务层：

接口类：IBlogService.java

 package com.krry.service;

 import java.util.HashMap;

 import java.util.List;

 import javax.servlet.http.HttpServletRequest;

 import org.apache.ibatis.annotations.Param;

 import com.krry.entity.Blog;

 import com.krry.entity.Params;

 /**

  * service层：处理业务逻辑（impl里面实现）

  * @author asusaad

  *

  */

 public interface IBlogService {

     /**

      * 分页查询所有博客

      * @param params

      * @return

      */

     public List<HashMap<String, Object>> findBlogs(Params params);

     /**

      * 计算博客数量

      * @param params

      * @return

      */

     public long countBlogs();

 }

impl 实现类：BlogService.java

 package com.krry.service.impl;

 import java.util.HashMap;

 import java.util.List;

 import org.springframework.beans.factory.annotation.Autowired;

 import org.springframework.stereotype.Service;

 import org.springframework.web.servlet.ModelAndView;

 import com.krry.entity.Params;

 import com.krry.mapper.BlogMapper;

 import com.krry.service.IBlogService;

 /**

  * 实现service层接口

  * @author asusaad

  *

  */

 @Service

 public class BlogService implements IBlogService{

     @Autowired

     private BlogMapper blogMapper;

     /**

      * 查询博客

      */

     public List<HashMap<String, Object>> findBlogs(Params params) {

         //查询博客信息

         List<HashMap<String, Object>> blog = blogMapper.findBlogs(params);

         return blog;

     }

     /**

      * 计算博客数量

      * @param params

      * @return

      */

     public long countBlogs(){

         long coutBlogs = blogMapper.countBlogs();

         return coutBlogs;

     }

 }

controller控制层：

KrryController.java

 package com.krry.controller;

 import java.util.HashMap;

 import java.util.List;

 import org.springframework.beans.factory.annotation.Autowired;

 import org.springframework.stereotype.Controller;

 import org.springframework.web.bind.annotation.RequestMapping;

 import org.springframework.web.bind.annotation.ResponseBody;

 import org.springframework.web.servlet.ModelAndView;

 import com.krry.entity.Params;

 import com.krry.service.IBlogService;

 /**

  * KrryController

  * controller层，作为请求转发

  * @author asusaad

  *

  */

 @Controller  //表示是多例模式，每个用户返回的web层是不一样的

 public class KrryController {

     @Autowired

     private IBlogService blogService;

     /**

      * 首页，并且分页查询

      * @return

      */

     @RequestMapping("/index")

     public ModelAndView index(Params params){

         params.setPageNo(0);

         params.setPageSize(10); //一开始只查询10条

         //调用业务层

         List<HashMap<String, Object>> blogs = blogService.findBlogs(params);

         //查询博客数量

         long coutBlogs = blogService.countBlogs();

         ModelAndView modelAndView = new ModelAndView();

         modelAndView.addObject("blogs", blogs);

         modelAndView.addObject("coutBlogs", coutBlogs);

         modelAndView.setViewName("index");

         return modelAndView;

     }

     /**

      * ajax请求 的 分页查询

      * @param params

      * @return

      */

     @ResponseBody

     @RequestMapping("/loadData")

     public HashMap<String, Object> loadData(Params params){

         HashMap<String, Object> map = new HashMap<String, Object>();

         List<HashMap<String, Object>> blogs = blogService.findBlogs(params);

         map.put("blogs", blogs);

         return map;

     }

 }

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

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

Blog.java

 package com.krry.entity;

 /**

  *

  * User

  * @author krry

  * @version 1.0.0

  *

  */

 public class Blog {

     // 主键

     private String id;

     //博客标题

     private String title;

     //音乐作者

     private String musictor;

     //音乐标题

     private String musictitle;

     //创建时间

     private String createTime;

     public Blog(String id, String title, String musictor, String musictitle,

             String createTime) {

         this.id = id;

         this.title = title;

         this.musictor = musictor;

         this.musictitle = musictitle;

         this.createTime = createTime;

     }

     public String getId() {

         return id;

     }

     public void setId(String id) {

         this.id = id;

     }

     public String getTitle() {

         return title;

     }

     public void setTitle(String title) {

         this.title = title;

     }

     public String getMusictor() {

         return musictor;

     }

     public void setMusictor(String musictor) {

         this.musictor = musictor;

     }

     public String getMusictitle() {

         return musictitle;

     }

     public void setMusictitle(String musictitle) {

         this.musictitle = musictitle;

     }

     public String getCreateTime() {

         return createTime;

     }

     public void setCreateTime(String createTime) {

         this.createTime = createTime;

     }

 }

Params.java

 package com.krry.entity;

 /**

  *

  * Params

  * @author krry

  * @version 1.0.0

  *

  */

 public class Params {

     private Integer pageSize = 0;

     private Integer pageNo = 0;

     public Integer getPageNo() {

         return pageNo;

     }

     public void setPageNo(Integer pageNo) {

         this.pageNo = pageNo;

     }

     public Integer getPageSize() {

         return pageSize;

     }

     public void setPageSize(Integer pageSize) {

         this.pageSize = pageSize;

     }

 }

web 页面 index.jsp

 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

 <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

 <%

 String path = request.getContextPath();

 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

 pageContext.setAttribute("basePath", basePath);

 %>

 <!DOCTYPE HTML>

 <html>

   <head>

     <title>分页</title>

     <style>

         body{background:url("resource/images/78788.jpg");background-size:cover;}

         .titless{font-size: 34px;text-align: center;color: black;margin-bottom: 16px;}

         .ke_tabbox{min-height:556px;width:900px;background:#f9f9f9;margin:20px auto 0;padding:6px;position:relative;}

             .ke_tabbox .sendMy{text-align: center;

                     font-family: "微软雅黑";

                     font-size: 28px;

                     -webkit-text-fill-color: transparent;

                     background: -webkit-gradient(linear,left top,left bottom,from(#FD8700),to(#FF00B1));

                     -webkit-background-clip: text;

                     margin:8px auto 0;line-height: 35px;}

             .ke_tabbox .ke_table{width:100%;margin-top: 26px;}

             .ke_tabbox  th{background:#ccc;font-weight:bold;}

             .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;}

             /*分页相关*/

             .tzPage{font-size: 12px;position: absolute;top: 480px;right: 0px;}

             #tbody tr:hover{background:#eaeaea;}

             #tbody .t_mode{padding-right:4px;}

             #tbody .t_avbiaoq:hover{color:#FF6857;transition:.4s}

             #tbody .t_dele{padding-left:4px;}

             .tzPage a{text-decoration:none;border:none;color:#7d7d7d;background-color:#f2f2f2;border-radius: 3px;}

             .tzPage a:hover{background:#dd5862;color:#FFF;}

             .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;}

             .tzPage .current{background:#dd5862;color:#FFF;border:none;border-radius: 3px;}

             .tzPage .current.prev,.tzPage .current.next{color:#999;border:1px solid #e5e5e5;background:#fff;}

             .tm_psize_go{margin-right:4px;float:left;height:24px;line-height:33px;position:relative;border:1px solid #e5e5e5;color:#999}

             #tm_pagego{border-radius:3px;height:18px;width:30px;float:left;text-align:center;border:1px solid #e5e5e5;line-height: 22px;color:#999}

             .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;}

             .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;}

             .red{color:red}

             .green{color:green}

             .hideAdd{height: 300px;

                     text-align: center;

                     line-height: 300px;

                     margin-top: 16px;display:none;}

             .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;}

     </style>

   </head>

   <body>

       <div class="ke_tabbox">

           <p class="titless">分页展示</p>

         <table class="ke_table">

             <thead>

                 <tr>

                     <th style="width:25%">标题</th>

                     <th style="width:25%">音乐人</th>

                     <th style="width:30%">音乐标题</th>

                     <th style="width:20%">发布时间</th>

                 </tr>

             </thead>

             <tbody id="tbody" data-itemcount="${coutBlogs}">

                 <c:forEach var="blog" items="${blogs}">

                     <tr>

                         <td><a class="t_avbiaoq" title="${blog.TITLE}">${blog.TITLE}</a></td>

                         <td><a class="t_avbiaoq" title="${blog.MUSICTOR}">${blog.MUSICTOR}</a></td>

                         <td><a class="t_avbiaoq" title="${blog.MUSICTITLE}">${blog.MUSICTITLE}</a></td>

                         <td>${blog.CREATETIME}</td>

                     </tr>

                 </c:forEach>

             </tbody>

         </table>

         <div id="krryPage"></div>

     </div>

     <script type="text/javascript" src="${basePath}/resource/js/jquery-1.11.3.min.js"></script>

     <script type="text/javascript" src="${basePath}/resource/js/krry_page.js"></script>

     <script type="text/javascript">var basePath = "${basePath}";</script>

     <script type="text/javascript">

         var krryAdminBlog = {

             initPage:function(itemCount){

                 $("#krryPage").tzPage(itemCount, {

                     num_display_entries : 5, //主体页数

                     num_edge_entries : 4,//边缘页数

                     current_page : 0,//指明选中页码

                     items_per_page : 10, //每页显示多少条

                     prev_text : "上一页",

                     next_text : "下一页",

                     showGo:true,//显示

                     showSelect:false,

                     callback : function(pageNo, psize) {//会回传两个参数，第一个是当前页数，第二个是每页要显示的数量

                         krryAdminBlog.loadData(pageNo,psize);

                     }

                 });

             },

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

             //            pageSize（下一页）：已经查询出来的数量（pageNo）  + 每页要显示的数量

             //在数据库中是  WN <= pageSize and WN > pageNo 来查询分页数据

             loadData:function(pageNo,pageSize){

                 pageNo = pageNo * pageSize;

                 pageSize = pageNo + 10;

                 $.ajax({

                     type:"post",

                     url:basePath+"/loadData",

                     data:{pageNo:pageNo,pageSize:pageSize},

                     success:function(data){

                         if(data){

                             var html = "";

                             var blogArr = data.blogs;

                             for(var i=0,len=blogArr.length;i < len;i++){

                                 var json = blogArr[i];

                                 html+= "<tr>"+

                                 "    <td><a class='t_avbiaoq' title='"+json.TITLE+"'>"+json.TITLE+"</a></td>"+

                                 "    <td><a class='t_avbiaoq' title='"+json.NAME+"'>"+json.MUSICTOR+"</a></td>"+

                                 "    <td><a class='t_avbiaoq' title='"+json.MUSICTITLE+"'>"+json.MUSICTITLE+"</a></td>"+

                                 "    <td>"+json.CREATETIME+"</td>"+

                                 "</tr>";

                             }

                             $("#tbody").html(html);

                         }

                     }

                 });

             }

         };

         krryAdminBlog.initPage($("#tbody").data("itemcount"));

     </script>

   </body>

 </html>

分页效果图：

相关链接：

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

GitHub：https://github.com/Krryxa

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

java ssm框架实现分页功能 （oracle）的更多相关文章

  1. SSM框架——实现分页和搜索分页

    登录|注册     在路上 在路上,要懂得积累:在路上,要学会放下:我在路上!Stay hungry,Stay foolish.       目录视图 摘要视图 订阅 [公告]博客系统优化升级     ...

  2. SSM框架实现分页

    SSM框架实现分页 1,.首先创建一个分页的工具类 package cn.page.po; import java.io.Serializable; public class Page impleme ...

  3. java ssm框架 mapper文件里的#符号和$符号的区别

    Java SSM框架里面,Mapper.xml文件 (一)#符号生成的sql语句是作为传参的 <!-- 获得数据列表(包括课程相关信息) --> <select id="G ...

  4. DRF框架中分页功能接口

    目录 DRF框架中分页功能接口 DRF框架中分页功能接口 一.在框架中提供来三个类来实现分页功能,PageNumberPagination.LimitOffsetPagination.CursorPa ...

  5. SSM框架下分页的实现（封装page.java和List<?>）

    之前写过一篇博客  java分页的实现(后台工具类和前台jsp页面),介绍了分页的原理. 今天整合了Spring和SpringMVC和MyBatis,做了增删改查和分页,之前的逻辑都写在了Servle ...

  6. Java SSM框架之MyBatis3（三）Mybatis分页插件PageHelper

    引言 对于使用Mybatis时,最头痛的就是写分页,需要先写一个查询count的select语句,然后再写一个真正分页查询的语句,当查询条件多了之后,会发现真不想花双倍的时间写count和select ...

  7. Java SSM 框架相关基础面试题

    一.Spring 面试题 1. Spring 在 SSM 中起什么作用? Spring 是轻量级框架,作用是作为 Bean 工厂,用来管理 Bean 的声明周期和框架集成. Spring 的两大核心: ...

  8. java SSM框架单元测试最佳实战代码

    具体的代码参考链接:https://pan.baidu.com/s/1e9UTyidi4OMBwYydhwH-0g 密码:rmvs 本教程采用的是对单元测试的dao层.service层.control ...

  9. java SSM 框架 多数据源 代码生成器 websocket即时通讯 shiro redis 后台框架源码

    A 调用摄像头拍照,自定义裁剪编辑头像 [新录针对本系统的视频教程,手把手教开发一个模块,快速掌握本系统]B 集成代码生成器 [正反双向](单表.主表.明细表.树形表,开发利器)+快速构建表单;  技 ...

随机推荐

  1. 关于Properties类常用的操作

    import java.io.*;import java.util.Enumeration;import java.util.Properties;/** * 关于Properties类常用的操作 * ...

  2. 1.10 tuple 元组

    元组(tuple)属于不可变序列 tuple特性: 特性一:可包含任意对象的有序集合 特性二:通过下标索引访问元素 特性三:固定长度,异质,可任意嵌套 特性四:不支持原位改变 特性五:存储机制:对象引 ...

  3. HDU - 4135 Co-prime 容斥定理

    题意:给定区间和n,求区间中与n互素的数的个数, . 思路:利用容斥定理求得先求得区间与n互素的数的个数,设表示区间中与n互素的数的个数, 那么区间中与n互素的数的个数等于.详细分析见求指定区间内与n ...

  4. JavaScript网页全屏API

    在大多数的浏览器中都有实现网页全屏显示的功能,并且大部分浏览器实现全屏显示和退出全屏显示的快捷键通常是F11和Esc两个按键.如今,W3C已经制定了关于网页全屏显示的API,利用这个API 可以实现网 ...

  5. caffe错误

    一些caffe错误 训练时很快梯度爆炸,loss猛增至nan 如果找不到数据上的原因的话,可以怀疑caffe框架有问题,换用其它版本试试.比如我遇到的问题是在训练时使用了Accuracy层,而该层的实 ...

  6. Vmware下centos与windows能ping通并能上网

    1.桥接模式 2.NAT模式 3.Host-Only模式 1.桥接模式 vim /etc/udev/rules.d/70-persistent-net.rules 与/etc/sysconfig/ne ...

  7. MySQL ODBC 3.51 Driver - Access Denied

    MySQL ODBC 3.51 Driver - Access Denied   同事反馈在应用服务器上配置MySQL ODBC 3.51 Drive时,测试连接MySQL数据库时报下面错误: ERR ...

  8. 使用sql语句获取数据库表的信息

    下面的sql语句可以查看表的信息.其中modify_date和create_date可以根据表的修改时间来查看.如果不需要删除后,就能看到所有表的字段信息 ) PERCENT d.name AS 表名 ...

  9. 实战DeviceIoControl 之四：获取硬盘的详细信息

    Q 用IOCTL_DISK_GET_DRIVE_GEOMETRY或IOCTL_STORAGE_GET_MEDIA_TYPES_EX只能得到很少的磁盘参数,我想获得包括硬盘序列号在内的更加详细的信息,有 ...

  10. GitHub上最火的Android开源项目整理

    这篇文章介绍GitHub上另外34个非常受欢迎的Android开源项目,在这些项目中,你又在用或用过哪些呢? 41. android-swipelistview SwipeListView是一个And ...