使用框架:ssm
数据库:oracle
话说 oracle 的分页查询比 mysql 复杂多了,在这里简单谈一下:
查询 前十条数据:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
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
|
语法较为复杂,
同样的结果,mysql 的语法是:用一个 LIMIT 就可以解决。
1
2
3
4
5
6
7
8
9
10
|
SELECT
id,
title,
create_time as createTime,
musictor,
musictitle
FROM
krry_blog
ORDER BY create_time desc
LIMIT 0,5
|
SSM 框架的搭建,就不多说了,以前的博客有详细介绍,这里就谈谈实现 java web 分页的功能。
用到插件 js : krry_page.js,还有jQuery
mapper 持久层:
BlogMapper.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<? 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 <= #{pageSize} AND WN > #{pageNo}
</ select >
<!-- 查询博客数量 -->
< select id = "countBlogs" resultType = "long" >
SELECT
count(*)
FROM
krry_blog
</ select >
</ mapper >
|
service业务层:
接口类:IBlogService.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
|
<%@ 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' id="codetool">
分页效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。 原文链接:http://www.cnblogs.com/ainyi/p/8598217.html 延伸 · 阅读
精彩推荐
|