Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • AngularJS Pagination

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 478
    Comment on it

    We can easily apply paging on our page using AngularJs and bootstrap. Here, below is the example of this:

     

    In View:

    <div ng-app="angularPagingSample">
        <div ng-controller="PagingController">
            <h1>Angular Paging</h1>
    		 <div ng-repeat="question in filteredQuestions">
                        <div class="label label-warning">Question {{currentPage}} of {{totalItems}}.</div>
                        <div class="row">
                            <div class="col-md-12">
                                <h2>{{currentPage}}.{{question.Question}} <span ng-bind-html="question.Question"></span></h2>
                            </div>
                        </div>
                        <div class="row text-left options">
                            <input type="text" ng-model="question.Answer" class="form-control form-group" />
                        </div>
                    </div>
            <div data-pagination="" data-num-pages="totalPageCount" data-current-page="currentPage" data-max-size="maxSize" data-boundary-links="true"></div>
        </div>
    </div>

     

    Add these scripts in View:

    @section Scripts {
            @Scripts.Render("~/bundles/jqueryval")              //other js fille
            <script src="~/Scripts/Angular/PagingSample.js"></script>     //angular controller file
    <link data-require="bootstrap-css@2.3.2" data-semver="2.3.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />    //for paging css
    <script data-require="angular-ui-bootstrap@0.3.0" data-semver="0.3.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.3.0.min.js"></script>   //for paging js
        }

     

    PagingSample.js

    var app = angular.module('angularPagingSample', ['ui.bootstrap']);          //ui.bootstrap is required for paging
    app.controller("PagingController", function ($scope, $http) {
    
        $scope.pageCount = function () {
            return Math.ceil($scope.res.length / $scope.itemsPerPage);
        };
    
      var init = function ()  {
    
            var response = $http({
                method: 'GET',
                url: '/api/Home/GetQuestions'                   // get all data
            });
            response.success(function (data) {
                $scope.res = data;
                $scope.questions = $scope.res;
                $scope.totalItems = $scope.res.length;          //get total record count
                $scope.itemsPerPage = 1;
                $scope.currentPage = 1;
                $scope.filteredQuestions = $scope.res;
                $scope.$watch('currentPage + itemsPerPage', function () {
                    var begin = (($scope.currentPage - 1) * $scope.itemsPerPage),
                      end = begin + $scope.itemsPerPage;
    
                    $scope.filteredQuestions = $scope.res.slice(begin, end);
                });
                $scope.totalPageCount = $scope.pageCount();
            });
           
        }
    
       init();
    });

     

    Hope, this code will help you. Thanks

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: