Angular1.0分页组件

基于Angular1.0封装的分页组件

分页组件实现原理

1.父组件传入总数据数量

2.分页组件返回当前显示页，每页显示数量

3.父组件根据分页组件返回的两个值，控制数据的分页显示

实现过程

首先封装分页组件paging

pageSelectFrontPartial.html

<style>
    .box-footer {
        text-align:center;
    }
    #paging li {
        display: inline-block;
        border: 1px solid #DDDDDD;
        cursor: pointer;
        margin-right: 5px;
    }

        #paging li a{
            padding: 10px 13px;
            height: 37px;
            line-height: 37px;
            color: #A3C756;
        }

    .active {
        color: #FFFFFF!important;
        background-color: #A3C756;
    }
</style>


<div class="box-footer clear">
    <ul id="paging" class="clear">
        <li><a ng-click="firstPage()"><<</a></li>
        <li><a ng-click="previous()"><</a></li>
        <li ng-repeat="page in pagesArray"><a ng-click="gitCurrentPage(page)" ng-class="{active:page == currentPage}">{{page}}</a></li>
        <li><a ng-click="next()">></a></li>
        <li><a ng-click="lastPage()">>></a></li>
    </ul>
</div>

在项目中注册分页组件

(function () {
    'use strict';
    var app = angular.module('dynavin-flex', []);
    app.component("appPaging", {
        templateUrl: "/templates/PageSelectFrontPartial.html",            //这里的路径需要改成你项目中实际的.html放置的路径
        replace: true,
        controller: function ($scope) {
            $scope.currentPage = 1;                                     //当前页
            $scope.pagCount = 10;                                        //每页数量
            $scope.pages = 0;                                           //总页数
            $scope.pagesArray = [];                                     //存放总页数数组

            $scope.$on('totalCount', function (e, totalCount) {         //Input
                $scope.leng = totalCount;                               //获取总数量
                $scope.pages = $scope.leng % $scope.pagCount == 0 ? $scope.leng / $scope.pagCount : parseInt($scope.leng / $scope.pagCount) + 1;
                for (var i = 1; i <= $scope.pages; i++) {
                    $scope.pagesArray.push(i);
                }
                $scope.pagesArray = Array.from(new Set($scope.pagesArray));         //数组去重

                if ($scope.pages > 5) {                                             //限定显示的页数宽度
                    $scope.pagesArray = [];
                    $scope.pagesArray.push($scope.currentPage);
                    if ($scope.currentPage < $scope.pages - 2) {
                        $scope.pagesArray.push($scope.currentPage + 1);
                        $scope.pagesArray.push($scope.currentPage + 2);
                    }
                    if ($scope.currentPage > 2) {
                        $scope.pagesArray.unshift($scope.currentPage - 1);
                        $scope.pagesArray.unshift($scope.currentPage - 2);
                    }
                }
            });


            //发射数据
            $scope.emitCurrentPage = function () {
                $scope.$emit('currentPage', $scope.currentPage);            //Output当前页
                $scope.$emit('pagCount', $scope.pagCount);                  //Output每页数量
            }
            $scope.emitCurrentPage();

            $scope.init = function () {

            }
            $scope.init();

            $scope.gitCurrentPage = function (page) {
                $scope.currentPage = page;
                $scope.emitCurrentPage();
            };

            $scope.firstPage = function () {
                $scope.currentPage = 1;
                $scope.emitCurrentPage();
            };
            $scope.previous = function () {
                if ($scope.currentPage != 1) {
                    $scope.currentPage -= 1;
                } else {
                    $scope.currentPage = 1;
                }
                $scope.emitCurrentPage();
            };
            $scope.next = function () {
                if ($scope.currentPage != $scope.pages) {
                    $scope.currentPage += 1;
                } else {
                    $scope.currentPage = $scope.pages;
                }
                $scope.emitCurrentPage();
            };
            $scope.lastPage = function () {
                $scope.currentPage = $scope.pages;
                $scope.emitCurrentPage();
            };
        }
    });
    
})();

在父组件模板中插入分页组件，getCartItem( )根据你的项目修改

<app-paging></app-paging>

父组件中控制器添加以下代码

$scope.$on('currentPage', function (e, newCurrentPage) {
                $scope.currentPage = newCurrentPage;
            });
            $scope.$on('pagCount', function (e, newPagCount) {
                $scope.pagCount = newPagCount;
            });
            $scope.$watch('currentPage', function () {
                $scope.getCartItem($scope.currentPage, $scope.pagCount);
            });


            $scope.getCartItem = function (currentPage = 1,pagCount = 10) {
                DynavinCloudApi.getCartItem({ filter: filter, page: currentPage, count: pagCount }).then(
                    // callback function for successful http request
                    function success(response) {
                        scrollTo(0, 0);                    //回到页面顶部
                        var i = 0;
                        $scope.cartItems = [];
                        $scope.id = response.data.cartId;
                        $scope.pluginCount = response.data.pluginCount;
                        $scope.productCount = response.data.productCount;
                        $scope.totalCount = response.data.totalCount;
                        $scope.$broadcast('totalCount', $scope.totalCount);


                        if (response.data.productCarts !== null) {
                            $scope.productCount = response.data.productCarts.length;

                            for (i = 0; i < $scope.productCount; i++) {
                                var prodcut = response.data.productCarts[i];
                                prodcut.deleteHref = '/Cart/ConfirmAction/?action=DeleteCartItem&cartId=' + $scope.id + '&' + 'type=product&itemId=' + prodcut.itemCartId;
                                $scope.cartItems.push(prodcut);
                            }
                        }

                        if (response.data.pluginCarts !== null) {
                            $scope.pluginCount = response.data.pluginCarts.length;
                            for (i = 0; i < $scope.pluginCount; i++) {
                                var plugin = response.data.pluginCarts[i];
                                plugin.deleteHref = '/Cart/ConfirmAction/?action=DeleteCartItem&cartId=' + $scope.id + '&' + 'type=plugin&itemId=' + plugin.itemCartId;
                                $scope.cartItems.push(plugin);
                            }
                        }


                        $scope.deleteSelectedHref = '/Cart/ConfirmAction/?action=DeleteCartItem&cartId=' + $scope.id + '&' + 'type=' + filter + '&itemId=0';
                        $scope.totalCount = $scope.productCount + $scope.pluginCount;
                        $scope.updateBySelected();
                        $scope.isShow = true;
                    },
                    // callback function for error in http request
                    function error(response) {
                        $scope.handleError('response code: ' + response.status + '; statusText: ' + response.statusText);
                    }
                );
            }
            $scope.getCartItem();                      //初始化第一页