簡單分頁,無需外掛 實現 上一頁|下一頁 分頁功能
阿新 • • 發佈:2018-11-22
分頁功能 五花八門,外掛的使用也很方便。最近做專案,分頁功能是寫好的了,利用bootstarp 簡單實現的, 類似於這種
但由於資料越來越多,這種迴圈的方式很不好看。於是想到上一頁| 下一頁 分頁 的樣式,看到網上使用外掛,但是表單都是拼的,由於和自己 程式碼出入過大,又懶得改程式碼。自己 就重寫寫了一個,簡單得實現 該功能,效果如下:
當在第一頁時候,顯示下一頁, 上一頁掩藏 , 網上弄成不可選中,效果都差不多
當在中間頁得時候, 上一頁下一頁 都顯示
當在最後一頁得時候 ,下一頁掩藏上一頁顯示
原始碼如下:
//實體類 get set 省略 public class Page <T> implements Serializable{ private int totalPage; //總頁數 private int currentPage; //當前頁數 private int currentCount;//每頁的條數 private int totalCount;//總的數目 public static final int CURRENT_COUNT = 10; }
//Controller @RequestMapping("/user/loginLog") //統計登入日誌 public ModelAndView loginLog(Model model, Page page) { try { int currentPage = page.getCurrentPage(); //當前頁數 if (currentPage == 0) { currentPage = 1; } String email = TokenManager.getEmail(); System.out.println("/user/loginLog:" + email); List<LoginLog> loginLogList = loginlogService.getloginLog(email); int totalCount = loginLogList.size();//總個數 int currentcount = Page.CURRENTCOUNT;// 每頁顯示的個數 int totalPage = (int) Math.ceil(1.0 * totalCount / currentcount);//總的頁數 int index = (currentPage - 1) * currentcount; //limit起始位置 List<LoginLog> logs = loginlogService.logLimit(email, index, currentcount); page.setTotalPage(totalPage); model.addAttribute("log", logs); model.addAttribute("page", page); //start 就是當前頁數 model.addAttribute("start",currentPage); } catch (Exception e) { System.out.println("/user/loginLog 發生異常:" + e.getMessage()); } return new ModelAndView("include/log/loginLog"); }
分頁JSP
利用後臺傳入的Start 進行加一 或減一 然後再傳入後臺, 如此反覆
這邊主要就是判斷邏輯
<div class="container pull-right"> <ul class="pager "> <li><a href="?currentPage=<%=1%>">首頁</a></li> <c:choose> <c:when test="${start>'1' && start <= page.totalPage }"> <li><a href="?currentPage=${start-'1'}">上一頁</a></li> </c:when> </c:choose> <c:if test="${start>='1'&& start<page.totalPage}"> <li><a href="?currentPage=${start+'1'}">下一頁</a></li> </c:if> <li><a href="?currentPage=${page.totalPage}">尾頁</a></li> <li>共${page.totalPage}頁</li> </ul> </div>
這樣就可以了, 這樣不好一點就是 每次都要 重新整理頁面, 使用者體驗不好, 利用ajax 可能會更好一點。方法千百種,適合自己的就好!