-----------------
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”
-----------------
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.
<!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>
.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.
👉 How to create a Data Grid in AngularJS using UI-Grid and Asp.Net Web API in MVC 4 
<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.
• 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;
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: 2Well that’s it. Thanks for reading. ☺