avalon實現分頁組件

前言

 分頁組件比較常見，可是用avalon實現的見的很少，這個分頁組件，能夠適配2種分頁方式，

第一種是每次點擊下一頁，就請求一次後臺，並返回當頁數據和總條數，我稱之爲假分頁；

第二種是一次性把全部數據取出，每次點擊分頁，都是在一個數組中截取數據，而不請求後臺，我稱之爲真分頁；

在這個組件中，假分頁和真分頁在使用上，只是在VM中增長一個pageData屬性（用於存放每頁的數據）便可。

源碼請參照：http://runjs.cn/code/xfqlscmq

HTML部分

<div ms-controller="mySingerCtrl">
        <div class="wgzd_cnMain01cn01">
            <div class="zhuboList">
                <div class="zhuboList01" ms-repeat="pageData">
                    <a target="_blank" class="zhuboLIst01_pic" href="javascript:;">
                        <img ms-attr-src="el.pic">
                    </a>
                    <div class="zhuboList01R"><a target="_blank">{{decodeURIComponent(el.name)}}</a></div>
                </div>
            </div>
        </div>
        <div class="fanye" ms-if="totalPage > 1">
            <a href="javascript:;" ms-on-click="goPage(1)"><span class="fanye01"></span></a>
            <a href="javascript:;" ms-on-click="goPage(pageNo -1 < 1 ? 1 : pageNo -1)"><span class="fanye02"></span></a>
            <a href="javascript:;" ms-on-click="goPage(el)" ms-repeat="totalPageArr" ms-attr-class="el == pageNo ? 'fanyeon' : ''">{{ el }}</a>
            <a href="javascript:;" ms-on-click="goPage(pageNo + 1 >= totalPage ? totalPage : pageNo +1)"><span class="fanye03"></span></a>
            <a href="javascript:;" ms-on-click="goPage(totalPage)"><span class="fanye04"></span></a>
        </div>
    </div>

VM部分

var mySingerVM = avalon.define({
    $id: "mySingerCtrl", //- id
    pageData: [], //- 分頁數據，用於展現，每頁18條
    data: [], //- 數據
    pageNo: 1, //- 頁碼
    pageSize: 18, //- 每頁多少條記錄
    totalPage: 1, //- 總頁數
    totalPageArr: [], //- 總頁數數組，用於循環頁數
    goPage: function(pageNo) {
        mySingerVM.pageNo = pageNo;
    }
});

 

初始化部分

//- 獲取數據主播數據 
    function init() {
        $.getJSON("http://zhiboserver.kuwo.cn/proxy.p?src=MUSIC_WEB&cmd=gethall&type=1&callback=?", function(json) {
            mySingerVM.data = json.roomlist;
        });
    }

    avalon.ready(function() {
        init();
        page.init(mySingerVM);
    });

 

Page組件部分

//- 分頁功能分爲兩種, 
    //-        第一種: 一次所有取出, 假分頁
    //-     第二種: 每次點擊都請求一頁數據, 真分頁
    //-     這個分頁方法, 對兩種分頁都有效果, 假分頁須要有一個data對象, 存放所有數據
    var page = {
        init: function(pageVM) {
            var _this = this;
            // _this.initPage(pageVM);
            pageVM.$watch("pageNo", function() { //- 監聽頁碼變化，點擊分頁時, 從新初始化分頁
                _this.initPage(pageVM);
            });
            //- 監聽數據長度，主要是解決初始時, 數據爲空, jax請求時, 數據存在以後, 初始化分頁
            if (pageVM.data) { //- 假分頁的方式
                pageVM.$watch("data.length", function() {
                    _this.initPage(pageVM);
                });
            } else { //- 真分頁的方式
                pageVM.$watch("pageData.length", function() {
                    _this.initPage(pageVM);
                });
            }
        },
        initPage: function(pageVM) { //- 初始化分頁
            pageVM.totalPageArr = [];
            var _pageNo = pageVM.pageNo;
            var _pageSize = pageVM.pageSize;
            var totalCnt = 1;
            if (pageVM.data) { //- 有data對象, 斷定爲假分頁方式
                pageVM.pageData = [];
                totalCnt = pageVM.data.size();
                var cnt = _pageNo * _pageSize < totalCnt ? _pageNo * _pageSize : totalCnt; //- 防止超出總數
                for (var i = (_pageNo - 1) * _pageSize; i < cnt; i++) {
                    pageVM.pageData.push(pageVM.data[i]);
                }
            } else {
                totalCnt = pageVM.totalCnt;
            }
            pageVM.totalPage = totalCnt % _pageSize == 0 ? parseInt(totalCnt / _pageSize) : parseInt(totalCnt / _pageSize) + 1;
            for (var i = 0; i < pageVM.totalPage; i++) { //- 填充，用於分頁循環，由於Avalon不支持數字循環，因此必須把數據轉成數組                  
                pageVM.totalPageArr.push(i + 1);
            }

            var _arr = pageVM.totalPageArr; //- 處理頁數過多時的問題
            if (_arr.size() > 5) {
                if (_pageNo - 2 > 0 && _arr.size() - _pageNo > 2) { //- 若是頁碼在中間
                    _arr.splice(0, (_pageNo - 3)); //- 先把前面的截取
                    var length = _arr[_arr.size() - 1] - (_pageNo + 2);
                    _arr.splice(5, length); //- 再截取後面的
                } else if (_pageNo - 2 <= 0) { //- 頁碼在左邊時
                    var length = _arr[_arr.size() - 1] - 5;
                    _arr.splice(5, length); //- 再截取後面的
                } else if (_arr.size() - _pageNo <= 2) { //- 頁碼在右邊時
                    var length = _arr[_arr.size() - 1] - 5;
                    _arr.splice(0, length); //- 再截取後面的
                }
            }
        }
    };