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";    }

——-效果图如下:

点这里可以跳转到人工智能网站

发表评论