pagination in angularjs

来源：互联网发布：淘宝的kindle 官方重封编辑：程序博客网时间：2024/06/05 04:43

源自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();}])

0 0