使用框架：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 )WNWHERE 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, musictitleFROM krry_blog ORDER BY create_time descLIMIT 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 * */@Servicepublic 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 延伸 · 閱讀
精彩推薦
最近更新 編輯推薦
閱讀排行
|
