Custom Paging With Angular

Introduction

 

This example explains about the custom paging in an HTML grid with AngularJS. The paging also works with Search filter. Going into further detail, we will create a grid which has search filter and other filters where paging will also be working. We will create directive for paging so that the same code will be used many times as we want.

 

Download the requred JavaScript and CSS files from the below links.

• Download AngularJS min file from here.

Gettiing Started

• Open Visual Studio and create a new MVC web application.
• Copy the downloaded AngularJS file in "Scripts" folder of the solution.
• Create a JavaScript file and name it as Module.js.
• Then, write the following code in it.  
  

var app = angular.module("myApp",[]);

• Module.js file registers the application with myApp key.
  
• This key is used with ng-app tag like ng-app="myApp".
• Create another file Controller.js.
• We register controller.js with app keyword.

app.controller("gridController", function($scope, $rootScope) {

});

• The Controller key gridController is used on HTML page like ng-controller="gridController" on body tag or on div tag inside the body tag. This will allow us to access all the functions inside the controller.js file on that HTML page.
• After that, let's create another JavaScript file Service.js for calling the server methods.
• We register service.js again with app keyword.      

app.service("Service", function ($http) {

});

The Service key Service is used in controller.js file, like

app.controller("gridController", function ($scope, Service) {

})

This will allow us to access all the functions inside the service.js file on Controller file. From service.js file, we can make call to server and send the results back to Controller.

Start writing the code in Controller.js file.     

app.controller("gridController", function($scope, $rootScope) {
            var data = [];
            var columns = [];

            columns.push({
                "key": "Component",
                "width": "9%",
                "dataType": "string",
                "showTags": "false",
                "showColumns": "true"
            });
            columns.push({
                "key": "Class Code",
                "width": "3%",
                "dataType": "string",
                "showTags": "false",
                "showColumns": "true"
            });
            columns.push({
                "key": "Caption",
                "width": "13%",
                "dataType": "string",
                "showTags": "false",
                "showColumns": "true"
            });
            columns.push({
                "key": "Dept",
                "width": "1%",
                "dataType": "string",
                "showTags": "false",
                "showColumns": "true"
            });
            columns.push({
                "key": "Rank",
                "width": "1%",
                "dataType": "string",
                "showTags": "false",
                "showColumns": "true"
            });
            columns.push({
                "key": "Interval",
                "width": "3%",
                "dataType": "string",
                "showTags": "false",
                "showColumns": "true"
            });
            columns.push({
                "key": "Start Date",
                "width": "4%",
                "dataType": "date",
                "showTags": "false",
                "showColumns": "false"
            });
            columns.push({
                "key": "End Date",
                "width": "4%",
                "dataType": "date",
                "showTags": "false",
                "showColumns": "false"
            });
            columns.push({
                "key": "Date/ Hours",
                "width": "3%",
                "dataType": "date",
                "showTags": "false",
                "showColumns": "true"
            });
            columns.push({
                "key": "Action",
                "width": "4%",
                "dataType": "commands",
                "showTags": "false",
                "showColumns": "true"
            });
            $rootScope.columns = eval(columns);

This code is used to create columns. We store column array into scope.      

data.push({
    "Component": "Me Cyl. Head [6]",
    "Class Code": "MDECYA",
    "Caption": "OVH, TST, CLN OF Me Cyl. Head [6]",
    "Dept": "ENG",
    "Rank": "2E",
    "ID": "00006",
    "Interval": "6000 R/Hs",
    "Date/ Hours": "6129 R/Hs",
    "Action": ""
});
data.push({
    "Component": "Me Injector Valves W/Pipes [3]",
    "Class Code": "MDECYA",
    "Caption": "TST, INSP OF Me Injector Valves W/Pipes [3]",
    "Dept": "ENG",
    "Rank": "CE",
    "ID": "00011",
    "Interval": "500 R/Hs",
    "Date/ Hours": "2812 R/Hs",
    "Action": ""
});
data.push({
    "Component": "Me Fo Pre-Heater",
    "Class Code": "",
    "Caption": "TST, CLN, INSP OF Me Fo Pre-Heater",
    "Dept": "ENG",
    "Rank": "2E",
    "ID": "00150",
    "Interval": "30 M",
    "Date/ Hours": "5/20/2017",
    "Action": ""
});
data.push({
    "Component": "Me Flowmeter",
    "Class Code": "",
    "Caption": "INSP, CLN OF Me Flowmeter",
    "Dept": "ENG",
    "Rank": "2E",
    "ID": "00151",
    "Interval": "30 M",
    "Date/ Hours": "5/19/2017",
    "Action": ""
});
data.push({
    "Component": "Ae Cyl. Head [1] [3]",
    "Class Code": "MDECYA",
    "Caption": "OVH, INSP OF Ae Cyl. Head [1] [3]",
    "Dept": "ENG",
    "Rank": "3E",
    "ID": "00164",
    "Interval": "1500 R/Hs",
    "Date/ Hours": "3845 R/Hs",
    "Action": ""
});
data.push({
    "Component": "D/E Frequency Low [1]",
    "Class Code": "",
    "Caption": "TST, INSP OF D/E Frequency Low [1]",
    "Dept": "ENG",
    "Rank": "ETO",
    "ID": "00922",
    "Interval": "6 M",
    "Date/ Hours": "11/14/2016",
    "Action": ""
});
data.push({
    "Component": "Boiler Fo Booster Pump Stbd",
    "Class Code": "",
    "Caption": "OVH, INSP OF Boiler Fo Booster Pump Stbd",
    "Dept": "ENG",
    "Rank": "2E",
    "ID": "00470",
    "Interval": "30 M",
    "Date/ Hours": "5/6/2017",
    "Action": ""
});
data.push({
    "Component": "Boiler Safety Valve",
    "Class Code": "",
    "Caption": "OVH, INSP OF Boiler Safety Valve",
    "Dept": "ENG",
    "Rank": "3E",
    "ID": "00473",
    "Interval": "12 M",
    "Date/ Hours": "9/23/2016",
    "Action": ""
});
data.push({
    "Component": "Air Condition Condenser",
    "Class Code": "",
    "Caption": "TST, INSP OF Air Condition Condenser",
    "Dept": "ENG",
    "Rank": "2E",
    "ID": "00554",
    "Interval": "30 M",
    "Date/ Hours": "6/1/2017",
    "Action": ""
});
data.push({
    "Component": "Sludge Pump",
    "Class Code": "",
    "Caption": "OVH, INSP OF Sludge Pump",
    "Dept": "ENG",
    "Rank": "2E",
    "ID": "00588",
    "Interval": "30 M",
    "Date/ Hours": "5/22/2017",
    "Action": ""
});
data.push({
    "Component": "Bilge Filters",
    "Class Code": "",
    "Caption": "CLN, INSP OF Bilge Filters",
    "Dept": "ENG",
    "Rank": "2E",
    "ID": "00589",
    "Interval": "1 M",
    "Date/ Hours": "9/5/2016",
    "Action": ""
});
data.push({
    "Component": "Emergency Bilge Suction - Er",
    "Class Code": "",
    "Caption": "TST, INSP OF Emergency Bilge Suction - Er",
    "Dept": "ENG",
    "Rank": "2E",
    "ID": "00591",
    "Interval": "1 M",
    "Date/ Hours": "9/5/2016",
    "Action": ""
});
data.push({
    "Component": "Hydraulic For Operating Valve System",
    "Class Code": "",
    "Caption": "ANL, INSP OF Hydraulic For Operating Valve System",
    "Dept": "ENG",
    "Rank": "2E",
    "ID": "00594",
    "Interval": "6 M",
    "Date/ Hours": "12/2/2016",
    "Action": ""
});
$rootScope.gridData = eval(data);

This code is used to show static data into grid. I am using static data but you can get the data from server and        show in the grid.

For that, follow the steps given in another article - Click Here. 

Create new JavaScript file for Paging directive.

Give name PageFilter.js to this JavaScript file.

This directive is used through out the project for paging.

app.filter('pagination', function () {
    return function (input, start) {
        start = parseInt(start, 10);
        return input.slice(start);
    }
});

After that, write the following code in Angular Controller for paging.

$scope.range = function () {
        var rangeSize = 4;
        var ps = [];
        var start;
        start = $scope.currentPage;
        if (start > $scope.pageCount() - rangeSize) {
            start = $scope.pageCount() - rangeSize + 1;
        }
        for (var i = start; i < start + rangeSize; i++) {

            if (i != -1 && i != -2 && i != -3 && i != -4) {
                ps.push(i);
            }
        }
        return ps;
    };

    $scope.prevPage = function () {
        if ($scope.currentPage > 0) {
            $scope.currentPage--;
        }
    };

    $scope.DisablePrevPage = function () {
        return $scope.currentPage === 0 ? "disabled" : "";
    };

    $scope.pageCount = function () {
        return Math.ceil($scope.filtered.length / $scope.itemsPerPage) - 1;
    };

    $scope.nextPage = function () {
        if ($scope.currentPage < $scope.pageCount()) {
            $scope.currentPage++;
        }
    };

    $scope.DisableNextPage = function () {
        if ($scope.pageCount() < 0) {
            return $scope.currentPage === 0 ? "disabled" : "";
        }
        else {
            return $scope.currentPage === $scope.pageCount() ? "disabled" : "";
        }
    };

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

In this code, methods are written to calulate the number of pages according to total count of records. For next page click, for previous page click, and disable the next and previous page according to the current page.

Now, create an MVC View from Controller and start writing the following code in that.

@{
    ViewBag.Title = "Home Page";
}

<html ng-app="myapp">
<head>
    <title></title>

    <style>
           .paginationclass {
            margin: 15px 28px;
        }

            .paginationclass div {
                border-bottom: 1px solid silver;
            }

            .paginationclass span {
                margin: 0px 15px;
                display: inline-block;
                padding: 5px 0px;
                text-align: left;
                width: 70px;
            }

        .pagination-controle li {
            display: inline-block;
        }

        .pagination-controle button {
            width: 63px;
            font-size: 12px;
            margin-left: 13px;
            cursor: pointer;
        }

        .pagination-div {
            margin-left: 20px;
        }

        .nodatatxt {
            opacity: 0.25;
            font-size: 1.5em;
            width: 100%;
            text-align: center;
            z-index: 1000;
        }
    </style>
</head>
<body>
    <div class="container" ng-controller="Controller">
<input type="text" placeholder="Search" ng-model="search" class="form-control"/>
  <table cellpadding="12" class="table table-bordered table-hover table-striped">
         <tr>
                <th ng-repeat="(header,val) in EcoList"></th>
        </tr>

 <tr data-ng-repeat="(key,val) in gridData |filter:search |pagination : currentPage*itemsPerPage | limitTo: itemsPerPage ">
                <td ng-repeat="column in columns">
                    {{val[column.key]}}
                </td>
            </tr></table>
        <div class="form-group">
            <div class="pagination-div">
                <ul class="pagination">
                    <li ng-class="DisablePrevPage()">
                        <a href ng-click="prevPage()">« Prev</a>
                    </li>
                    <li ng-repeat="n in range()"
                        ng-class="{active: n == currentPage}"
                        ng-click="setPage(n)">
                        <a href="#">{{n+1}}</a>
                    </li>
                    <li ng-class="DisableNextPage()">
                        <a href ng-click="nextPage()">Next »</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

</body>
</html>

On View page, we just use ng-repeat on $scope.gridData and $scope.columns to generate columns and fill data with just writing one line of code.

And div and anchor tags are used for page buttons.

Include all the JavaScript files including the page filter file in bundle and call the bundle on layout page or use all the JS files directly on the cshtml page.