Bootstrap Paginator分页插件超详细使用示例

    jsp页面只需要两个div，一个用于拼接table，一个放分页相关页码

  <div id="select" style="height:520px;">
    <!-- table table-bordered 带边框的样式 -->
    <table class="table  table-striped table-bordered table-hover " id="userTable">
    </table>
</div>    
<div style="text-align:center;">
    <ul id="useroption"></ul>
</div>

               

js中代码：

 queryUser();
 function queryUser() {
        $.ajax({
            async: true,
            type: "post",
            url: "UI_selectUser.action",//向后台发送请求，后台为stuts2框架
            dataType: "json",
            data: {page:'1'},
            cache: false,
            success: function(data) {
                var result = JSON.parse(data.json_data);   //data.json_data为后台返回的JSON字符串，这里需要将其转换为JSON对象


                tbody="<tr style='background:#fff;'><th >用户名</th><th>姓名</th>" +
                    "<th >角色</th><th>职务</th><th>联系方式</th></tr>";
                for (var i = 0; i <result.list.length; i++) {//拼接对应<th>需要的值
                    var trs = "";
                    trs+='<tr ><td >' + result.list[i].USERCODE
                        + '</td><td >' + result.list[i].REALNAME
                        + '</td><td >' + result.list[i].ROLEID
                        + '</td><td>' + result.list[i].ROLENAME
                        + '</td><td>' + ""
                        +'</td></tr>';
                    tbody+=trs;
                };
                $("#userTable").html(tbody);

                var currentPage = result.CurrentPage; //当前页数
                var pageCount = result.pageCount; //总页数
                var options = {
                    bootstrapMajorVersion: 3, //版本

                    currentPage: currentPage, //当前页数

                    totalPages: pageCount, //总页数

                    numberOfPages: 5,
                    shouldShowPage:true,//是否显示该按钮

                    itemTexts: function (type, page, current) {

                        switch (type) {

                            case "first":

                                return "首页";

                            case "prev":

                                return "上一页";

                            case "next":

                                return "下一页";

                            case "last":

                                return "末页";

                            case "page":

                                return page;

                        }

                    },//点击事件，用于通过Ajax来刷新整个list列表
                    onPageClicked: function (event, originalEvent, type, page) {
                        $.ajax({
                            async: true,
                            url: "UI_selectUser.action",
                            type: "post",
                            dataType : "json",
                            data: {page:page},
                            cache: false,
                            success: function (data) {
                                var result = JSON.parse(data.msg);

                                tbody="<tr style='background:#fff;'><th >用户名</th>                                <th>姓名</th>" +
                                    "<th >角色</th><th>职务</th><th>联系方式</th></tr>";
                                for (var i = 0; i <result.list.length; i++) {

                                    var trs = "";
                                    trs+='<tr ><td >'+ result.list[i].USERCODE
                                        + '</td><td >' + result.list[i].REALNAME
                                        + '</td><td >' + result.list[i].ROLEID
                                        + '</td><td>' + result.list[i].ROLENAME
                                        + '</td><td>' + ""
                                        +'</td></tr>';
                                    tbody+=trs;

                                };
                                $("#userTable").html(tbody);

                            }/*success*/
                        });

                    }

                };
                $('#useroption').bootstrapPaginator(options);
            }/*success*/

        });
    }

 

---------后台Action代码

private int page;

public int getPage() {
        return page;
    }
    public void setPage(int page) {
        this.page = page;
    }


public String selectUser() throws IOException{
        int pageIndex =  page;//当前页
        int pageSize =5;//设置每页要展示的数据数量(根据项目需求灵活设置)
        int rowCount = 0 ;
       List<Map> listExamine=userService.queryUserInfo();//获取总数据量
        try {
                rowCount=listExamine.size();//总条数
               //通过计算，得到分页应该需要分几页，其中不满一页的数据按一页计算
               if(rowCount%pageSize!=0)
               {
                   rowCount = rowCount / pageSize + 1;
               }
               else
               {
                   rowCount = rowCount / pageSize;
               }
           } catch (Exception e) {
       }
         List<Map> showList=userService.queryShowUserInfo(pageIndex,pageSize);//根据pageIndex和pageSize获取需要展示的该页数据
       //转成Json格式
       String json_data = "{\"pageCount\":"+rowCount+",\"CurrentPage\":"+pageIndex+",\"list\":" + JSONArray.fromObject(showList) + "}";
       boolean success=true;

       //之下的两行代码为本人项目中封装的返回json数据的方法，各位只需要用自己的方法将json_data字符串返回前台即可

       ConvertToJson(success, json_data);
       return "jsonData";
    }

-------效果图如下：