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

  • Pagination using Angualr js in .Net Project

    @mayank.srivastava
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 434
    Comment on it

     In this blog I will try to explain about using Angular pagination directive in a .Net project with the help of an example.

    Please follow the following steps to implement dir-pagination directive in your project:

    Step 1: Download dirPagination.js . You can download it from the following link:

    Download

     

    Step 2: Now include the angular/Pagination js scripts in your project, example as follows:

     

    1.  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    2.     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
    3.     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
    4.     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
    5.     <script src="Scripts/dirPagination.js"></script>

     

    Step 3: Now write the following code in you angular controller:
     

    1.  angular.module('paginationApp', ['angularUtils.directives.dirPagination'])
    2.         .controller('DemoCtrl', function ($scope, $http) {
    3.  
    4.             $scope.users = [{ id: 1, name: "Mayank", hobby: "Swimming" }, { id: 2, name: "Shubham", hobby: "Singing" }, { id: 3, name: "Hina", hobby: "Dancing" }, { id: 4, name: "Shikha", hobby: "Reading" }, { id: 5, name: "Deepika", hobby: "Driving" },
    5.             { id: 6, name: "Ajendra", hobby: "Eating" }, { id: 7, name: "Manvendra", hobby: "Exploring" }, { id: 8, name: "Abhishek", hobby: "Laughing" }, { id: 9, name: "Chetan", hobby: "Singing" }, { id: 10, name: "Mona", hobby: "Sleeping" }]
    6.         });

    Here: $scope.users contains the data that is to be paginated

     

    Step 4: Now write the following code inside the body tag:

     

    1. <div ng-controller="DemoCtrl">
    2.         <table cellpadding="1" cellspacing="1" border="1" align="center">
    3.             <tr>
    4.                 <td>ID</td>
    5.                 <td>Name</td>
    6.                 <td>Hobby</td>
    7.             </tr>
    8.             <tr dir-paginate="user in users|itemsPerPage:3" current-page="2">
    9.                 <td>{{user.id}}</td>
    10.                 <td>{{user.name}}</td>
    11.                 <td>{{user.hobby}}</td>
    12.             </tr>
    13.             <tr>       
    14.                 <dir-pagination-controls direction-links="true" boundary-links="true"> </dir-pagination-controls>
    15.             </tr>
    16.         </table>
    17.     </div>


     Here: As you can see instead of ng-repeat we are using dir-paginate, itemsPerPage represents the items to be displayed per page (We are displaying 3 items per page) and the current-page tells the default page to be displayed onload (We are displaying the second-page onload). At the end we are using dir-pagination-controls directive this will give the control menu with next and previous links to switch among the pages.

     

    Step 5: Now run the project your pagination is ready for action

     

    Summing up the code..:

    1. <html xmlns="http://www.w3.org/1999/xhtml">
    2. <head>
    3.     <title></title>
    4. </head>
    5. <body ng-app="paginationApp">
    6.     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    7.     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
    8.     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
    9.     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
    10.     <script src="Scripts/dirPagination.js"></script>
    11.  
    12.     <div ng-controller="DemoCtrl">
    13.         <table cellpadding="1" cellspacing="1" border="1" align="center">
    14.             <tr>
    15.                 <td>ID</td>
    16.                 <td>Name</td>
    17.                 <td>Hobby</td>
    18.             </tr>
    19.             <tr dir-paginate="user in users|itemsPerPage:3" current-page="2">
    20.                 <td>{{user.id}}</td>
    21.                 <td>{{user.name}}</td>
    22.                 <td>{{user.hobby}}</td>
    23.             </tr>
    24.             <tr>       
    25.                 <dir-pagination-controls direction-links="true" boundary-links="true"> </dir-pagination-controls>
    26.             </tr>
    27.         </table>
    28.     </div>
    29.   
    30.  
    31.     <script>
    32.         angular.module('paginationApp', ['angularUtils.directives.dirPagination'])
    33.         .controller('DemoCtrl', function ($scope, $http) {
    34.  
    35.             $scope.users = [{ id: 1, name: "Mayank", hobby: "Swimming" }, { id: 2, name: "Shubham", hobby: "Singing" }, { id: 3, name: "Hina", hobby: "Dancing" }, { id: 4, name: "Shikha", hobby: "Reading" }, { id: 5, name: "Deepika", hobby: "Driving" },
    36.             { id: 6, name: "Ajendra", hobby: "Eating" }, { id: 7, name: "Manvendra", hobby: "Exploring" }, { id: 8, name: "Abhishek", hobby: "Laughing" }, { id: 9, name: "Chetan", hobby: "Singing" }, { id: 10, name: "Mona", hobby: "Sleeping" }]
    37.         });
    38.     </script>
    39. </body>
    40. </html>

                                                                Hope it helps... Happy Coding..!

    Pagination using Angualr js Angualr js Pagination Pagination Angular js
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: