后端基于laravel5的分页指令

[dreamapplehappy]

<!-- widget-paginate: 分页所需的全部数据 -->
<!-- contain-pages: 默认的分页的页数,就是默认显示几页 -->
<!-- cur-page: 当前页面 -->
<!-- widget-paginate-go: 获取当前页面的数据对应的函数 -->
       <div widget-paginate="vm.messages"
               contain-pages="5"
               cur-page="vm.cur_page"
               widget-paginate-go="vm.goPage"
               class="pull-right btn-group">
      </div>

[dreamapplehappy]

(function(){

    angular
        .module('app.widgets')
        .directive('widgetPaginate', paginate);

    function paginate() {
        var directive = {
            templateUrl: 'app/widgets/widget-paginate.html',
            restrict: 'A',
            scope: {
                // 分页的全部数据
                paginate: '=widgetPaginate',
                // 点击单独的某一页触发的函数
                paginateGo: '=widgetPaginateGo',
                // 当前分页所处的页面
                curPage: '=',
                // 页面中展示分页的多少页
                containPages: '='
            },
            link: link
        };
        return directive;

        function link(scope, element, attrs) {
            // 定义变量
            // 辅助变量确认是否是第一次初始化
            scope.first_init = false;
            // 初始化是否可以前进
            scope.go_next = true;
            // 初始化是否可以后退
            scope.go_previous = false;
            // 是否是前进或者后退按钮
            scope.isActionBtn = false;
            // 定义页面保留页码数组
            scope.contain_pages_collection = [];
            // 当前分页所处的页码
            scope.cur_page = scope.curPage;

            // 定义模板使用函数
            scope.nextContainPagesIndex = nextContainPagesIndex;
            scope.previousContainPagesIndex = previousContainPagesIndex;

            // 监听一些属性的变化
            scope.$watch('paginate', function(newValue) {
                if(newValue && !scope.first_init) {
                    // 后端返回的总共的项目数
                    scope.backend_total = scope.paginate.total;
                    // 后端数据返回的总共的页数
                    scope.backend_total_pages = scope.paginate.last_page;
                    // 确定页面保留的分页的个数
                    handleContainPages();
                    // 初始化分页的页码
                    initContainPagesIndex(scope.contain_pages);
                    scope.first_init = true;
                }

            });
            // : 监测当前页面的变化,然后发送请求
            scope.$watch('curPage', function(newValue, oldValue, scope) {
                scope.cur_page = newValue;
                if(scope.isActionBtn) {
                    scope.isActionBtn = false;
                    return scope.paginateGo(newValue);
                }
            });

            // 处理开始的页面中保留的页码数以及页面中展示的页码数
            function handleContainPages() {
                scope.go_next = scope.backend_total_pages > scope.containPages ? true : false;
                scope.contain_pages = scope.backend_total_pages > scope.containPages ? scope.containPages : scope.backend_total_pages;
            }

            // 处理页面中的分页页码
            // : 初始化分页函数
            function initContainPagesIndex(pages) {
                for(var i = 0; i < pages; i++) {
                    scope.contain_pages_collection[i] = i + 1;
                }
            }
            // : 判断是否可以前进
            function canNext() {
                var curPagesMaxIndex = scope.contain_pages_collection[scope.contain_pages_collection.length - 1];
                scope.go_next = curPagesMaxIndex === scope.backend_total_pages ? false : true;
            }
            // : 判断是否可以后退
            function canPrevius() {
                var curPagesMinIndex = scope.contain_pages_collection[0];
                scope.go_previous = curPagesMinIndex === 1 ? false : true;
            }

            // : 处理前进分页的页码
            function nextContainPagesIndex() {
                // :: 激活actionBtn
                scope.isActionBtn = true;
                // :: 判断是否超出最大的页码并且处理当前所处的页面
                var unshow_pages = scope.backend_total_pages - scope.contain_pages_collection[scope.contain_pages - 1];
                if(unshow_pages >= scope.contain_pages) {
                    for(var i = 0; i < scope.contain_pages; i++) {
                        scope.contain_pages_collection[i] += scope.contain_pages;
                    }
                    scope.curPage = scope.contain_pages_collection[0];
                }
                else if(unshow_pages > 0) {
                    var cur_max_index = scope.contain_pages_collection[scope.contain_pages - 1];
                    scope.contain_pages_collection.length = unshow_pages;
                    for(var i = 0; i < unshow_pages; i++) {
                        scope.contain_pages_collection[i] = cur_max_index + i + 1;
                    }
                    scope.curPage = scope.contain_pages_collection[0];
                }
                else {
                    // TODO
                    scope.curPage = scope.contain_pages_collection[scope.contain_pages - 1];
                }
                canNext();
                canPrevius();
            }
            // 处理后退分页的页码
            function previousContainPagesIndex() {
                // :: 激活actionBtn
                scope.isActionBtn = true;
                // :: 判断当前页面是否可以后退
                var curPagesMaxIndex = scope.contain_pages_collection[scope.contain_pages_collection.length - 1];
                if(curPagesMaxIndex > scope.contain_pages) {
                    // :: 解决项数不够的问题
                    var temp = scope.contain_pages_collection[0] - scope.contain_pages;
                    for(var i = 0; i < scope.contain_pages; i++) {
                        scope.contain_pages_collection[i] = temp + i;
                        scope.curPage = scope.contain_pages_collection[scope.contain_pages - 1];
                    }
                }
                canNext();
                canPrevius();
            }
        }

    }

})();