how to use pagination in angularjs?

Question

So i am developing this app in which i want to apply pagination to list of templates.

template objects are stored in the list.

I am displaying thumbnails of templates on the page and i want to apply pagination for this page. so far I have tried following solution but it didn't work.

list.html

<div class="container">
<div class="homepage-header">
    <h2 class="homepage-title text-center wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown; -webkit-animation-name: fadeInDown;"> TEMPLATES </h2>
</div>

<div class="row">
    <div class="col-md-6 col-sm-6" style="text-align: left">
        <div class="form-inline">
            <div class="form-group has-feedback has-clear">
                <input type="text" class="form-control" ng-model="searchParam" ng-model-options="{ debounce: 400 }" placeholder="Search template ..."
                />
                <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" ng-click="searchParam = '';
                  retreivePageData(0);" ng-show="searchParam" style="pointer-events: auto; "></a>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-sm-6" style="text-align: right; padding-right: 30px;">
        <div class="form-inline">
            <label>
                <input type="radio" ng-model="selectedOption" value="All" ng-change="retrieveTemplates(selectedOption)"> All
            </label>
            <label>
                <input type="radio" ng-model="selectedOption" value="Annotate" ng-change="retrieveTemplates(selectedOption)"> Annotate
            </label>
            <label>
                <input type="radio" ng-model="selectedOption" value="Rapid" ng-change="retrieveTemplates(selectedOption)"> Component
            </label>               
        </div>
    </div>
</div>

<div class="homepage-ui-showcase-2-css row wow zoomIn animated" style="height: 402px;padding: 5px 0px; visibility: visible; animation-name: zoomIn; -webkit-animation-name: zoomIn;">
    <div ng-repeat="(templateIndex, templateModel) in templatesList | filter:searchParam | limitTo: itemsPerPage">
        <div class="active col-md-3 col-lg-3 col-sm-6 col-xs-12 mix design painting" style="display: inline-block;padding-top: 10px;"
        ng-init="visible=false" ng-mouseover="visible=true" ng-mouseleave="visible=false">
            <div class="portfolio-item shadow-effect-1 boxShadow" style="max-width: 250px;padding:0.3px;border:2px dotted  #bebede;cursor: pointer">
                <div class="mainBadge">
                    <kbd>{{templateModel.type}}</kbd>
                </div>
                <div ng-switch on="{{templateModel.type !== undefined && templateModel.type === 'Annotate'}}">
                    <div ng-switch-when="false" style="height: 130px;" ui-sref="/designer/:pageId({pageId:templateModel.id})" class="portfolio-img ">
                        <i style="opacity:0.4;padding-top:35px;padding-left:15px;margin-left: 30%;" class="fa fa-puzzle-piece fa-4x"></i>
                    </div>
                    <div ng-switch-when="true" style="height: 130px;" ui-sref="annotator/:annotatedTemplateId({annotatedTemplateId:templateModel.id})"
                    class="portfolio-img ">
                        <i style="opacity:0.4;padding-top:35px;padding-left:15px;margin-left: 30%;" class="fa fa-file-image-o fa-4x"></i>
                    </div>
                </div>

                <div class="portfolio-item-content" title="{{templateModel.name}}">
                    <h3 class="header" style="font-size: 13px;text-align: center;display:inline;">
                        {{templateModel.name}}
                    </h3>
                    <small class="pull-right" ng-show="visible" style="display: inline; padding-top: 4px">
                        <div ng-switch on="{{templateModel.type !== undefined && templateModel.type === 'Annotate'}}">
                            <div ng-switch-when="true" href="#" class="btn btn-xs btn-danger" title="Generate Communication"
                             ui-sref="generateCommunication({mode:'A',id: templateModel.id})"
                             ng-disabled="!templateModel.dynamic_entity"> <!--style="color:#9d9d9;"-->
                                <i class="fa fa-file-pdf-o"></i>
                            </div>
                            <div ng-switch-when="false" href="#" class="btn btn-xs btn-danger" title="Generate Communication"
                             ui-sref="generateCommunication({mode:'T',id: templateModel.id})"
                             ng-disabled="!templateModel.dynamic_entity"> <!--style="color:#9d9d9;"-->
                                <i class="fa fa-file-pdf-o"></i>
                            </div>
                        </div>
                    </small>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row " style="margin-top: 10px; padding-top:0px;">
    <div class="pagination-div pull-right" style="">
        <uib-pagination  ng-model="currentPage" total-items="totalItems" max-size="maxSize" boundary-links="true">
        </uib-pagination>                       
    </div>
</div>

list.controller.js

'use strict';
angular.module('rapid').controller('HomeListController',
    function($scope, $rootScope, $window, $uibModal, ServiceFactory, toaster, ReadFileService, AnnotationService, AnnotateService, DocumentService) {

        $scope.templatesList = [];
        $scope.filteredTemplates = [];
        $scope.selectedOption = 'All';
        $scope.annotateTemplateMeta = [];
        $scope.rapidTemplateMeta = [];


        $scope.init = function() {

            $scope.selectedOption = "All";
            //$scope.options = [{'label':'All', 'value':'All'}, {'label':'Annotate', 'value':'Annotate'}, {'label':'Component', 'value':'Component'}];
            $scope.retrieveTemplates('All');
            $scope.currentPage = 1;
        };

        $scope.retrieveTemplates = function(selectedOption) {
            $scope.templatesList = [];
            if (selectedOption === 'Annotate') {
                $scope.fetchAnnotationTemplates(selectedOption);
            } else if (selectedOption === 'Rapid') {
                $scope.fetchRapidTemplates(selectedOption);
            } else {
                $scope.fetchAnnotationTemplates(selectedOption);
            }
                       
        };

        $scope.fetchAnnotationTemplates = function(selectedOption) {
            AnnotateService.get().$promise.then(function(result) {
                $scope.annotateTemplateMeta = result[0];
                console.log('Annotated template count :: ' + result[0].length);
                if (selectedOption === 'All') {
                    $scope.fetchRapidTemplates(selectedOption);
                } else {
                    $scope.prepareTemplateList(selectedOption);
                }
            });
        };

        $scope.fetchRapidTemplates = function(selectedOption) {
            ServiceFactory.PagesService.getAllPages().$promise.then(function(result) {
                $scope.rapidTemplateMeta = result[0];
                console.log('Rapid template count :: ' + result[0].length);
                $scope.prepareTemplateList(selectedOption);                
            });
        };

        $scope.prepareTemplateList = function(selectedOption) {
            $scope.itemsPerPage = 8;
            var getPaginatedTemplateList = 'getList';
            //$scope.currentPage = 0;
            if (selectedOption === 'Annotate') {
                $scope.annotateTemplateMeta.forEach(function(annotate) {
                    var templateObject = {};
                    templateObject = { id: annotate.id, name: annotate.name, type: "Annotate", dynamic_entity: annotate.dynamic_entity };
                    $scope.templatesList.push(templateObject);                    
                });

            } else if (selectedOption === 'Rapid') {
                $scope.rapidTemplateMeta.forEach(function(rapidTemplate) {
                    var templateObject = {};
                    templateObject = { id: rapidTemplate._id, name: rapidTemplate.name, type: "Component", dynamic_entity: rapidTemplate.pageObj.entity };
                    $scope.templatesList.push(templateObject);
                });                
            } else {
                $scope.annotateTemplateMeta.forEach(function(annotate) {
                    var templateObject = {};
                    templateObject = { id: annotate.id, name: annotate.name, type: "Annotate", dynamic_entity: annotate.dynamic_entity };
                    $scope.templatesList.push(templateObject);
                });
                $scope.rapidTemplateMeta.forEach(function(rapidTemplate) {
                    var templateObject = {};
                    templateObject = { id: rapidTemplate._id, name: rapidTemplate.name, type: "Component", dynamic_entity: rapidTemplate.pageObj.entity };
                    $scope.templatesList.push(templateObject);
                });

                $scope.totalItems = $scope.templatesList.length;
                $scope.maxSize = 5;                
            }
            console.log($scope.templatesList); 
            console.log($scope.currentPage);
            
        };

        $scope.setPage = function(pageNo) {
            $scope.currentPage = pageNo;
        };

        $scope.pageChanged = function() {
            alert('Page changed to: ' + $scope.currentPage);
            $log.log('Page changed to: ' + $scope.currentPage);
        };

        $scope.init();


        $scope.$watch('currentPage + numPerPage', function() {
            console.log('is it coming.....?');
            var begin = (($scope.currentPage - 1) * $scope.itemsPerPage)
                , end = begin + $scope.itemsPerPage;
            $scope.filteredTemplates = $scope.templatesList.slice(begin, end);
        });

    });

is there anything wrong with my code?

please provide some inputs on this.

What is not working? I think people are more likely to dive in to your wall of code if they know where to begin. — henrikmerlander
– henrikmerlander, Commented Mar 18, 2016 at 8:33
@henrikmerlander my pagination is displaying only one link.no links are displayed to view further templates — Bhushan Gadekar
– Bhushan Gadekar, Commented Mar 18, 2016 at 9:03

Harun · Accepted Answer · 2016-03-18 09:51:55Z

See how to create a custom paging which will deal with the performance and you will have control on the paging control style.

Create a service to set a paging object

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

Create a custom directive to design paging template as follows,

    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: '='
        }
    }
});

In cshtml file use the above created custom directive as follows,

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

In corresponding controller.js file create and set the 'pagerOptions' object by calling the 'newOptions' method of the above created service,

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

Collectives™ on Stack Overflow

how to use pagination in angularjs?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related