This blog introduces the pagination function based on Spring Data's orm framework plus the Jquery.pagination plug-in.
This blog is based on a github open source project under development. The project code address is: https://github.com/u014427391/jeepatform
Welcome to star (collection) or download to learn, and it is still developing...
Introduce the Spring Data framework
spring Data : A subproject of Spring. Used to simplify database access and support NoSQL and relational data storage.
The following is the NoSQL storage supported by the SpringData project:
* MongoDB (Document Database)
* Neo4j (Graphic Database)
* Redis (key/value store)
* Hbase (column family database)
Relational data storage technologies supported by SpringData projects:
* JDBC
* JPA
JPA Spring Data: Dedicated to reducing the development volume of the Data Access Layer (DAO). Developers just need to write the persistence layer interface, and then other frameworks will help programmers implement them.
Development steps:
【Spring Data Implements Data Acquisition】
This project uses maven, so you can refer to my maven configuration:
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd"> <parent> <artifactId>muses</artifactId> <groupId>org.muses</groupId> <version>1.0-SNAPSHOT</version> </parent> <modelVersion>4.0.0</modelVersion> <artifactId>jeepartform-admin</artifactId> <packaging>war</packaging> <name>jeepartform-admin Maven Webapp</name> <url>http://maven.apache.org</url> <properties> <spring.version>4.1.5.RELEASE</spring.version> <spring-data-jpa.version>1.4.2.RELEASE</spring-data-jpa.version> <spring-data-commons.version>1.6.2.RELEASE</spring-data-commons.version> <hibernate.version>4.3.8.Final</hibernate.version> <shiro.version>1.2.3</shiro.version> <lucene.version>4.7.2</lucene.version> <druid.version>1.0.9</druid.version> <poi.version>3.7</poi.version> </properties> <dependencies> <!-- module start --> <dependency> <groupId>org.muses</groupId> <artifactId>jeepatform-core</artifactId> <version>${jeepatform.core.version}</version> </dependency> <dependency> <groupId>org.muses</groupId> <artifactId>jeepatform-common</artifactId> <version>1.0-SNAPSHOT</version> </dependency> <dependency> <groupId>org.muses</groupId> <artifactId>jeepatform-oss</artifactId> <version>${jeepatform.oss.version}</version> </dependency> <dependency> <groupId>org.muses</groupId> <artifactId>jeepatform-upms</artifactId> <version>1.0-SNAPSHOT</version> </dependency> <!-- moudle end--> <!-- servlet start--> <dependency> <groupId>javax.servlet</groupId> <artifactId>servlet-api</artifactId> <version>2.5</version> <scope>provided</scope> </dependency> <!-- servlet end --> <!-- jstl start--> <dependency> <groupId>jstl</groupId> <artifactId>jstl</artifactId> <version>1.2</version> </dependency> <dependency> <groupId>taglibs</groupId> <artifactId>standard</artifactId> <version>1.1.2</version> </dependency> <!-- jstl end --> <!-- log4j start--> <dependency> <groupId>log4j</groupId> <artifactId>log4j</artifactId> <version>${log4j.version}</version> </dependency> <!-- log4j end--> <!-- json parsing required jar start--> <dependency> <groupId>commons-beanutils</groupId> <artifactId>commons-beanutils</artifactId> <version>1.8.3</version> </dependency> <dependency> <groupId>commons-collections</groupId> <artifactId>commons-collections</artifactId> <version>3.2.1</version> </dependency> <dependency> <groupId>net.sf.ezmorph</groupId> <artifactId>ezmorph</artifactId> <version>1.0.6</version> </dependency> <dependency> <groupId>commons-lang</groupId> <artifactId>commons-lang</artifactId> <version>2.5</version> </dependency> <dependency> <groupId>commons-logging</groupId> <artifactId>commons-logging</artifactId> <version>1.2</version> </dependency> <dependency> <groupId>net.sf.json-lib</groupId> <artifactId>json-lib</artifactId> <version>2.4</version> <type>jar</type> <classifier>jdk15</classifier> <scope>compile</scope> </dependency> <!-- jar end required for json parsing --> <!-- mysql start--> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>${mysql.version}</version> </dependency> <!-- mysql end--> <!-- commons --> <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>2.0.1</version> </dependency> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.2.2</version> </dependency> <!-- commons --> <!-- spring framework start--> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-core</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-beans</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-context</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-context-support</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-jdbc</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-tx</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-test</artifactId> <version>${spring.version}</version> <scope>test</scope> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-web</artifactId> <version>${spring.version}</version> </dependency> <!-- spring framework end --> <!-- spring aop start--> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-aop</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.aspectj</groupId> <artifactId>aspectjweaver</artifactId> <version>1.6.10</version> </dependency> <!-- spring aop end --> <!-- springMVC start--> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>${spring.version}</version> </dependency> <!-- springMVC end --> <!-- spring data start--> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-orm</artifactId> <version>${spring.version}</version> </dependency> <dependency> <groupId>org.springframework.data</groupId> <artifactId>spring-data-jpa</artifactId> <version>${spring-data-jpa.version}</version> </dependency> <dependency> <groupId>org.springframework.data</groupId> <artifactId>spring-data-commons</artifactId> <version>${spring-data-commons.version}</version> </dependency> <!-- spring data end --> <!-- hibernate jpa start--> <dependency> <groupId>org.hibernate.javax.persistence</groupId> <artifactId>hibernate-jpa-2.1-api</artifactId> <version>1.0.0.Final</version> </dependency> <dependency> <groupId>org.hibernate</groupId> <artifactId>hibernate-core</artifactId> <version>${hibernate.version}</version> </dependency> <dependency> <groupId>org.hibernate</groupId> <artifactId>hibernate-entitymanager</artifactId> <version>${hibernate.version}</version> </dependency> <!-- hibernate jpa end --> <!-- hibernate echache start--> <dependency> <groupId>org.slf4j</groupId> <artifactId>slf4j-api</artifactId> <version>1.6.1</version> </dependency> <dependency> <groupId>net.sf.ehcache</groupId> <artifactId>ehcache-core</artifactId> <version>2.5.0</version> </dependency> <dependency> <groupId>org.hibernate</groupId> <artifactId>hibernate-ehcache</artifactId> <version>${hibernate.version}</version> </dependency> <!-- hibernate echache end --> <!-- Alibaba's connection pool druid start--> <dependency> <groupId>com.alibaba</groupId> <artifactId>druid</artifactId> <version>${druid.version}</version> </dependency> <!-- Alibaba's connection pool druid end--> <!-- hibernate echache end--> <!-- hibernate echache end--> <!-- hibernate echache end--> <!-- Alibaba's connection pool druid end--> <!-- shiro start--> <dependency> <groupId>org.apache.shiro</groupId> <artifactId>shiro-all</artifactId> <version>${shiro.version}</version> </dependency> <!-- shiro end--> <!-- velocity start--> <dependency> <groupId>org.apache.velocity</groupId> <artifactId>velocity</artifactId> <version>1.6</version> </dependency> <dependency> <groupId>org.apache.velocity</groupId> <artifactId>velocity-tools</artifactId> <version>2.0</version> </dependency> <!-- velocity end--> <!-- lucene full text search engine start--> <dependency> <groupId>org.apache.lucene</groupId> <artifactId>lucene-core</artifactId> <version>${lucene.version}</version> </dependency> <dependency> <groupId>org.apache.lucene</groupId> <artifactId>lucene-analyzers-common</artifactId> <version>${lucene.version}</version> </dependency> <dependency> <groupId>org.apache.lucene</groupId> <artifactId>lucene-queryparser</artifactId> <version>${lucene.version}</version> </dependency> <dependency> <groupId>org.apache.lucene</groupId> <artifactId>lucene-memory</artifactId> <version>${lucene.version}</version> </dependency> <dependency> <groupId>org.apache.lucene</groupId> <artifactId>lucene-highlighter</artifactId> <version>${lucene.version}</version> </dependency> <!-- Note that IKAnalyzer does not have maven coordinates, please add them to the local repository yourself --> <dependency> <groupId>org.wltea.analyzer</groupId> <artifactId>IKAnalyzer</artifactId> <version>2012FF_u1</version> <scope>system</scope> <systemPath>${basedir}/src/main/webapp/WEB-INF/lib/IKAnalyzer2012FF_u1.jar</systemPath> </dependency> <!-- lucene full text search engine end --> <!-- log4j start--> <dependency> <groupId>log4j</groupId> <artifactId>log4j</artifactId> <version>${log4j.version}</version> </dependency> <!-- log4j end--> <!-- json parsing required jar start--> <dependency> <groupId>commons-beanutils</groupId> <artifactId>commons-beanutils</artifactId> <version>1.8.3</version> </dependency> <dependency> <groupId>commons-collections</groupId> <artifactId>commons-collections</artifactId> <version>3.2.1</version> </dependency> <dependency> <groupId>net.sf.ezmorph</groupId> <artifactId>ezmorph</artifactId> <version>1.0.6</version> </dependency> <dependency> <groupId>commons-lang</groupId> <artifactId>commons-lang</artifactId> <version>2.5</version> </dependency> <dependency> <groupId>commons-logging</groupId> <artifactId>commons-logging</artifactId> <version>1.2</version> </dependency> <dependency> <groupId>net.sf.json-lib</groupId> <artifactId>json-lib</artifactId> <version>2.4</version> <type>jar</type> <classifier>jdk15</classifier> <scope>compile</scope> </dependency> <!-- json parsing jar end --> <!-- poi start--> <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi</artifactId> <version>${poi.version}</version> </dependency> <!-- poi end--> <!-- email start--> <dependency> <groupId>com.sun.mail</groupId> <artifactId>javax.mail</artifactId> <version>1.5.6</version> </dependency> <!-- email end--> </dependencies> <build> <finalName>jeepatform-admin</finalName> </build></project> Design the database and write an entity class:
package org.muses.jeepatform.model.entity;import java.util.Date;import java.util.Set;import javax.persistence.CascadeType;import javax.persistence.Column;import javax.persistence.Entity;import javax.persistence.FetchType;import javax.persistence.GeneratedValue;import javax.persistence.GenerationType;import javax.persistence.Id;import javax.persistence.JoinColumn;import javax.persistence.JoinTable;import javax.persistence.ManyToMany;import javax.persistence.Table;import javax.persistence.Temporal;import javax.persistence.TemporalType;/** * Entity class of user information* @author Nicky */@Entity@Table(name="sys_user")public class User { /** User Id**/ private int id; /** User name**/ private String username; /** User password**/ private String password; /** Mobile phone number**/ private int phone; /** Gender**/ private String sex; /** Email**/ private String email; /** Note**/ private String mark; /** User level**/ private String rank; /** Last time**/ private Date lastLogin; /** Login ip**/ private String loginIp; /** Image path**/ private String imageUrl; /** Registration time**/ private Date regTime; /** Whether the account is locked**/ private Boolean locked = Boolean.FALSE; private Set<Role> roles; @GeneratedValue(strategy=GenerationType.IDENTITY) @Id public int getId() { return id; } public void setId(int id) { this.id = id; } @Column(unique=true,length=100,nullable=false) public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } @Column(length=100,nullable=false) public String getPassword() { return password; } public void setPassword(String password) { this.password = password; } public int getPhone() { return phone; } public void setPhone(int phone) { this.phone = phone; } @Column(length=6) public String getSex() { return sex; } public void setSex(String sex) { this.sex = sex; } @Column(length=100) public String getEmail() { return email; } public void setEmail(String email) { this.email = email; } @Column(length=30) public String getMark() { return mark; } public void setMark(String mark) { this.mark = mark; } @Column(length=10) public String getRank() { return rank; } public void setRank(String rank) { this.rank = rank; } @Temporal(TemporalType.DATE) public Date getLastLogin() { return lastLogin; } public void setLastLogin(Date lastLogin) { this.lastLogin = lastLogin; } @Column(length=100) public String getLoginIp() { return loginIp; } public void setLoginIp(String loginIp) { this.loginIp = loginIp; } @Column(length=100) public String getImageUrl() { return imageUrl; } public void setImageUrl(String imageUrl) { this.imageUrl = imageUrl; } @Temporal(TemporalType.DATE) @Column(nullable=false) public Date getRegTime() { return regTime; } public void setRegTime(Date regTime) { this.regTime = regTime; } public Boolean getLocked() { return locked; } public void setLocked(Boolean locked) { this.locked = locked; }}Write interface to implement the PagingAndSortingRepository interface of Spring Data framework
package org.muses.jeepartform.repository;import org.muses.jeepartform.model.entity.User;import org.springframework.data.domain.Page;import org.springframework.data.domain.Pageable;import org.springframework.data.domain.Pageable;import org.springframework.data.jpa.repository.JpaRepository;import org.springframework.data.repository.Query;import org.springframework.data.repository.PagingAndSortingRepository;import org.springframework.data.repository.query.Param;import java.util.Date;public interface UserRepository extends PagingAndSortingRepository<User, Integer> { /*User findByUsername(String username); @Query("from User u where u.username=:username and u.password=:password") User findByUsernameAndPassword(@Param("username") String username, @Param("password") String password); @Query("from User u where u.id=:id") User findById(@Param("id") int id); @Query("from User u where date_format(u.lastLogin,'yyyy-MM-dd') between date_format((:startDate),'yyyy-MM-dd') and date_format((:endDate),'yyyy-MM-dd')") Page<User> searchU(@Param("startDate")Date startDate,@Param("endDate")Date endDate, Pageable pageable);*/}Business class implementation:
package org.muses.jeepatform.service;import java.util.*;import org.muses.jeepatform.model.entity.User;import org.muses.jeepatform.repository.UserRepository;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.data.domain.Page;import org.springframework.data.domain.PageRequest;import org.springframework.data.domain.Sort;import org.springframework.data.jpa.domain.Specification;import org.springframework.steretype.Service;import org.springframework.transaction.annotation.Transactional;import javax.persistence.criteria.CriteriaBuilder;import javax.persistence.criteria.CriteriaQuery;/** * @description Business class for user information management* @author Nicky * @date March 6, 2017*/@Servicepublic class UserService { @Autowired UserRepository userRepository; /** * Build PageRequest object* @param num * @param size * @param asc * @param string * @return */ private PageRequest buildPageRequest(int num, int size, Sort.Direction asc, String string) { return new PageRequest(num-1, size,null,string); } /** * Get all menu information and display it on pages* @param pageNo * Current number of pages* @param pageSize * Number of pages per page* @return */ @Transactional public Page<User> findAll(int pageNo, int pageSize, Sort.Direction dir, String str){ PageRequest request = buildPageRequest(pageNo, pageSize, dir, str); Page<User> users = userRepository.findAll(request); return users; }}The control class adopts the SpringMVC framework, first write a baseController to implement some general functions:
package org.muses.jeepatform.web.controller;import javax.servlet.http.HttpServletRequest;import org.slf4j.Logger;import org.slf4j.LoggerFactory;import org.springframework.web.context.request.RequestContextHolder;import org.springframework.web.context.request.ServletRequestAttributes;import org.springframework.web.servlet.ModelAndView;public class BaseController { Logger log = null; /** * Get log object* @return */ public Logger getInstance(){ if(log == null){ log = LoggerFactory.getLogger(BaseController.class); } return log; } /** * Get request object*/ public HttpServletRequest getRequest() { HttpServletRequest request = ((ServletRequestAttributes)RequestContextHolder.getRequestAttributes()).getRequest(); return request; } /** * Get ModelAndView */ public ModelAndView getModelAndView(){ return new ModelAndView(); }}Control class implementation:
package org.muses.jeepatform.web.controller;import net.sf.json.JSONArray;import net.sf.json.JSONObject;import net.sf.json.JsonConfig;import org.apache.commons.collections.map.HashedMap;import org.muses.jeepatform.core.Constants;import org.muses.jeepatform.core.ExcelViewWrite;import org.muses.jeepatform.core.JavaEmailSender;import org.muses.jeepatform.model.entity.User;import org.muses.jeepatform.service.UserService;import org.muses.jeepatform.utils.DateJsonValueProcessor;import org.muses.jeepatform.utils.DateUtils;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.data.domain.Page;import org.springframework.data.domain.Sort;import org.springframework.steretype.Controller;import org.springframework.ui.Model;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.bind.annotation.ResponseBody;import org.springframework.web.servlet.ModelAndView;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.PrintWriter;import java.util.*;/** * Created by Nicky on 2017/7/29. */@RequestMapping("/user")@Controllerpublic class UserController extends BaseController{ @Autowired UserService userService; /** * Query all administrator information and display it on pages* @param request * @param response * @param model * @return */ @RequestMapping(value = "/queryAll",produces = "application/json;charset=UTF-8") @ResponseBody public ModelAndView findAll(HttpServletRequest request, HttpServletResponse response, Model model){ //Current page String pageIndexStr = request.getParameter("pageIndex"); //Number of pages per page int pageSize = Constants.PAGE_SIZE; ModelAndView mv = this.getModelAndView(); Page<User> userPage; if(pageIndexStr==null||"".equals(pageIndexStr)){ pageIndexStr = "0"; } int pageIndex = Integer.parseInt(pageIndexStr); userPage = userService.findAll(pageIndex+1, pageSize, Sort.Direction.ASC,"id"); mv.addObject("totalCount",userPage.getTotalElements()); mv.addObject("pageIndex",pageIndex);// JsonConfig cfg = new JsonConfig();// cfg.setExcludes(new String[]{"handler","hibernateLazyInitializer"}); JsonConfig jcg = new JsonConfig(); jcg.registerJsonValueProcessor(Date.class, new DateJsonValueProcessor("yyyy-mm-dd")); JSONArray jsonArray = JSONArray.fromObject(userPage.getContent(),jcg); //System.out.println(jsonArray.toString()); mv.addObject("users",jsonArray.toString()); mv.setViewName("admin/user/sys_user_list"); return mv; }} 【Front-end page implementation】
Page View implementation, refer to jquery.pagination.js (pagination js), and pagination.css (pagination style css).
You can download it here: //www.VeVB.COM/article/105013.htm
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%><% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE html><html lang="zh-CN"><head> <base href="<%=basePath %>" rel="external nofollow" > <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Insert title here</title> <!-- bootstrap style--> <link type="text/css" rel="stylesheet" href="<%=basePath%>plugins/page/css/bootstrap-3.3.5.min.css" rel="external nofollow" /> <!-- Required CSS for jquery.pagination --> <link type="text/css" rel="stylesheet" href="<%=basePath%>plugins/page/css/pagination.css" rel="external nofollow" /> <script type="text/javascript" src="<%=basePath%>plugins/page/js/jquery.min.js"></script> <!-- JS required by jquery.pagination Note that it must be placed behind jquery.js--> <script type="text/javascript" src="<%=basePath%>plugins/page/js/jquery.pagination.js"></script> <script type="text/javascript"> /** For paging operations, use the jquery.pagination plugin add by nicky 20170729 start **/ //Current page var pageIndex = Number(${pageIndex}); //Data quantity var totalCount = Number(${totalCount}); $(document).ready(function () { //Binding to paging $("#Pagination").pagination(totalCount, { callback : pageselectCallback, prev_text : '< Previous page', next_text: 'Next page>', items_per_page : 6, num_display_entries : 6, current_page : pageIndex, num_edge_entries : 1, link_to: "user/queryAll?pageIndex=__id__" //The paged js will automatically replace "__id__" with the current number. 0 }); var html = ""; var data = ${users}; $.each(data,function(idx,obj){ var id = obj.id; var username = obj.username; var mark = obj.mark; var phone = obj.phone; var email = obj.email; var lastLogin = obj.lastLogin; var loginIp = obj.loginIp; html += "<tr><td><input type='checkbox' name='id' id='id' value=" + id + " /></td>" + "<td>"+id+"</td>"+ "<td>"+username+"</td>"+ "<td>"+mark+"</td>"+ "<td>"+phone+"</td>"+ "<td>"+email+"</td>"+ "<td>"+lastLogin+"</td>"+ "<td>"+loginIp+"</td>"+ "<td><a href='javascript:openEditDialog("+id+");' class='bounceIn'>Configure Role</a>"+ "</tr>"; }); $("#content").append(html); }); //This event is function pageselectCallback(index, jq) { } /** Pagination operation, using the jquery.pagination plugin add by nicky 20170729 end **/ // checkbox's all/anti-select var isCheckAll = false; function doCheck(){ if(isCheckAll){ $("input[type='checkbox']").each(function(){ this.checked = false; }); isCheckAll = false; }else{ $("input[type='checkbox']").each(function(){ this.checked = true; }); isCheckAll = true; } } </script></head><body><br><div> <div> <div> <div> <form> <input type="button" value="send mail" onclick="sendEmail();" /> <input type="button" value="sendSms();" /> <input type="button" value="exportExcel table" onclick="exportExcel();" /> <br><br><!-- <input type="text" id="keyword" placeholder="Please enter keyword"> Date from <input type="text" placeholder="Please enter start date" value="${startdate }" id="startDate" name="startdate" onclick="WdatePicker({dateFmt:'yyyy-MM-dd' ,maxDate:'#F{$dp.$D(/'endDate/')}'});"/> to <input type="text" placeholder="Please enter end date" value="${enddate }" id="endDate" name="enddate" onclick="WdatePicker({dateFmt:'yyyy-MM-dd' ,minDate:'#F{$dp.$D(/'startDate/')}'});" /> <input type="button" value="Search" onclick="doSearch();"/>--> </form> <table id="mTable"> <thead> <tr> <th><input type="checkbox" onclick="doCheck();" /></th> <th>Serial number</th> <th>User name</th> <th>Description</th> <th>Mobile</th> <th>Email</th> <th>Latest login</th> <th>Last login IP</th> <th>Operation</th> </tr> </head> <tbody id="content"> </tbody> </table> <div id="Pagination"></div> <!-- demo --> </div> </div> </div> </div> </div> </div> </div></div></body></html> Front-end page display:
OK, this blog is based on a github open source project under development. The project code address is: https://github.com/u014427391/jeepatform
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.