Angular分頁指令, 簡單配置便可使用

時間 2019-11-09

原文原文鏈接

指令html模板

page.htmlhtml

<div>
        <div class="pull-left pagination-detail">
            <span class="pagination-info">
            顯示第 {{(conf.currentPage-1) * conf.pageSize + 1}} 到第 {{conf.currentPage == conf.totalPage ? conf.total : conf.currentPage * conf.pageSize }} 條記錄 , 總共 {{conf.total}} 條記錄
            </span>
            <span class="page-list">
                , 每頁顯示
                <span class="btn-group dropup">
                    <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
                        <span class="page-size">{{conf.pageSize}}</span>
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu page-size-select" role="menu">
                        <li ng-repeat="n in conf.pageSizeList" ng-click="changePageSize(n)">
                            <a ng-bind="n"></a>
                        </li>
                    </ul>
                </span>
                條記錄
            </span>
        </div>
    
        <ul class="pagination pull-right pagination-nav" ng-show="conf.totalPage>1">
            <li ng-class="{true:'active'}[conf.currentPage==1]">
                <a ng-click="loadPage(1)">«</a>
            </li>
            <li ng-class="{true:'disabled'}[conf.currentPage==1]">
                <a ng-click="prev()"> ‹ </a>
            </li>
            <li ng-class="{true:'active'}[conf.currentPage==page]" ng-repeat="page in conf.pages">
                <a ng-click="loadPage(page)" ng-bind="page"></a>
            </li>
            <li ng-class="{true:'disabled'}[conf.currentPage==conf.totalPage]">
                <a ng-click="next()"> › </a>
            </li>
            <li ng-class="{true:'active'}[conf.currentPage==conf.totalPage]">
                <a ng-click="loadPage(conf.totalPage)"> » </a>
            </li>
        </ul>
    </div>

指令

app.directive('pagination', ['$http', '$q', function ($http, $q) {
            return {
                restrict: 'E',
                templateUrl: './modules/business/page.html',
                replace: true,
                scope: {
                    list: '=', //列表數據
                    url: '@', //接口url
                    method: '@', //get or post
                    requestParam: '=', //請求參數
                    requestData: '=', //請求對象數據
                    event: '@' //事件名, 外部調用分頁查詢的事件
                },
                link: function (scope, element) {
                    //監聽事件
                    scope.$on(scope.event, function (event, data) {
                        console.log(scope.event, data);
                        scope.loadData();
                    });
    
                    //ajax服務
                    var AjaxService = {
                        get: function (url, params) {
                            var defered = $q.defer();
                            $http({
                                method: 'GET',
                                url: url,
                                params: params
                            })
                                .success(function (data) {
                                    defered.resolve(data);
                                })
                                .error(function (err) {
                                    defered.reject(err);
                                });
                            return defered.promise;
                        },
                        post: function (url, params, data) {
                            var defered = $q.defer();
                            $http({
                                method: 'POST',
                                url: url,
                                params: params,
                                data: data
                            })
                                .success(function (data) {
                                    defered.resolve(data);
                                })
                                .error(function (err) {
                                    defered.reject(err);
                                });
                            return defered.promise;
                        }
                    };
    
                    //配置參數
                    scope.conf = {
                        currentPage: 1,
                        totalPage: 1,
                        endPage: 1,
                        pageSize: 15,
                        pages: [],
                        total: 0,
                        pageSizeList: [10, 15, 20, 25, 30, 35, 40, 45, 50]
                    };
    
                    //加載數據
                    scope.loadData = function () {
                        scope.requestParam = scope.requestParam instanceof Object && scope.requestParam || {};
                        scope.requestData = scope.requestData instanceof Object && scope.requestData || {};
                        scope.requestParam.page = scope.conf.currentPage;
                        scope.requestParam.pageSize = scope.conf.pageSize;
    
                        var promise = null;
                        if (scope.method == 'GET') promise = AjaxService.get(scope.url, scope.requestParam);
                        else if (scope.method == 'POST') promise = AjaxService.post(scope.url, scope.requestParam, scope.requestData);
                        promise.then(function (resp) {
                            if (resp && resp.code == 0) {
                                if (resp.result && resp.result instanceof Array) scope.list = resp.result;
                                else scope.list = [];
                                if (resp.total && typeof(resp.total) == 'number') scope.conf.total = resp.total;
                                else scope.conf.total = 0;
                            }
                            scope.calcPages();
                        });
                    };
    
                    //改變頁大小
                    scope.changePageSize = function (n) {
                        scope.conf.pageSize = n;
                        scope.conf.currentPage = 1;
                        scope.loadData();
                    };
    
                    //下一頁
                    scope.next = function () {
                        if (scope.conf.currentPage < scope.conf.totalPage) {
                            scope.conf.currentPage++;
                            scope.loadData();
                        }
                    };
    
                    //上一頁
                    scope.prev = function () {
                        if (scope.conf.currentPage > 1) {
                            scope.conf.currentPage--;
                            scope.loadData();
                        }
                    };
    
                    //加載指定頁
                    scope.loadPage = function (page) {
                        if (scope.conf.currentPage != page) {
                            scope.conf.currentPage = page;
                            scope.loadData();
                        }
                    };
    
                    //查詢
                    scope.query = function () {
                        scope.conf.currentPage = 1;
                        scope.loadData();
                    };
    
                    //計算頁數
                    scope.calcPages = function () {
                        //計算總頁數
                        scope.conf.totalPage = Math.ceil(scope.conf.total / scope.conf.pageSize);
                        //生成快捷頁碼
                        if (scope.conf.currentPage > 1 && scope.conf.currentPage < scope.conf.totalPage) {
                            scope.conf.pages = [
                                scope.conf.currentPage - 1,
                                scope.conf.currentPage,
                                scope.conf.currentPage + 1
                            ];
                        } else if (scope.conf.currentPage == 1 && scope.conf.totalPage > 1) {
                            scope.conf.pages = [
                                scope.conf.currentPage,
                                scope.conf.currentPage + 1
                            ];
                        } else if (scope.conf.currentPage == scope.conf.totalPage && scope.conf.totalPage > 1) {
                            scope.conf.pages = [
                                scope.conf.currentPage - 1,
                                scope.conf.currentPage
                            ];
                        }
                    };
    
                    //指令加載完後當即查詢
                    scope.query();
                }
            };
        }]);

爲了代碼集中一點, 我把ajaxservice定義在了內部. 
指令基本包含分頁所需功能,且不需修改, 下次就能夠直接引用.

應用

index.htmlajax

<pagination list="businesses" url="/business/select" event="event-pagination-query-bp" method="POST"
                    request-param="requestParam"
                    request-data="requestData">
        </pagination>

示例代碼中, list參數是雙向綁定的列表數據, businesses就是頁面table綁定的ng-repeat循環的列表集合, url是後臺接口, event是事件名, method是接口方法,GET or POST, request-param就是請求參數,request-data就是請求體.promise

controller.jsapp

//分頁請求參數
    $scope.requestParam = {};
    //分頁請求對象(模糊查詢時,對象屬性能夠爲列表數據的字段)
    $scope.requestData = {};

    /**
     * 廣播通知分頁指令
     */
    $scope.query = function () {
        $scope.$broadcast('event-pagination-query-bp', 'query');
    };

當新增數據或者更新數據後, 能夠調用controller裏的query方法, 通知指令進行分頁查詢post