SpringMVC+Spring Data JPA +Bootstrap 分页实现和模糊查询分页

本文将介绍使用 SpringMVC + Spring Data JPA 实现分页功能。

Spring Data JSP 里面一个一个 Pageable 的类可以帮我们实现分页，非常好用。

先看效果图

用户列表分页

 

用户查询（根据用户名，昵称，email，个人主页，手机号）模糊查询 分页

 

 

如果是首页不显示上一页，如果是尾页不显示下一页。

 

分页的API

使用 Spirng Data JPA 的 Page 替代之前的 List。

下面是返回给前台的数据

// 20171202185123
// http://localhost:8090/admin/user/list

{
  "content": [
    {
      "id": 1,
      "username": "liubei",
      "password": null,
      "nickname": "刘玄德",
      "email": "[email protected]",
      "avatar": "/uploads/2017/12/刘备.png",
      "website": "http://liubei.com",
      "phone": "15711111111",
      "createTime": 1512193914000,
      "status": 1
    },
    {
      "id": 2,
      "username": "lv007",
      "password": "007",
      "nickname": "吕玲绮",
      "email": "[email protected]",
      "avatar": "/uploads/2017/12/吕玲绮.png",
      "website": "http://007.com",
      "phone": "15711111112",
      "createTime": 1512194060000,
      "status": 1
    },
    {
      "id": 3,
      "username": "mayunlu",
      "password": "123",
      "nickname": "马云禄",
      "email": "[email protected]",
      "avatar": "/uploads/2017/12/马云禄.png",
      "website": "http://mayunlu.com",
      "phone": "13533333333",
      "createTime": 1512194114000,
      "status": 1
    }
  ],
  "last": false,
  "totalElements": 29,
  "totalPages": 10,
  "size": 3,
  "number": 0,
  "sort": null,
  "first": true,
  "numberOfElements": 3
}

可以看到能获得总共记录数totalElements，总页数totalPages，每页显示的记录数size，当前页码number(从0开始计)，排序规则sort，是否为首页first，是否为尾页last，当前页的记录数。content 里的是记录内容

 

后台代码

1、dao 层

UserDao.java

package com.liuyanzhao.blog.dao;

import com.liuyanzhao.blog.entity.User;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.Pageable;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.Query;


/**
 * @author 言曌
 * @date 2017/11/28 下午3:31
 */

public interface UserDao extends JpaRepository {

    //根据用户名昵称等信息模糊查询
    @Query("select u from User u where u.username like %?1% or u.nickname like %?1% or u.email like %?1% or u.website like %?1% or u.phone like %?1% or u.id = ?1")
    Page findSearch(String query, Pageable pageable);

}

 

2、Service 层

UserServie.java

package com.liuyanzhao.blog.service;

import com.liuyanzhao.blog.dto.UserDTO;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.Pageable;


/**
 * @author 言曌
 * @date 2017/11/28 下午3:32
 */


public interface UserService {

    //全部查询
    Page findAll(Pageable pageable);

    //根据用多种信息查询模糊用户
    Page findSearch(String username,Pageable pageable);

}

 

UserServiceImpl.java

package com.liuyanzhao.blog.service.Impl;

import com.liuyanzhao.blog.converter.User2UserDTOConverter;
import com.liuyanzhao.blog.dao.UserDao;
import com.liuyanzhao.blog.dto.UserDTO;
import com.liuyanzhao.blog.entity.User;
import com.liuyanzhao.blog.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageImpl;
import org.springframework.data.domain.Pageable;
import org.springframework.stereotype.Service;

import javax.transaction.Transactional;
import java.util.List;

/**
 * @author 言曌
 * @date 2017/11/28 下午3:32
 */

@Service("userService")
public class UserServiceImpl implements UserService {


    @Autowired
    private UserDao userDao;

    //分页获得列表
    @Override
    public Page findAll(Pageable pageable) {
        Page userPage = userDao.findAll(pageable);
        List userDTOList = User2UserDTOConverter.convert(userPage.getContent());
        Page userDTOPage = new PageImpl(userDTOList,pageable,userPage.getTotalElements());
        return userDTOPage;
    }


    @Override
    public Page findSearch(String query,Pageable pageable) {
        Page userPage = userDao.findSearch(query,pageable);
        List userDTOList  = User2UserDTOConverter.convert(userPage.getContent());
        Page userDTOPage = new PageImpl(userDTOList,pageable,userPage.getTotalElements());
        return userDTOPage;
    }

}

 

3、controller 层

UserController.java

package com.liuyanzhao.blog.controller;

import com.liuyanzhao.blog.dto.UserDTO;
import com.liuyanzhao.blog.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.ModelAndView;

import javax.servlet.http.HttpServletRequest;

/**
 * @author 言曌
 * @date 2017/11/28 下午3:33
 */

@Controller
@RequestMapping(value = "/admin/user")
public class UserController {

    @Autowired
    private UserService userService;

    @RequestMapping(value = "/list")
    public ModelAndView listUser(@RequestParam(value = "page",defaultValue = "1") Integer page,
                                 @RequestParam(value = "size",defaultValue = "3") Integer size) {
        ModelAndView modelAndView = new ModelAndView();
        PageRequest request = new PageRequest(page-1,size);
        Page userDTOPage = userService.findAll(request);
        modelAndView.addObject("userDTOPage",userDTOPage);
        modelAndView.setViewName("/admin/user/list");
        return modelAndView;
    }


    @RequestMapping(value = "/search")
    public ModelAndView search(HttpServletRequest request,
                               @RequestParam(value = "page",defaultValue = "1") Integer page,
                               @RequestParam(value = "size",defaultValue = "3") Integer size) {
        ModelAndView modelAndView = new ModelAndView();
        String query = (request.getParameter("query")).trim();
        PageRequest pageRequest = new PageRequest(page-1,size);
        Page userDTOPage = userService.findSearch(query,pageRequest);
        modelAndView.addObject("userDTOPage",userDTOPage);
        modelAndView.addObject("query",query);
        modelAndView.setViewName("/admin/user/list");
        return modelAndView;
    }

}

默认一页显示3条记录，默认当前页为di

 

4、实体类

UserDTO.java

package com.liuyanzhao.blog.dto;

import java.util.Date;

/**
 *
 * 数据传输对象（不要使用entity直接来传数据）
 * @author 言曌
 * @date 2017/11/30 下午10:53
 */

public class UserDTO {

    private Integer id;

    private String username;

    private String password;

    private String nickname;

    private String email;

    private String avatar;

    private String website;

    private String phone;

    private Date createTime;

    private Integer status;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getNickname() {
        return nickname;
    }

    public void setNickname(String nickname) {
        this.nickname = nickname;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public String getAvatar() {
        return avatar;
    }

    public void setAvatar(String avatar) {
        this.avatar = avatar;
    }

    public String getWebsite() {
        return website;
    }

    public void setWebsite(String website) {
        this.website = website;
    }

    public String getPhone() {
        return phone;
    }

    public void setPhone(String phone) {
        this.phone = phone;
    }

    public Date getCreateTime() {
        return createTime;
    }

    public void setCreateTime(Date createTime) {
        this.createTime = createTime;
    }

    public Integer getStatus() {
        return status;
    }

    public void setStatus(Integer status) {
        this.status = status;
    }
}

 

前台代码

list.jsp 部分代码

<div id="content">
                <div class="table-responsive">
                    <form class="form-inline" method="get" action="/admin/user/search">
                        <div class="form-group">
                            <label for="Search" class="sr-only">Searchlabel>
                            <input type="text" name="query" class="form-control" id="Search" placeholder="Search"
                                   value="${query}">
                        div>
                        <button type="submit" class="btn btn-default">查询button>
                        <a href="/admin/user/add">
                            <button type="button" class="btn btn-info">添加button>
                        a>
                        <button type="button" class="btn btn-danger" onclick="deleteUserMore()">批量删除button>
                    form>
                    <br>
                    <c:choose>
                        <c:when test="${userDTOPage.numberOfElements > 0}">
                            <table class="table table-bordered">
                                <tr>
                                    <th><input type="checkbox" id="allSelect" onclick="DoCheck()">th>
                                    <th>IDth>
                                    <th>用户名th>
                                    <th>昵称th>
                                    <th>邮箱th>
                                    <th>电话th>
                                    <th>个人主页th>
                                    <th>创建时间th>
                                    <th>状态th>
                                    <th>操作th>
                                tr>
                                <c:forEach var="user" items="${userDTOPage.content}">
                                    <tr>
                                        <td><input type="checkbox" name="ids" value="${user.id}">td>
                                        <td>${user.id}td>
                                        <td>${user.username}td>
                                        <td>${user.nickname}td>
                                        <td>${user.email}td>
                                        <td>${user.phone}td>
                                        <td><a href="${user.website}" target="_blank">${user.website}a>td>
                                        <td>${user.createTime}td>
                                        <td>
                                            <c:choose>
                                                <c:when test="${user.status==1}">
                                                    <span class="text-success">正常span>
                                                c:when>
                                                <c:when test="${user.status==0}">
                                                    <span class="text-danger">禁用span>
                                                c:when>
                                                <c:otherwise>
                                                    ${user.status}
                                                c:otherwise>
                                            c:choose>
                                        td>
                                        <td>
                                            <a href="/admin/user/profile/${user.id}">
                                                <button type="button" class="btn btn-success btn-xs">查看button>
                                            a>
                                            <button type="button" class="btn btn-danger btn-xs"
                                                    onclick="deleteUser(${user.id})">删除
                                            button>
                                            <a href="/admin/user/edit/${user.id}">
                                                <button type="button" class="btn btn-primary btn-xs">编辑button>
                                            a>
                                        td>
                                    tr>
                                c:forEach>
                            table>
                            <%--总共页数：${userDTOPage.totalPages} <br>--%>
                            <%--记录总数：${userDTOPage.totalElements} <br>--%>
                            <%--当前页号：${userDTOPage.number} <br>--%>
                            <%--是否为首页：${userDTOPage.first} <br>--%>
                            <%--是否为尾页：${userDTOPage.last} <br>--%>
                            <%--每页显示的数量：${userDTOPage.numberOfElements} <br>--%>
                            <%--分页 start--%>
                            <nav aria-label="Page navigation">
                                <ul class="pagination">
                                    <c:choose>
                                        <c:when test="${userDTOPage.totalPages <= 3 }">
                                            <c:set var="begin" value="1"/>
                                            <c:set var="end" value="${userDTOPage.totalPages }"/>
                                        c:when>
                                        <c:otherwise>
                                            <c:set var="begin" value="${userDTOPage.number+1-1 }"/>
                                            <c:set var="end" value="${userDTOPage.number+1 + 2}"/>
                                            <c:if test="${begin < 2 }">
                                                <c:set var="begin" value="1"/>
                                                <c:set var="end" value="3"/>
                                            c:if>
                                            <c:if test="${end > userDTOPage.totalPages}">
                                                <c:set var="begin" value="${userDTOPage.totalPages-2 }"/>
                                                <c:set var="end" value="${userDTOPage.totalPages}"/>
                                            c:if>
                                        c:otherwise>
                                    c:choose>
                                        <%--如果当前为首页，隐藏上一页--%>
                                    <c:choose>
                                        <c:when test="${userDTOPage.first}">
                                            <%--当前页为第一页，隐藏上一页按钮--%>
                                        c:when>
                                        <c:otherwise>
                                            <li>
                                                <a href="?page=${userDTOPage.number}" aria-label="Previous">
                                                    <span aria-hidden="true">«span>
                                                a>
                                            li>
                                        c:otherwise>
                                    c:choose>
                                        <%--显示第一页的页码--%>
                                    <c:if test="${begin >= 2 }">
                                        <li><a href="?page=1">1a>li>
                                    c:if>
                                        <%--显示点点点--%>
                                    <c:if test="${begin  > 2 }">
                                        <li class="disabled"><a>…a>li>
                                    c:if>
                                        <%--打印 页码--%>
                                    <c:forEach begin="${begin }" end="${end }" var="i">
                                        <c:choose>
                                            <c:when test="${i eq userDTOPage.number+1}">
                                                <li class="active"><a href="?page=${i}">${i}<span
                                                        class="sr-only">(current)span>a>li>
                                            c:when>
                                            <c:otherwise>
                                                <li><a href="?page=${i}">${i}a>li>
                                            c:otherwise>
                                        c:choose>
                                    c:forEach>

                                        <%-- 显示点点点 --%>
                                    <c:if test="${end < userDTOPage.totalPages-1 }">
                                        <li class="disabled"><a>…a>li>
                                    c:if>

                                        <%-- 显示最后一页的数字 --%>
                                    <c:if test="${end < userDTOPage.totalPages}">
                                        <li>
                                            <a href="?page=${userDTOPage.totalPages}">${userDTOPage.totalPages}a>
                                        li>
                                    c:if>
                                        <%--如果当前页为尾页，隐藏下一页--%>
                                    <c:choose>
                                        <c:when test="${userDTOPage.number+1 eq userDTOPage.totalPages}">
                                            <%--到了尾页隐藏，下一页按钮--%>
                                        c:when>
                                        <c:otherwise>
                                            <li>
                                                <a href="?page=${userDTOPage.number+2}" aria-label="Next">
                                                    <span aria-hidden="true">»span>
                                                a>
                                            li>
                                        c:otherwise>
                                    c:choose>
                                ul>
                            nav>
                            <%--分页 end--%>

                        c:when>
                        <c:otherwise><%--如果没有文章--%>
                            <div class="alert alert-warning">
                                <a href="#" class="close" data-dismiss="alert">
                                    ×
                                a>
                                <strong>警告！strong>这里什么都没有。哼，小坏坏！
                            div>
                        c:otherwise>
                    c:choose>
                div>
            div>

 

search.jsp

这个search.jsp 和 list.jsp 基本相同，只是下面的分页链接不同

一个是 ${i}

一个是 ${i}

这里就不贴代码了

 

其中分页部分需要注意这个就行了

总共页数：${userDTOPage.totalPages} 
记录总数：${userDTOPage.totalElements} 
当前页号：${userDTOPage.number} 
是否为首页：${userDTOPage.first} 
是否为尾页：${userDTOPage.last} 
每页显示的数量：${userDTOPage.numberOfElements}

 

 

本文地址：https://liuyanzhao.com/6869.html