1、實現的思路整理
采用分頁式顯示的話,首先需要一個用來保存這些分頁和用戶數據的新實體類,這個類中需要保存的數據有:用戶信息列、一頁中顯示的用戶信息條數、用戶信息總條數,頁總數和當前頁數;然后我們需要考慮到之前實現的在主頁面進行信息顯示的函數就要進行相應的修改了:默認顯示第一頁的內容等;最后在在前端頁面補上相應的操作按鈕即可。
實現搜索功能,我們只需要在Mapper中寫好數據庫的查詢語句,將對應的信息列表返回即可。
2、代碼實現
①、定義PageInfo實體類,其中包含有如下元素
private List<T> list; private int size; private int totalPage; private int totalCount; private int currentPage;
get和set函數實現使用默認的即可
②、修改DAO接口中已經定義過的findAll接口,並將分頁和搜索功能統一在這個接口中;然后再定義一個用來獲取總信息數的接口
List<User> findAll(@Param("start") int start,@Param("username") String username); //分頁與搜索功能統一設計;獲取總行數 int getTotalCount(@Param("username") String username);
③、在Service接口中同樣修改findALL接口,然后在Service類中進行具體實現
@Override public PageInfo<User> findAll(int currentPage, String username) { PageInfo<User> pageInfo =new PageInfo<>(); pageInfo.setSize(5); //tc為查詢到的數據的總行數 int tc =userDao.getTotalCount(username); pageInfo.setTotalCount(tc); //tp為總的頁數 int tp=(int)Math.ceil(tc/5.0); pageInfo.setTotalPage(tp); if (currentPage<1){ pageInfo.setCurrentPage(1); }else if (currentPage>tp) { pageInfo.setCurrentPage(tp); }else{ pageInfo.setCurrentPage(currentPage); } //-1之后第一頁的數據從0開始搜(0,5,10,15.....) int start=(pageInfo.getCurrentPage()-1)*5; List<User> userList=userDao.findAll(start,username); pageInfo.setList(userList); return pageInfo; }
④、在Controller類中也修改findAll的前后端交互邏輯
@RequestMapping("/findAll.do") public ModelAndView findAll(@RequestParam(defaultValue = "1")int currentPage, String username, @RequestParam(defaultValue = "0")int type, HttpSession session){ //實現查詢時點擊翻頁不被被主頁覆蓋 if (type==1)//對應user-list第123行 { //賦值 session.setAttribute("searchName",username); }else { //取值 username=(String) session.getAttribute("searchName"); } //顯示所有人 PageInfo<User> pageInfo=userService.findAll(currentPage,username); ModelAndView mv=new ModelAndView(); mv.addObject("pageInfo",pageInfo); mv.setViewName("user-list"); return mv; }
其中type對應的是在user-list.jsp文件中的定義的類型,使用type進行分類可以解決點擊分頁顯示內容仍為主頁內容的BUG
<form action="${pageContext.request.contextPath}/user/findAll.do?type=1" method="post">
⑤、在Mapper.xml中實現數據庫的模糊搜索的語句功能
<select id="findAll" resultType="user"> select *from tb_user <if test="username!=null and username!='' "> <!-- 模糊搜索 --> where username like concat("%",#{username},"%") </if> -- 五個記錄為一組 limit #{start},5 </select> <select id="getTotalCount" resultType="int"> select count(*) from tb_user <if test="username!=null and username!='' "> <!-- 模糊搜索 --> where username like concat("%",#{username},"%") </if> </select>
⑥、在前端樣式中補上分頁操作按鈕實現
<%-- 添加的分頁按鈕--%> <div class="box-tools pull-right"> <ul class="pagination"> <li><a href="/user/findAll.do" aria-lable="Previous">首頁</a></li> <li><a href="/user/findAll.do?currentPage=${pageInfo.currentPage-1}" >上一頁</a></li> <c:forEach begin="1" end="${pageInfo.totalPage}" var="pageNum"> <li><a href="/user/findAll.do?currentPage=${pageNum}">${pageNum}</a></li> </c:forEach> <li><a href="/user/findAll.do?currentPage=${pageInfo.currentPage+1}" >下一頁</a></li> <li><a href="/user/findAll.do?currentPage=${pageInfo.totalPage}" aria-lable="Next">尾頁</a></li> </ul> </div>
3、進行功能測試
實現分頁功能
實現查找功能