分页插件的使用

/**
 * 通过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/