Java web implements the paging function and share it with everyone, as follows:
Use framework:ssm
Database: oracle
Speaking of oracle's pagination query is much more complicated than mysql. Let's briefly talk about it here:
Query the first ten data:
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
The grammar is more complicated.
With the same result, the syntax of mysql is: it can be solved with a LIMIT.
SELECT id, title, create_time as createTime, musictor, musictitleFROM krry_blog ORDER BY create_time descLIMIT 0,5
I won’t talk about the construction of the SSM framework. I have introduced it in detail in the previous blog. Here I will talk about the function of implementing java web pagination.
Use plugin js: krry_page.js, and jQuery
mapper persistence layer:
BlogMapper.java
package com.krry.mapper;import java.util.HashMap;import java.util.List;import com.krry.entity.Params;/** * * Mapper: Operate database* @author krry * @version 1.0.0 * */public interface BlogMapper { /** * Query all blogs* @param params * @return */ public List<HashMap<String, Object>> findBlogs(Params params); /** * Calculate the number of blogs* com.krry.dao.admin * Method name: 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" > <!-- Pagination query all blog information--> <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> <!-- Query the number of blogs--> <select id="countBlogs" resultType="long"> SELECT count(*) FROM krry_blog </select> </mapper>Service business layer:
Interface class: 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 layer: handle business logic (implemented in impl) * @author asusaad * */public interface IBlogService { /** * Pagination query for all blogs* @param params * @return */ public List<HashMap<String, Object>> findBlogs(Params params); /** * Calculate the number of blogs* @param params * @return */ public long countBlogs(); } impl implementation class: 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;/** * Implementing service layer interface* @author asusaad * */@Servicepublic class BlogService implements IBlogService{ @Autowired private BlogMapper blogMapper; /** * Query blog*/ public List<HashMap<String, Object>> findBlogs(Params params) { //Query blog information List<HashMap<String, Object>> blog = blogMapper.findBlogs(params); return blog; } /** * Calculate the number of blogs* @param params * @return */ public long countBlogs(){ long coutBlogs = blogMapper.countBlogs(); return coutBlogs; } }Controller control layer:
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 layer, forwarded as request* @author asusaad * */@Controller // means that it is a multi-case pattern, and the web layer returned by each user is different public class KrryController { @Autowired private IBlogService blogService; /** * Home page, and pagination query* @return */ @RequestMapping("/index") public ModelAndView index(Params params){ params.setPageNo(0); params.setPageSize(10); //At the beginning, only 10 items are queried //Calling the business layer List<HashMap<String, Object>> blogs = blogService.findBlogs(params); //Query the number of blogs long coutBlogs = blogService.countBlogs(); ModelAndView modelAndView = new ModelAndView(); modelAndView.addObject("blogs", blogs); modelAndView.addObject("coutBlogs", coutBlogs); modelAndView.setViewName("index"); return modelAndView; } /** * Pagination query for ajax request* @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; } }There are two entity classes here, which are used as the injected blog for database query, and two parameters for pagination query Params:
Set data parameters: pageNo (next page): is the number of current pages* The quantity to be displayed on the next page pageSize (next page): the quantity that has been queryed (pageNo) + the quantity to be displayed on each page
In the database, it is WN <= pageSize and WN > pageNo to query page data
Blog.java
package com.krry.entity;/** * * User * @author krry * @version 1.0.0 * */public class Blog { // primary key private String id; // blog title private String title; // music author private String music musictitle; // music title private String musictitle; // creation time 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 music; } public void setMusictor(String music) { 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 page 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>Pagination</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: "Microsoft Yahei"; 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;} /*pagination-related*/ .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 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>Pagination display</p> <table> <thead> <tr> <th>Title</th> <th>Music Man</th> <th>Music Title</th> <th>Published Time</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.MUSICTOR}</a></td> <td><a>${blog.MUSICTLE}</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 of main pages num_edge_entries : 4, //Num of edge pages current_page : 0, //Specify the selected page number items_per_page : 10, //How many prev_text display per page: "Previous page", next_text : "Next page", showGo:true, //Show showSelect:false, callback : function(pageNo, psize) {//Two parameters will be passed back. The first is the number of pages, and the second is the number of pages to be displayed in each page krryAdminBlog.loadData(pageNo,psize); } }); }, //Set data parameters: pageNo (next page): the number of pages to be displayed in the next page* The number of pages to be displayed in the next page//pageSize (next page): the number of queryed (pageNo) + the number of pages to be displayed in each page// In the database, it is WN <= pageSize and WN > pageNo to query the paged data 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.MUSICTLE+"'>"+json.MUSICTITLE+"</a></td>"+ " <td>"+json.CREATETIME+"</td>"+ "</tr>"; } $("#tbody").html(html); } } }); } }; krryAdminBlog.initPage($("#tbody").data("itemcount")); </script> </body></html>Pagination renderings:
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.