SpringMVC+Spring Data JPA +Bootstrap 分頁實現和模糊查詢分頁

言曌發表於2018-03-17
SpringMVCboot

本文將介紹使用 SpringMVC + Spring Data JPA 實現分頁功能。

Spring Data JSP 裡面一個一個 Pageable 的類可以幫我們實現分頁，非常好用。

先看效果圖

使用者列表分頁

SpringMVC+Spring Data JPA +Bootstrap 分頁實現和模糊查詢分頁

 

使用者查詢（根據使用者名稱，暱稱，email，個人主頁，手機號）模糊查詢 分頁

SpringMVC+Spring Data JPA +Bootstrap 分頁實現和模糊查詢分頁

 

 

如果是首頁不顯示上一頁，如果是尾頁不顯示下一頁。

 

分頁的API

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

下面是返回給前臺的資料

  1. // 20171202185123
  2. // http://localhost:8090/admin/user/list
  4. {
  5.   "content": [
  6.     {
  7.       "id": 1,
  8.       "username": "liubei",
  9.       "password": null,
  10.       "nickname": "劉玄德",
  11.       "email": "liubei@shu.com",
  12.       "avatar": "/uploads/2017/12/劉備.png",
  13.       "website": "http://liubei.com",
  14.       "phone": "15711111111",
  15.       "createTime": 1512193914000,
  16.       "status": 1
  17.     },
  18.     {
  19.       "id": 2,
  20.       "username": "lv007",
  21.       "password": "007",
  22.       "nickname": "呂玲綺",
  23.       "email": "007@san.com",
  24.       "avatar": "/uploads/2017/12/呂玲綺.png",
  25.       "website": "http://007.com",
  26.       "phone": "15711111112",
  27.       "createTime": 1512194060000,
  28.       "status": 1
  29.     },
  30.     {
  31.       "id": 3,
  32.       "username": "mayunlu",
  33.       "password": "123",
  34.       "nickname": "馬雲祿",
  35.       "email": "mayunlu@san.com",
  36.       "avatar": "/uploads/2017/12/馬雲祿.png",
  37.       "website": "http://mayunlu.com",
  38.       "phone": "13533333333",
  39.       "createTime": 1512194114000,
  40.       "status": 1
  41.     }
  42.   ],
  43.   "last": false,
  44.   "totalElements": 29,
  45.   "totalPages": 10,
  46.   "size": 3,
  47.   "number": 0,
  48.   "sort": null,
  49.   "first": true,
  50.   "numberOfElements": 3
  51. }

可以看到能獲得總共記錄數totalElements，總頁數totalPages，每頁顯示的記錄數size，當前頁碼number(從0開始計)，排序規則sort，是否為首頁first，是否為尾頁last，當前頁的記錄數。content 裡的是記錄內容

 

後臺程式碼

1、dao 層

UserDao.java

  1. package com.liuyanzhao.blog.dao;
  3. import com.liuyanzhao.blog.entity.User;
  4. import org.springframework.data.domain.Page;
  5. import org.springframework.data.domain.Pageable;
  6. import org.springframework.data.jpa.repository.JpaRepository;
  7. import org.springframework.data.jpa.repository.Query;
  10. /**
  11.  * @author 言曌
  12.  * @date 2017/11/28 下午3:31
  13.  */
  15. public interface UserDao extends JpaRepository<User, Integer> {
  17.     //根據使用者名稱暱稱等資訊模糊查詢
  18.     @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")
  19.     Page<User> findSearch(String query, Pageable pageable);
  21. }

 

2、Service 層

UserServie.java

  1. package com.liuyanzhao.blog.service;
  3. import com.liuyanzhao.blog.dto.UserDTO;
  4. import org.springframework.data.domain.Page;
  5. import org.springframework.data.domain.Pageable;
  8. /**
  9.  * @author 言曌
  10.  * @date 2017/11/28 下午3:32
  11.  */
  14. public interface UserService {
  16.     //全部查詢
  17.     Page<UserDTO> findAll(Pageable pageable);
  19.     //根據用多種資訊查詢模糊使用者
  20.     Page<UserDTO> findSearch(String username,Pageable pageable);
  22. }

 

UserServiceImpl.java

  1. package com.liuyanzhao.blog.service.Impl;
  3. import com.liuyanzhao.blog.converter.User2UserDTOConverter;
  4. import com.liuyanzhao.blog.dao.UserDao;
  5. import com.liuyanzhao.blog.dto.UserDTO;
  6. import com.liuyanzhao.blog.entity.User;
  7. import com.liuyanzhao.blog.service.UserService;
  8. import org.springframework.beans.factory.annotation.Autowired;
  9. import org.springframework.data.domain.Page;
  10. import org.springframework.data.domain.PageImpl;
  11. import org.springframework.data.domain.Pageable;
  12. import org.springframework.stereotype.Service;
  14. import javax.transaction.Transactional;
  15. import java.util.List;
  17. /**
  18.  * @author 言曌
  19.  * @date 2017/11/28 下午3:32
  20.  */
  22. @Service("userService")
  23. public class UserServiceImpl implements UserService {
  26.     @Autowired
  27.     private UserDao userDao;
  29.     //分頁獲得列表
  30.     @Override
  31.     public Page<UserDTO> findAll(Pageable pageable) {
  32.         Page<User> userPage = userDao.findAll(pageable);
  33.         List<UserDTO> userDTOList = User2UserDTOConverter.convert(userPage.getContent());
  34.         Page<UserDTO> userDTOPage = new PageImpl<UserDTO>(userDTOList,pageable,userPage.getTotalElements());
  35.         return userDTOPage;
  36.     }
  39.     @Override
  40.     public Page<UserDTO> findSearch(String query,Pageable pageable) {
  41.         Page<User> userPage = userDao.findSearch(query,pageable);
  42.         List<UserDTO> userDTOList  = User2UserDTOConverter.convert(userPage.getContent());
  43.         Page<UserDTO> userDTOPage = new PageImpl<UserDTO>(userDTOList,pageable,userPage.getTotalElements());
  44.         return userDTOPage;
  45.     }
  47. }

 

3、controller 層

UserController.java

  1. package com.liuyanzhao.blog.controller;
  3. import com.liuyanzhao.blog.dto.UserDTO;
  4. import com.liuyanzhao.blog.service.UserService;
  5. import org.springframework.beans.factory.annotation.Autowired;
  6. import org.springframework.data.domain.Page;
  7. import org.springframework.data.domain.PageRequest;
  8. import org.springframework.stereotype.Controller;
  9. import org.springframework.web.bind.annotation.*;
  10. import org.springframework.web.servlet.ModelAndView;
  12. import javax.servlet.http.HttpServletRequest;
  14. /**
  15.  * @author 言曌
  16.  * @date 2017/11/28 下午3:33
  17.  */
  19. @Controller
  20. @RequestMapping(value = "/admin/user")
  21. public class UserController {
  23.     @Autowired
  24.     private UserService userService;
  26.     @RequestMapping(value = "/list")
  27.     public ModelAndView listUser(@RequestParam(value = "page",defaultValue = "1") Integer page,
  28.                                  @RequestParam(value = "size",defaultValue = "3") Integer size) {
  29.         ModelAndView modelAndView = new ModelAndView();
  30.         PageRequest request = new PageRequest(page-1,size);
  31.         Page<UserDTO> userDTOPage = userService.findAll(request);
  32.         modelAndView.addObject("userDTOPage",userDTOPage);
  33.         modelAndView.setViewName("/admin/user/list");
  34.         return modelAndView;
  35.     }
  38.     @RequestMapping(value = "/search")
  39.     public ModelAndView search(HttpServletRequest request,
  40.                                @RequestParam(value = "page",defaultValue = "1") Integer page,
  41.                                @RequestParam(value = "size",defaultValue = "3") Integer size) {
  42.         ModelAndView modelAndView = new ModelAndView();
  43.         String query = (request.getParameter("query")).trim();
  44.         PageRequest pageRequest = new PageRequest(page-1,size);
  45.         Page<UserDTO> userDTOPage = userService.findSearch(query,pageRequest);
  46.         modelAndView.addObject("userDTOPage",userDTOPage);
  47.         modelAndView.addObject("query",query);
  48.         modelAndView.setViewName("/admin/user/list");
  49.         return modelAndView;
  50.     }
  52. }

預設一頁顯示3條記錄，預設當前頁為di

 

4、實體類

UserDTO.java

  1. package com.liuyanzhao.blog.dto;
  3. import java.util.Date;
  5. /**
  6.  *
  7.  * 資料傳輸物件（不要使用entity直接來傳資料）
  8.  * @author 言曌
  9.  * @date 2017/11/30 下午10:53
  10.  */
  12. public class UserDTO {
  14.     private Integer id;
  16.     private String username;
  18.     private String password;
  20.     private String nickname;
  22.     private String email;
  24.     private String avatar;
  26.     private String website;
  28.     private String phone;
  30.     private Date createTime;
  32.     private Integer status;
  34.     public Integer getId() {
  35.         return id;
  36.     }
  38.     public void setId(Integer id) {
  39.         this.id = id;
  40.     }
  42.     public String getUsername() {
  43.         return username;
  44.     }
  46.     public void setUsername(String username) {
  47.         this.username = username;
  48.     }
  50.     public String getPassword() {
  51.         return password;
  52.     }
  54.     public void setPassword(String password) {
  55.         this.password = password;
  56.     }
  58.     public String getNickname() {
  59.         return nickname;
  60.     }
  62.     public void setNickname(String nickname) {
  63.         this.nickname = nickname;
  64.     }
  66.     public String getEmail() {
  67.         return email;
  68.     }
  70.     public void setEmail(String email) {
  71.         this.email = email;
  72.     }
  74.     public String getAvatar() {
  75.         return avatar;
  76.     }
  78.     public void setAvatar(String avatar) {
  79.         this.avatar = avatar;
  80.     }
  82.     public String getWebsite() {
  83.         return website;
  84.     }
  86.     public void setWebsite(String website) {
  87.         this.website = website;
  88.     }
  90.     public String getPhone() {
  91.         return phone;
  92.     }
  94.     public void setPhone(String phone) {
  95.         this.phone = phone;
  96.     }
  98.     public Date getCreateTime() {
  99.         return createTime;
  100.     }
  102.     public void setCreateTime(Date createTime) {
  103.         this.createTime = createTime;
  104.     }
  106.     public Integer getStatus() {
  107.         return status;
  108.     }
  110.     public void setStatus(Integer status) {
  111.         this.status = status;
  112.     }
  113. }

 

前臺程式碼

list.jsp 部分程式碼

  1. <div id="content">
  2.                 <div class="table-responsive">
  3.                     <form class="form-inline" method="get" action="/admin/user/search">
  4.                         <div class="form-group">
  5.                             <label for="Search" class="sr-only">Search</label>
  6.                             <input type="text" name="query" class="form-control" id="Search" placeholder="Search"
  7.                                    value="${query}">
  8.                         </div>
  9.                         <button type="submit" class="btn btn-default">查詢</button>
  10.                         <a href="/admin/user/add">
  11.                             <button type="button" class="btn btn-info">新增</button>
  12.                         </a>
  13.                         <button type="button" class="btn btn-danger" onclick="deleteUserMore()">批量刪除</button>
  14.                     </form>
  15.                     <br>
  16.                     <c:choose>
  17.                         <c:when test="${userDTOPage.numberOfElements > 0}">
  18.                             <table class="table table-bordered">
  19.                                 <tr>
  20.                                     <th><input type="checkbox" id="allSelect" onclick="DoCheck()"></th>
  21.                                     <th>ID</th>
  22.                                     <th>使用者名稱</th>
  23.                                     <th>暱稱</th>
  24.                                     <th>郵箱</th>
  25.                                     <th>電話</th>
  26.                                     <th>個人主頁</th>
  27.                                     <th>建立時間</th>
  28.                                     <th>狀態</th>
  29.                                     <th>操作</th>
  30.                                 </tr>
  31.                                 <c:forEach var="user" items="${userDTOPage.content}">
  32.                                     <tr>
  33.                                         <td><input type="checkbox" name="ids" value="${user.id}"></td>
  34.                                         <td>${user.id}</td>
  35.                                         <td>${user.username}</td>
  36.                                         <td>${user.nickname}</td>
  37.                                         <td>${user.email}</td>
  38.                                         <td>${user.phone}</td>
  39.                                         <td><a href="${user.website}" target="_blank">${user.website}</a></td>
  40.                                         <td>${user.createTime}</td>
  41.                                         <td>
  42.                                             <c:choose>
  43.                                                 <c:when test="${user.status==1}">
  44.                                                     <span class="text-success">正常</span>
  45.                                                 </c:when>
  46.                                                 <c:when test="${user.status==0}">
  47.                                                     <span class="text-danger">禁用</span>
  48.                                                 </c:when>
  49.                                                 <c:otherwise>
  50.                                                     ${user.status}
  51.                                                 </c:otherwise>
  52.                                             </c:choose>
  53.                                         </td>
  54.                                         <td>
  55.                                             <a href="/admin/user/profile/${user.id}">
  56.                                                 <button type="button" class="btn btn-success btn-xs">檢視</button>
  57.                                             </a>
  58.                                             <button type="button" class="btn btn-danger btn-xs"
  59.                                                     onclick="deleteUser(${user.id})">刪除
  60.                                             </button>
  61.                                             <a href="/admin/user/edit/${user.id}">
  62.                                                 <button type="button" class="btn btn-primary btn-xs">編輯</button>
  63.                                             </a>
  64.                                         </td>
  65.                                     </tr>
  66.                                 </c:forEach>
  67.                             </table>
  68.                             <%--總共頁數：${userDTOPage.totalPages} <br>--%>
  69.                             <%--記錄總數：${userDTOPage.totalElements} <br>--%>
  70.                             <%--當前頁號：${userDTOPage.number} <br>--%>
  71.                             <%--是否為首頁：${userDTOPage.first} <br>--%>
  72.                             <%--是否為尾頁：${userDTOPage.last} <br>--%>
  73.                             <%--每頁顯示的數量：${userDTOPage.numberOfElements} <br>--%>
  74.                             <%--分頁 start--%>
  75.                             <nav aria-label="Page navigation">
  76.                                 <ul class="pagination">
  77.                                     <c:choose>
  78.                                         <c:when test="${userDTOPage.totalPages <= 3 }">
  79.                                             <c:set var="begin" value="1"/>
  80.                                             <c:set var="end" value="${userDTOPage.totalPages }"/>
  81.                                         </c:when>
  82.                                         <c:otherwise>
  83.                                             <c:set var="begin" value="${userDTOPage.number+1-1 }"/>
  84.                                             <c:set var="end" value="${userDTOPage.number+1 + 2}"/>
  85.                                             <c:if test="${begin < 2 }">
  86.                                                 <c:set var="begin" value="1"/>
  87.                                                 <c:set var="end" value="3"/>
  88.                                             </c:if>
  89.                                             <c:if test="${end > userDTOPage.totalPages}">
  90.                                                 <c:set var="begin" value="${userDTOPage.totalPages-2 }"/>
  91.                                                 <c:set var="end" value="${userDTOPage.totalPages}"/>
  92.                                             </c:if>
  93.                                         </c:otherwise>
  94.                                     </c:choose>
  95.                                         <%--如果當前為首頁，隱藏上一頁--%>
  96.                                     <c:choose>
  97.                                         <c:when test="${userDTOPage.first}">
  98.                                             <%--當前頁為第一頁，隱藏上一頁按鈕--%>
  99.                                         </c:when>
  100.                                         <c:otherwise>
  101.                                             <li>
  102.                                                 <a href="?page=${userDTOPage.number}" aria-label="Previous">
  103.                                                     <span aria-hidden="true">&laquo;</span>
  104.                                                 </a>
  105.                                             </li>
  106.                                         </c:otherwise>
  107.                                     </c:choose>
  108.                                         <%--顯示第一頁的頁碼--%>
  109.                                     <c:if test="${begin >= 2 }">
  110.                                         <li><a href="?page=1">1</a></li>
  111.                                     </c:if>
  112.                                         <%--顯示點點點--%>
  113.                                     <c:if test="${begin  > 2 }">
  114.                                         <li class="disabled"><a>…</a></li>
  115.                                     </c:if>
  116.                                         <%--列印 頁碼--%>
  117.                                     <c:forEach begin="${begin }" end="${end }" var="i">
  118.                                         <c:choose>
  119.                                             <c:when test="${i eq userDTOPage.number+1}">
  120.                                                 <li class="active"><a href="?page=${i}">${i}<span
  121.                                                         class="sr-only">(current)</span></a></li>
  122.                                             </c:when>
  123.                                             <c:otherwise>
  124.                                                 <li><a href="?page=${i}">${i}</a></li>
  125.                                             </c:otherwise>
  126.                                         </c:choose>
  127.                                     </c:forEach>
  129.                                         <%-- 顯示點點點 --%>
  130.                                     <c:if test="${end < userDTOPage.totalPages-1 }">
  131.                                         <li class="disabled"><a>…</a></li>
  132.                                     </c:if>
  134.                                         <%-- 顯示最後一頁的數字 --%>
  135.                                     <c:if test="${end < userDTOPage.totalPages}">
  136.                                         <li>
  137.                                             <a href="?page=${userDTOPage.totalPages}">${userDTOPage.totalPages}</a>
  138.                                         </li>
  139.                                     </c:if>
  140.                                         <%--如果當前頁為尾頁，隱藏下一頁--%>
  141.                                     <c:choose>
  142.                                         <c:when test="${userDTOPage.number+1 eq userDTOPage.totalPages}">
  143.                                             <%--到了尾頁隱藏，下一頁按鈕--%>
  144.                                         </c:when>
  145.                                         <c:otherwise>
  146.                                             <li>
  147.                                                 <a href="?page=${userDTOPage.number+2}" aria-label="Next">
  148.                                                     <span aria-hidden="true">&raquo;</span>
  149.                                                 </a>
  150.                                             </li>
  151.                                         </c:otherwise>
  152.                                     </c:choose>
  153.                                 </ul>
  154.                             </nav>
  155.                             <%--分頁 end--%>
  157.                         </c:when>
  158.                         <c:otherwise><%--如果沒有文章--%>
  159.                             <div class="alert alert-warning">
  160.                                 <a href="#" class="close" data-dismiss="alert">
  161.                                     &times;
  162.                                 </a>
  163.                                 <strong>警告！</strong>這裡什麼都沒有。哼，小壞壞！
  164.                             </div>
  165.                         </c:otherwise>
  166.                     </c:choose>
  167.                 </div>
  168.             </div>

 

search.jsp

這個search.jsp 和 list.jsp 基本相同，只是下面的分頁連結不同

一個是 <a href="?page=${i}">${i}</a>

一個是 <a href="?query=${query}&page=${i}">${i}</a>

這裡就不貼程式碼了

 

其中分頁部分需要注意這個就行了

總共頁數：${userDTOPage.totalPages} 
記錄總數：${userDTOPage.totalElements} 
當前頁號：${userDTOPage.number} 
是否為首頁：${userDTOPage.first} 
是否為尾頁：${userDTOPage.last} 
每頁顯示的數量：${userDTOPage.numberOfElements}

 

 

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

相關文章