pagination in angularjs

本文主要是介绍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 isdelete this.init; // if you don't need the Init method anymore after the you instanced the object you can remove itreturn 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();
}])

这篇关于pagination in angularjs的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---