Implementing Pagination to AngularJS UI-Grid

Pagination is a very important feature in any Data Grid. You can have thousand of rows of data and its not possible to show every piece of information in a single page. AngularJS UI-Grid provides pagination to its grid and its very simple to use. Here, I’ll show you how easily, with few lines of code you can implement pagination or paging to an AngularJS UI-Grid.

-----------------

If you are new to AngularJS, then I recommend you to read my first article that I have written for beginners.

AngularJS Tutorial for Beginners – My First AngularJS App “Hello World”

-----------------

See this demo

In this example here, I am using JSON data, extracted from an External .json file. Here’s the sample JSON data.

[
  	{
    "ID": "001",
   "Name": "Eurasian Collared-Dove",
    "Type": "Dove",
    "Scientific Name": "Streptopelia"
},
	{
    "ID": "002",
    "Name": "Bald Eagle",
    "Type": "Hawk",
    "Scientific Name": "Haliaeetus leucocephalus" 
},
	{
    "ID": "003",
    "Name": "Cooper's Hawk",
    "Type": "Hawk",
    "Scientific Name": "Accipiter cooperii"  
},
	{
    "ID": "004",
    "Name": "Bell's Sparrow",
    "Type": "Sparrow",
    "Scientific Name": "Artemisiospiza belli"  
},
	{
    "ID": "005",
    "Name": "Mourning Dove",
    "Type": "Dove",
    "Scientific Name": "Zenaida macroura"  
},
	{
    "ID": "006",
    "Name": "Rock Pigeon",
    "Type": "Dove",
    "Scientific Name": "Columba livia"  
},
	{
    "ID": "007",
    "Name": "Abert's Towhee",
    "Type": "Sparrow",
    "Scientific Name": "Melozone aberti"  
},
	{
    "ID": "008",
    "Name": "Brewer's Sparrow",
    "Type": "Sparrow",
    "Scientific Name": "Spizella breweri"  
},
	{
    "ID": "009",
    "Name": "Canyon Towhee",
    "Type": "Sparrow",
    "Scientific Name": "Melozone fusca"  
},
	{
    "ID": "010",
    "Name": "Black Vulture",
    "Type": "Hawk",
    "Scientific Name": "Coragyps atratus"  
},
	{
    "ID": "011",
    "Name": "Gila Woodpecker",
    "Type": "Woodpecker",
    "Scientific Name": "Melanerpes uropygialis"  
},
	{
    "ID": "012",
    "Name": "Gilded Flicker",
    "Type": "Woodpecker",
    "Scientific Name": "Colaptes chrysoides"  
},
	{
    "ID": "013",
    "Name": "Cassin's Sparrow",
    "Type": "Sparrow",
    "Scientific Name": "Peucaea cassinii"  
},
	{
    "ID": "014",
    "Name": "American Kestrel",
    "Type": "Hawk",
    "Scientific Name": "Falco sparverius"  
},
	{
    "ID": "015",
    "Name": "Hairy Woodpecker",
    "Type": "Woodpecker",
    "Scientific Name": "Picoides villosus"  
},
	{
    "ID": "016",
    "Name": "Lewis's Woodpecker",
    "Type": "Woodpecker",
    "Scientific Name": "Melanerpes lewis"  
},
	{
    "ID": "017",
    "Name": "Snail Kite",
    "Type": "Hawk",
    "Scientific Name": "Rostrhamus sociabilis"  
},
	{
    "ID": "018",
    "Name": "White-tailed Hawk",
    "Type": "Hawk",
    "Scientific Name": "Geranoaetus albicaudatus"  
}
]

Make sure you have lots of data in your JSON file, so you work with the pagination feature on your Grid. Copy the above data in a Notepad and save the file as sample.json.

The Markup
<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.6.3/ui-grid.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.6.3/ui-grid.min.css" type="text/css">
    
    <style>
        p, div {
            font:15px Verdana;
        }
        .uiGrd {
            width: 550px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div ng-app="myApp" 
        ng-controller="myController">

        <p>{{title}}</p>
        <div class="uiGrd" id="grd" ui-grid="gridOptions" ui-grid-pagination</div>
    </div>
</body>

Inside the view, I have a <div> element with two directives.

ui-grid: This directive is used to specify the data, along with some options provided to the grid. (See the script below).

ui-grid-pagination: Adding this directive ensures paging or pagination is implemented.

Also Read: Create a Data Grid in AngularJS using UI-Grid and Asp.Net Web API MVC 4

The Controller
<script>
    var app = angular.module('myApp', ['ui.grid', 'ui.grid.pagination']);
    app.controller('myController', function ($scope, $http) {

        $scope.title = "AngularJS UI-Grid with Pagination";

        // SPECIFY PAGINATION OPTIONS, ROWS PER PAGE.
        $scope.gridOptions = {
            paginationPageSizes: [5, 10, 20],
            paginationPageSize: 5
        };

        // REQUEST JSON DATA FROM FILE.
        var request = {
            method: 'get',
            url: 'sample.json',
            dataType: 'json',
            contentType: "application/json"
        };

        $http(request)
            .success(function (jsonData) {
                $scope.gridOptions.data = jsonData;     // BIND JSON TO GRID.
            })
            .error(function () { });
    });
</script>
</html>

I have first added couple modules as dependency to my controller. These are ui-grid and ui-grid-pagination.

var app = angular.module('myApp', ['ui.grid', 'ui.grid.pagination']);

Next, I have set the options to the grid’s pagination feature.

paginationPageSizes: Its an array of page sizes.

Pagination Size for AngularJS UI-Grid

paginationPageSize: I have set it as 5, which means, show 5 rows per page.

Finally, I am binding the JSON data (extracted from a file) to the grid.

$scope.gridOptions.data = jsonData;


See this demo

More UI-Grid Pagination Properties

AngularJS UI-Grid provides more pagination features.

1) enablePagination: You can explicitly enable or disable pagination your UI-Grid. This Boolean property takes values as true or false. The default is true. For example,

$scope.gridOptions = {
    paginationPageSizes: [5, 10, 20],
    paginationPageSize: 5,
    enablePagination: false		// DISABLE PAGINATION.
};

Note: Setting enablePagination to false will disable pagination on the grid. However, the pagination controls will remain visible.

2) enablePaginationControls: Now, using this property you can hide or show pagination controls. This is another Boolean property. The default is true.

enablePaginationControls: false

You can experiment with the 1st and 2nd properties or simply remove the first and add only the second property. See what happens.

3) paginationCurrentPage: Use this property if you do not want to show the first page (which is default) and instead show the 2nd or the 4th page, etc. For example, I want to show the 2nd page of the grid when my web page loads.

paginationPageSizes: [5, 10, 20],
paginationPageSize: 5,
paginationCurrentPage: 2

See this demo

Well that’s it. Thanks for reading.

Previous - How to Read Data from an External JSON file in AngularJSNext - Create Animated Charts in AngularJS using Data Extracted from an External JSON File



Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.

Enter your email id

Delivered by FeedBurner

Related Posts: