jquery.pagination.js分頁插件的使用

一、引用jquery.pagination.js

<script src="${ctx}/themes/b2b2cv2/doctor/js/message/jquery.pagination.js"></script>

 

二、發送2次ajax請求，第一次需傳入首頁和頁大小，返回數據獲得全部數據的長度；

　　第二次發送請求傳入點擊的頁碼號和頁的大小，返回數據獲得點擊頁的數據

 

　　 參考連接：

　　　　一、https://blog.csdn.net/baidu_25343343/article/details/70478467

　　　　二、https://blog.csdn.net/Fanbin168/article/details/49847931

　　代碼以下：

　　var pageSize = 2;                //聲明頁大小的變量

        var dataCount, pageCount;

        $.ajax({

            url: url,

            type: 'POST',

            data: {

                 pageSize: pageSize,    //第一次ajax請求需傳的參數

                pageNumber: 1

            },

            dataType: 'json',

            cache: false,

            success: function(datas) {

                console.log(datas.data.list);

                if(datas.result == 1) {

                    var html = template('tpl', {

                        list: datas.data.list,

                    });

                    $(className).html(html);

                }

                 dataCount = datas.data.count;  //返回的數據得到數據庫中全部數據的數量，

                  pageCount = Math.ceil(dataCount / pageSize)；//算出總頁數

                $('.M-box').pagination({

                    pageCount: pageCount,  //總頁數

                    coping: true,

                    homePage: '首頁',

                    endPage: '末頁',

                    prevContent: '<< 上一頁',

                    nextContent: '下一頁 >>',

                    callback: function(api) {

                        console.log(api.getCurrent())

                        var currentPage = api.getCurrent();  //獲取當前點擊的頁碼

                        $.ajax({

                            url: url,

                            type: 'POST',

                            data: {

                                 pageSize: pageSize,   //第二次請求需傳入的參數（頁碼的長度及當前點擊的頁碼）

                                pageNumber: currentPage

                            },

                            dataType: 'json',

                            cache: false,

                            success: function(datas) {

                                console.log(datas);

                                if(datas.result == 1) {

                                    var html = template('tpl', {

                                        list: datas.data.list

                                    });

                                    $(className).html(html);

                                }

                            },

                            error: function() {

                                alert("請求接口失敗。")

                            }

                        })

                    }

                });

            },

            error: function() {

                alert("請求失敗！！！")

            }

        })