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 listExamine=userService.queryUserInfo();//获取总数据量
            try {
                    rowCount=listExamine.size();//总条数
                   //通过计算,得到分页应该需要分几页,其中不满一页的数据按一页计算
                   if(rowCount%pageSize!=0)
                   {
                       rowCount = rowCount / pageSize + 1;
                   }
                   else
                   {
                       rowCount = rowCount / pageSize;
                   }
               } catch (Exception e) {
           }
             List 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";
        }

    -------效果图如下:

    Bootstrap Paginator分页插件超详细使用示例_第1张图片

     

     

    你可能感兴趣的:(后端分页)