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 )WNWHERE WN <= 10 AND WN > 0
語法較為複雜,
同樣的結果,mysql 的語法是:用一個LIMIT 就可以解決。
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
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 <= #{pageSize} AND WN > #{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 * */@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
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> <p>分頁展示</p> <table> <thead> <tr> <th>標題</th> <th>音樂人</th> <th>音樂標題</th> <th>發佈時間</th> </tr> </thead> <tbody id="tbody" data-itemcount="${coutBlogs}"> <c:forEach var="blog" items="${blogs}"> <tr> <td><a>${blog.TITLE}</a></td> <td><a>${blog.MUSICTOR}</a></td> <td><a>${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>分頁效果圖:
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。