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

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

               

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="用户名姓名" +
                    "角色职务联系方式";
                for (var i = 0; i 需要的值
                    var trs = "";
                    trs+='' + result.list[i].USERCODE
                        + '' + result.list[i].REALNAME
                        + '' + result.list[i].ROLEID
                        + '' + result.list[i].ROLENAME
                        + '' + ""
                        +'';
                    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="用户名                                姓名" +
                                    "角色职务联系方式";
                                for (var i = 0; i ' + result.list[i].REALNAME
                                        + '' + result.list[i].ROLEID
                                        + '' + result.list[i].ROLENAME
                                        + '' + ""
                                        +'';
                                    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

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