1. 程式人生 > >簡單分頁,無需外掛 實現 上一頁|下一頁 分頁功能

簡單分頁,無需外掛 實現 上一頁|下一頁 分頁功能

分頁功能 五花八門,外掛的使用也很方便。最近做專案,分頁功能是寫好的了,利用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 可能會更好一點。方法千百種,適合自己的就好!