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

来源：互联网发布：java md5加密与解密编辑：程序博客网时间：2024/05/18 16:39

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

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

阅读全文

6 0