<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>

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);

    });

//- 分页功能分为两种,

    //-        第一种: 一次全部取出, 假分页

    //-     第二种: 每次点击都请求一页数据, 真分页

    //-     这个分页方法, 对两种分页都有效果, 假分页需要有一个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); //- 再截取后面的

                }

            }

        }

    };