[项目中学习]---avalon分页插件

    分页插件和表格的使用很相似，都是给avalon封装好的插件赋值，然后事件驱动就可以了。

    我遇到的问题是，后台接口给我返回的是一个无分页的list集合，但是需求要求是分页显示。就类似淘宝中的查看订单对应的商品详情一样：

    那么这就用到了分页的插件，其实如果仔细看的话，就相当于把我常用的表格加分页的组合中，表格单独拿出来，分页单独拿出来。

在jsp页面上写这么一句：

<div class="text-right" ms-widget="pager,cgpager,$cgPagerOpts"></div>

然后在查询List的js方法上面加上对这个分页插件的控制，让list的总条数等于分页的总条数，让当前页等与分页的当前页：

pagerVM = avalon.vmodels.cgpager;
        if(pagerVM){
            data.limit = pagerVM.perPagers;
            data.page = pagerVM.currentPage;
        }
//dataResult是查询到的数据
pagerVM.totalItems = dataResult.totalCount;
 pagerVM.curentPage = dataResult.page;

return avalon.controller(function($ctrl) {
 
       
        $ctrl.$onRendered = function(params) {
            commentGoodsDetailController = avalon.define("commentGoodsDetailController", function(vm) {
                    vm.$cgPagerOpts = {
                        onJump : function(e, pagerVM) {
                            
                            // ,pagerVM为要页
                            showList(data); // 重新加载数据
                        },
                        canChangePageSize : true,
                        perPages : 5, // 默认每页条数
                        options : [10, 20, 30, 50 ],
                        showJumper : true, 
                        dropdown : {
                            onChange : function(
                                    newValue,
                                    oldValue,
                                    vmodel) {
                                // 改变每页条数时触发
                                avalon.vmodels.cgpager.pager.perPages = newValue;// 重置每页条数
                                showList(data); // 重新加载数据
                            }
                        }
                    }

            });   
            avalon.scan();
            setTimeout(function(){
                showList();//查询数据的方法
 
            },300)
        }
       
        $ctrl.$onEnter = function() {
 
        }
          
        $ctrl.$onBeforeUnload = function() {
            delete avalon.vmodels['commentGoodsDetailController'];
        }
            
        $ctrl.$vmodels = []
    });
 
}

然后再在jsp页面用ms-repeat来循环显示查询出的list中的数据就可以了。

最后推荐一个网站，里面有好多类似ms-repeat这样应用在页面的简单的函数以及使用例子：

http://www.cnblogs.com/rubylouvre/p/3181291.html