pagination in angularjs

源自stackOverFlow

service

var rapid = angular.module('rapid');
rapid.service('pagerOptions', function () {
    'use strict';
    return {
        newOptions: function () {
            return {
                totalItems: 0,
                itemsPerPage: 50,
                page: 1,
                sortBy: '',
                isASC: true,
                filters: null,
                sortOptions: {
                    by: '',
                    isASC: true,
                    sort: function (sortBy) {
                        if (sortBy === this.parent.sortBy) {
                            this.parent.isASC = !this.parent.isASC;
                        } else {
                            this.parent.sortBy = sortBy;
                            this.parent.isASC = true;
                        }

                        this.parent.resetPage();
                        if (typeof this.parent.onPageChange === "function")
                            this.parent.onPageChange();
                    }
                },
                resetPage: function () {
                    this.page = 1;
                },
                goToPage: function (page) {
                    this.page = page;
                    if (typeof this.onPageChange === "function")
                        this.onPageChange();
                },
                init: function () {
                    this.sortOptions.parent = this; // it allows the Methods object to know who its Parent is
                    delete this.init; // if you don't need the Init method anymore after the you instanced the object you can remove it
                    return this; // it gives back the object itself to instance it
                }
            }.init();
        }
    };
})

directive

rapid.directive('footerPager', function () {
    return {
        restrict: 'E',
        transclude: true,
        template:
            '<div class="col-xs-9 text-right" ng-cloak>\
                <span ng-if="options.totalItems > options.itemsPerPage">\
                    <pagination \
                        ng-model="options.page" \
                        total-items="options.totalItems" \
                        items-per-page="options.itemsPerPage" \
                        ng-change="options.goToPage(options.page)" \
                        max-size="5" rotate="false" boundary-links="true" \
                        previous-text="&lsaquo;" next-text="&rsaquo;" \
                        first-text="&laquo;" last-text="&raquo;" \
                        class="pagination-sm">\
                    </pagination>\
                </span>\
            </div>\,
        scope: {
            options: '='
        }
    }
});

html

<footer-pager options="pagingOptions" id="footer"/>

controller

rapid.controller('HomeListController',    
    ['$scope', 'adminSvc','pagerOptions',                                                                                       
    function auditLogCtrl($scope,adminSvc,pagerOptions) {       
    $scope.pagingOptions = pagerOptions.newOptions();
    $scope.pagingOptions.sortBy = "CreatedDate";
    $scope.pagingOptions.itemsPerPage = 10;
    $scope.pagingOptions.onPageChange = loadData; //loadData is a method load the data to the page.
    var numberOfSearchPerfomed = 0;
    $scope.data= {};

    function loadData() {
        $scope.pagingOptions.filters = selectedFilters;
        service.getData(vm.pagingOptions) //Method will fetch data from db and show in the view based on pagingOptions.
            .success(function (result) {
                $scope.data= result.Data;
                $scope.pagingOptions.totalItems = result.TotalCount; // TotalCount represents the total number of records not page wise.
                $scope.enableResetButton = numberOfSearchPerfomed >= 1;
            });
    }

    loadData();
}])