1. 程式人生 > >Bootstrap Paginator分頁外掛超詳細使用示例

Bootstrap Paginator分頁外掛超詳細使用示例

                      --------jsp頁面只需要兩個div,一個用於拼接table,一個放分頁相關頁碼

                      <div id="select" height:520px;">
                            <table class="table  table-striped table-bordered table-hover  " id="userTable"> <!-- table table-bordered 帶邊框的樣式 -->
                             </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";
    }

-------效果圖如下: