Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Pagination using Angualr js in .Net Project

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 391
    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:

     

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

     

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

     angular.module('paginationApp', ['angularUtils.directives.dirPagination'])
            .controller('DemoCtrl', function ($scope, $http) {
    
                $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" },
                { 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" }]
            });

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

     

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

     

    <div ng-controller="DemoCtrl">
            <table cellpadding="1" cellspacing="1" border="1" align="center">
                <tr>
                    <td>ID</td>
                    <td>Name</td>
                    <td>Hobby</td>
                </tr>
                <tr dir-paginate="user in users|itemsPerPage:3" current-page="2">
                    <td>{{user.id}}</td>
                    <td>{{user.name}}</td>
                    <td>{{user.hobby}}</td>
                </tr>
                <tr>       
                    <dir-pagination-controls direction-links="true" boundary-links="true"> </dir-pagination-controls>
                </tr>
            </table>
        </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..:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
    </head>
    <body ng-app="paginationApp">
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
        <script src="Scripts/dirPagination.js"></script>
    
        <div ng-controller="DemoCtrl">
            <table cellpadding="1" cellspacing="1" border="1" align="center">
                <tr>
                    <td>ID</td>
                    <td>Name</td>
                    <td>Hobby</td>
                </tr>
                <tr dir-paginate="user in users|itemsPerPage:3" current-page="2">
                    <td>{{user.id}}</td>
                    <td>{{user.name}}</td>
                    <td>{{user.hobby}}</td>
                </tr>
                <tr>       
                    <dir-pagination-controls direction-links="true" boundary-links="true"> </dir-pagination-controls>
                </tr>
            </table>
        </div>
      
    
        <script>
            angular.module('paginationApp', ['angularUtils.directives.dirPagination'])
            .controller('DemoCtrl', function ($scope, $http) {
    
                $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" },
                { 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" }]
            });
        </script>
    </body>
    </html>

                                                                Hope it helps... Happy Coding..!

 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: