分頁插件的使用

/**
 * 通過ajax向控制層發送數據,接收到分頁插件得到的數據,page
 * pn為分頁查詢的id號
 */
function loadData(pn){
    $(".allCheckbox").prop("checked",false);
    $(".data_tr").remove();
    $.post("findAllQuestion", {"pn":pn}, function(page) {
        $.each(page.list, function(index, item) {
            var tr=$("<tr class='data_tr''>"+
                    "<td>"+item.questionotherid+"</td>"+
                    "<td>"+item.questionothername+"</td>"+
                    "<td>"+item.questionall.questionname+"</td>"+
                    "<td>"+item.questionid+"</td>"+
                    "<td>"+item.questionanswer+"</td>"+
                    "<td>"+getMyDate(item.questiondate)+"</td>"+
                    "<td><a href='#' data-toggle='modal' data-target='#myModal' onclick='getTable("+item.questionotherid+")'>詳情/修改</a>|"+
                    "<a href='#' onclick='getdel("+item.questionotherid+")'>刪除</a></td></tr>").appendTo($("tbody"));
        });
        maxPag = page.pages;
        currentPage = page.pageNum;
        loadPaging(page);
    },"JSON")        
}

 

/**
 * 首頁,下一頁,上一頁,末頁 的顯示
 * 分頁查詢顯示信息
 */
function loadPaging(page){
    $(".text-right").remove();
    var nav = $("<nav class='text-right'></nav>");
    var ul = $("<ul class='pagination'><li><a onclick='loadData(1)' aria-label='Previous'> 首頁 </a></li>"+
            "<li><a onclick='loadData("+(page.pageNum-1)+")' aria-label='Previous'> <span aria-hidden='true'>上一頁</span></a></li></ul>").appendTo(nav);
    $.each(page.navigatepageNums,function(index,item){
        var li=$("<li><a onclick='loadData("+item+")'>"+item+"</a></li>").appendTo(ul);
        if(page.pageNum==item){
            li.addClass("active");
        }
    });
    var edit_btn=$("<li><a onclick='loadData("+(page.pageNum+1)+")' aria-label='Next'> <span aria-hidden='true'>下一頁</span></a></li>"+
            "<li><a onclick='loadData("+page.pages+")' aria-label='Next'> 末頁 </a></li>").appendTo(ul);
    nav.appendTo($("#paging"));
}

　　　　 
　　//pageHelper插件的使用,需要導入jar包
　　@RequestMapping("/findAllUser")
    @ResponseBody
    public PageInfo<User> pageHelper(@RequestParam(defaultValue="1") Integer pn) {
        PageHelper.startPage(pn, 10);
        List<User> list = userService.queryAllUser();
        PageInfo<User> page = new PageInfo<>(list,7);
        System.out.println(page);
        return page;
    }

 前台得引入bootstrap的css文件,可在官網下載:http://www.bootcss.com/