jQuery分頁小插件使用

需要先引用，注意先後順序，css需要在js前面

<link rel="stylesheet" href="css/pagination.css">
<script type="text/javascript" src="jquery/jquery.pagination.js"></script>
           

jQuery代碼

<script type="text/javascript" >
    $(function () {

        initPagination();
    });
    
    function initPagination() {
        // 1.擷取總記錄數
        var totalRecord = ${requestScope.pageInfo.total}

         //聲明一個JSON對象存儲Pagination要設定的屬性
        var properties = {
            num_edge_entries: 3,								// 邊緣頁數
            num_display_entries: 5,								// 主體頁數
            callback: pageSelectCallback,						// 指定使用者點選“翻頁”的按鈕時跳轉頁面的回調函數
            items_per_page: ${requestScope.pageInfo.pageSize},	// 每頁要顯示的資料的數量
            current_page: ${requestScope.pageInfo.pageNum - 1},	// Pagination内部使用pageIndex來管理頁碼，pageIndex從0開始，pageNum從1開始，是以要減一
            prev_text: "上一頁",									// 上一頁按鈕上顯示的文本
            next_text: "下一頁"									// 下一頁按鈕上顯示的文本
        };
        // 2.生成頁碼導覽列
        $("#Pagination").pagination(totalRecord,properties);
    }

    function pageSelectCallback(pageIndex,jQuery) {
        // 根據pageIndex計算得到pageNum
        var pageNum = pageIndex + 1;

        // 跳轉頁面
        window.location.href = "admin/get/page.html?pageNum=" + pageNum;

        // 由于每一個頁面按鈕都是超連結，取消超連結預設行為
        return false;

    }
</script>
           

前端代碼 隻放一部分了

<tfoot>
    <tr>
       <td colspan="6" align="center">
          <div class="pagination" id="Pagination"><!-- 這裡顯示分頁 --></div>
       </td>
   </tr>
</tfoot>
           

controller代碼

@RequestMapping("/admin/get/page.html")
    public String getPageInfo(@RequestParam(value = "keyword",defaultValue = "") String keyword,
                           @RequestParam(value = "pageNum",defaultValue = "1") Integer pageNum,
                           @RequestParam(value = "pageSize",defaultValue = "5") Integer pageSize,
                           ModelMap modelMap){

        PageInfo<Admin> pageInfo = adminService.getPageInfo(keyword, pageNum, pageSize);

        modelMap.addAttribute(CrowdConstant.ATTR_NAME_PAGE_INFO,pageInfo);

        return "admin-page";
    }
           

service

public PageInfo<Admin> getPageInfo(String keyword, Integer pageNum, Integer pageSize) {
        // 1.調用pageHelper靜态方法開啟分頁功能
        PageHelper.startPage(pageNum,pageSize);

        // 2.查詢資料
        List<Admin> list = adminMapper.selectAdminByKeyCrowd(keyword);

        // 3.封裝到PageInfo對象中
        return new PageInfo<>(list);
    }
           

有個死循環的小問題

不讓 Pagination 在頁碼導覽列初始化完成時就調用回調函數！

注釋下Pagination.js檔案中的回調函數