var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.pagination']);
app.controller('MainCtrl', ['$http', '$scope', '$timeout', function ($http, $scope, $timeout) {
var vm = this;
var gridApi;
vm.gridOptions = {
paginationPageSizes: [25, 50, 75],
paginationPageSize: 25,
useExternalPagination: true,
columnDefs: [
{ field: 'name' },
{ field: 'age' }
],
onRegisterApi: function(gridApi) {
gridApi = gridApi;
gridApi.pagination.on.paginationChanged($scope, function(currentPage, pageSize) {
getPage(currentPage, pageSize);
});
}
};
init();
////////////
// Initialize our data source
function init() {
getPage(1, 25);
}
function getPage(pageNumber, pageSize) {
vm.loading = vm.gridOptions.data && 'Paging...' || 'Loading Data...';
var startingRow = pageSize * (pageNumber - 1);
$http.get('data.json')
.then(function (res) {
var newData = [];
for(var i = startingRow; i < startingRow + vm.gridOptions.paginationPageSize; i++) {
newData.push( res.data[i] );
}
return $timeout(function () {
return newData;
}, 1000);
})
.then(function (data) {
vm.gridOptions.data = data;
})
.finally(function () {
vm.loading = false;
});
}
}]);
body {
padding: 10px;
}
.grid {
width: 100%;
height: 350px;
}
.grid-msg-overlay {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, 0.4);
}
.grid-msg-overlay .msg {
opacity: 1;
position: absolute;
top: 20%;
left: 20%;
width: 60%;
height: 50%;
background-color: #eee;
border-radius: 4px;
border: 1px solid #555;
text-align: center;
font-size: 24px;
display: table;
}
.grid-msg-overlay .msg span {
display: table-cell;
vertical-align: middle;
}
<!DOCTYPE html>
<html ng-app="app">
<head>
<link data-require="font-awesome@*" data-semver="4.3.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
<link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-touch.js"></script>
<script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css" />
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
<div ng-controller="MainCtrl as vm">
<div id="grid1" ui-grid="vm.gridOptions" class="grid" ui-grid-pagination>
<div class="grid-msg-overlay" ng-hide="!vm.loading">
<div class="msg">
<span>
{{ vm.loading }}
<i class="fa fa-spinner fa-spin"></i>
</span>
</div>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
[
{
"name": "Virgie",
"age": 53
},
{
"name": "Katie",
"age": 50
},
{
"name": "Harmon",
"age": 40
},
{
"name": "Stephanie",
"age": 71
},
{
"name": "Melva",
"age": 90
},
{
"name": "Shelley",
"age": 55
},
{
"name": "Tamara",
"age": 33
},
{
"name": "Joan",
"age": 61
},
{
"name": "Bean",
"age": 35
},
{
"name": "Rodriquez",
"age": 62
},
{
"name": "John",
"age": 54
},
{
"name": "Shepard",
"age": 61
},
{
"name": "Jordan",
"age": 34
},
{
"name": "Carmela",
"age": 56
},
{
"name": "Nicole",
"age": 54
},
{
"name": "Haley",
"age": 63
},
{
"name": "Mayra",
"age": 19
},
{
"name": "Judy",
"age": 64
},
{
"name": "Fuller",
"age": 37
},
{
"name": "Petra",
"age": 18
},
{
"name": "Deena",
"age": 22
},
{
"name": "Florence",
"age": 38
},
{
"name": "Lauren",
"age": 30
},
{
"name": "Elliott",
"age": 36
},
{
"name": "Deana",
"age": 70
},
{
"name": "Deidre",
"age": 83
},
{
"name": "Hansen",
"age": 49
},
{
"name": "Cortez",
"age": 44
},
{
"name": "Shanna",
"age": 40
},
{
"name": "Kitty",
"age": 22
},
{
"name": "Moss",
"age": 18
},
{
"name": "Bartlett",
"age": 48
},
{
"name": "Krystal",
"age": 78
},
{
"name": "Patti",
"age": 39
},
{
"name": "Margie",
"age": 25
},
{
"name": "Mattie",
"age": 24
},
{
"name": "Alexandria",
"age": 21
},
{
"name": "Nichole",
"age": 54
},
{
"name": "Daniel",
"age": 23
},
{
"name": "Lola",
"age": 77
},
{
"name": "Amie",
"age": 94
},
{
"name": "Bernice",
"age": 73
},
{
"name": "Patterson",
"age": 55
},
{
"name": "Hess",
"age": 62
},
{
"name": "Jane",
"age": 83
},
{
"name": "King",
"age": 91
},
{
"name": "Socorro",
"age": 95
},
{
"name": "Douglas",
"age": 37
},
{
"name": "Hart",
"age": 34
},
{
"name": "Deann",
"age": 72
},
{
"name": "Rhonda",
"age": 41
},
{
"name": "Bryan",
"age": 80
},
{
"name": "Hazel",
"age": 90
},
{
"name": "Sharpe",
"age": 58
},
{
"name": "Adkins",
"age": 27
},
{
"name": "Elba",
"age": 24
},
{
"name": "Corine",
"age": 81
},
{
"name": "Hull",
"age": 30
},
{
"name": "Daisy",
"age": 72
},
{
"name": "Diana",
"age": 85
},
{
"name": "Velez",
"age": 77
},
{
"name": "Rosetta",
"age": 27
},
{
"name": "Soto",
"age": 74
},
{
"name": "Reese",
"age": 45
},
{
"name": "Stacey",
"age": 18
},
{
"name": "Leola",
"age": 21
},
{
"name": "Marisol",
"age": 99
},
{
"name": "Gomez",
"age": 86
},
{
"name": "Carmen",
"age": 33
},
{
"name": "Janelle",
"age": 67
},
{
"name": "Janell",
"age": 93
},
{
"name": "Tammi",
"age": 60
},
{
"name": "Cannon",
"age": 63
},
{
"name": "Wilkinson",
"age": 53
},
{
"name": "Hilary",
"age": 75
},
{
"name": "Bass",
"age": 61
},
{
"name": "Althea",
"age": 22
},
{
"name": "Georgette",
"age": 34
},
{
"name": "Hoffman",
"age": 60
},
{
"name": "Dorthy",
"age": 96
},
{
"name": "Dawson",
"age": 97
},
{
"name": "Ila",
"age": 85
},
{
"name": "Donovan",
"age": 23
},
{
"name": "Cynthia",
"age": 85
},
{
"name": "Tabatha",
"age": 65
},
{
"name": "Velasquez",
"age": 84
},
{
"name": "Colon",
"age": 76
},
{
"name": "Katrina",
"age": 80
},
{
"name": "Meredith",
"age": 48
},
{
"name": "Shaw",
"age": 47
},
{
"name": "Marina",
"age": 69
},
{
"name": "Cathy",
"age": 67
},
{
"name": "Reilly",
"age": 56
},
{
"name": "Olive",
"age": 21
},
{
"name": "Boyer",
"age": 44
},
{
"name": "Osborne",
"age": 88
},
{
"name": "Riley",
"age": 46
},
{
"name": "Tanya",
"age": 91
},
{
"name": "Stuart",
"age": 60
},
{
"name": "Gaines",
"age": 84
},
{
"name": "Welch",
"age": 20
},
{
"name": "Deborah",
"age": 56
},
{
"name": "Madelyn",
"age": 43
},
{
"name": "Dotson",
"age": 65
},
{
"name": "Rosanne",
"age": 34
},
{
"name": "Iris",
"age": 34
},
{
"name": "Mcmahon",
"age": 43
},
{
"name": "Lindsay",
"age": 74
},
{
"name": "Alyce",
"age": 23
},
{
"name": "Christie",
"age": 72
},
{
"name": "Nanette",
"age": 40
},
{
"name": "Wanda",
"age": 52
},
{
"name": "Pennington",
"age": 82
},
{
"name": "Cochran",
"age": 60
},
{
"name": "Kris",
"age": 63
},
{
"name": "Whitney",
"age": 57
},
{
"name": "Fannie",
"age": 41
},
{
"name": "Rena",
"age": 83
},
{
"name": "Bridget",
"age": 45
},
{
"name": "Burks",
"age": 60
},
{
"name": "Puckett",
"age": 40
},
{
"name": "Pearson",
"age": 81
},
{
"name": "Torres",
"age": 21
},
{
"name": "Jayne",
"age": 56
},
{
"name": "Moore",
"age": 65
},
{
"name": "Natasha",
"age": 32
},
{
"name": "Tamika",
"age": 59
},
{
"name": "Glover",
"age": 43
},
{
"name": "Mosley",
"age": 82
},
{
"name": "Mccormick",
"age": 74
},
{
"name": "Mcknight",
"age": 68
},
{
"name": "Teri",
"age": 70
},
{
"name": "Sexton",
"age": 27
},
{
"name": "Morris",
"age": 83
},
{
"name": "Calhoun",
"age": 24
},
{
"name": "Henrietta",
"age": 35
},
{
"name": "Elisabeth",
"age": 53
},
{
"name": "Angelita",
"age": 45
},
{
"name": "Hawkins",
"age": 63
},
{
"name": "Johnnie",
"age": 59
},
{
"name": "Cooley",
"age": 45
},
{
"name": "Pittman",
"age": 20
},
{
"name": "Madge",
"age": 46
},
{
"name": "Alyssa",
"age": 47
},
{
"name": "Angelina",
"age": 80
},
{
"name": "Skinner",
"age": 52
},
{
"name": "Isabella",
"age": 97
},
{
"name": "Ball",
"age": 56
},
{
"name": "Delgado",
"age": 19
},
{
"name": "Malone",
"age": 92
},
{
"name": "Esther",
"age": 69
},
{
"name": "Woodard",
"age": 44
},
{
"name": "Kari",
"age": 27
},
{
"name": "Millie",
"age": 71
},
{
"name": "Imelda",
"age": 52
},
{
"name": "Manuela",
"age": 41
},
{
"name": "Luella",
"age": 63
},
{
"name": "Contreras",
"age": 50
},
{
"name": "Lilian",
"age": 98
},
{
"name": "Gilda",
"age": 49
},
{
"name": "Carissa",
"age": 69
},
{
"name": "Montoya",
"age": 23
},
{
"name": "Duffy",
"age": 70
},
{
"name": "Nadine",
"age": 65
},
{
"name": "Barry",
"age": 52
},
{
"name": "Leah",
"age": 39
},
{
"name": "Gwen",
"age": 60
},
{
"name": "Candy",
"age": 99
},
{
"name": "Annabelle",
"age": 63
},
{
"name": "Melanie",
"age": 43
},
{
"name": "Clarissa",
"age": 71
},
{
"name": "Robin",
"age": 87
},
{
"name": "June",
"age": 33
},
{
"name": "Vang",
"age": 30
},
{
"name": "Tasha",
"age": 59
},
{
"name": "Josefina",
"age": 20
},
{
"name": "Webb",
"age": 91
},
{
"name": "Benjamin",
"age": 54
},
{
"name": "Herring",
"age": 64
},
{
"name": "Kinney",
"age": 30
},
{
"name": "Ellison",
"age": 77
},
{
"name": "Zimmerman",
"age": 47
},
{
"name": "Mallory",
"age": 60
},
{
"name": "Kerry",
"age": 98
},
{
"name": "Garrett",
"age": 31
},
{
"name": "Gallagher",
"age": 90
},
{
"name": "Shari",
"age": 47
},
{
"name": "Hewitt",
"age": 56
},
{
"name": "Christi",
"age": 56
},
{
"name": "Dena",
"age": 53
},
{
"name": "Sabrina",
"age": 25
},
{
"name": "Kara",
"age": 67
},
{
"name": "Linda",
"age": 63
},
{
"name": "George",
"age": 66
},
{
"name": "Medina",
"age": 53
},
{
"name": "Marsha",
"age": 65
},
{
"name": "Desiree",
"age": 88
},
{
"name": "Keri",
"age": 71
},
{
"name": "Chase",
"age": 55
},
{
"name": "Bernard",
"age": 41
},
{
"name": "Marlene",
"age": 98
},
{
"name": "Dennis",
"age": 32
},
{
"name": "Cantu",
"age": 56
},
{
"name": "Klein",
"age": 76
},
{
"name": "Joyce",
"age": 37
},
{
"name": "Moon",
"age": 96
},
{
"name": "Carter",
"age": 61
},
{
"name": "Slater",
"age": 51
},
{
"name": "Randolph",
"age": 65
},
{
"name": "Jaime",
"age": 72
},
{
"name": "Susana",
"age": 67
},
{
"name": "Angelica",
"age": 61
},
{
"name": "Cardenas",
"age": 31
},
{
"name": "Tracey",
"age": 75
},
{
"name": "Gregory",
"age": 39
},
{
"name": "Brittney",
"age": 76
},
{
"name": "Jordan",
"age": 19
},
{
"name": "Mable",
"age": 32
},
{
"name": "Brooks",
"age": 59
},
{
"name": "Dominique",
"age": 33
},
{
"name": "Flossie",
"age": 94
},
{
"name": "Boone",
"age": 22
},
{
"name": "Goldie",
"age": 52
},
{
"name": "Holcomb",
"age": 82
},
{
"name": "Roberta",
"age": 78
},
{
"name": "Sargent",
"age": 89
},
{
"name": "Morrow",
"age": 79
},
{
"name": "Patty",
"age": 20
},
{
"name": "Horn",
"age": 29
},
{
"name": "White",
"age": 47
},
{
"name": "Jennifer",
"age": 99
},
{
"name": "Mabel",
"age": 53
},
{
"name": "Ingrid",
"age": 61
},
{
"name": "Nelson",
"age": 71
},
{
"name": "Alford",
"age": 28
},
{
"name": "Mary",
"age": 98
},
{
"name": "Brianna",
"age": 25
},
{
"name": "Merritt",
"age": 79
},
{
"name": "Santos",
"age": 23
},
{
"name": "Oconnor",
"age": 85
},
{
"name": "Willis",
"age": 35
},
{
"name": "Frost",
"age": 48
},
{
"name": "Martinez",
"age": 61
},
{
"name": "Henry",
"age": 38
},
{
"name": "Taylor",
"age": 21
},
{
"name": "Delacruz",
"age": 87
},
{
"name": "Cara",
"age": 54
},
{
"name": "Bryant",
"age": 89
},
{
"name": "Best",
"age": 30
},
{
"name": "Vasquez",
"age": 55
},
{
"name": "Nell",
"age": 73
},
{
"name": "Estela",
"age": 99
},
{
"name": "Stanley",
"age": 38
},
{
"name": "Dona",
"age": 92
},
{
"name": "Baxter",
"age": 95
},
{
"name": "Gibson",
"age": 91
},
{
"name": "Minerva",
"age": 93
},
{
"name": "Shauna",
"age": 66
},
{
"name": "Robbins",
"age": 45
},
{
"name": "Shepherd",
"age": 73
},
{
"name": "Carly",
"age": 74
},
{
"name": "Allyson",
"age": 79
},
{
"name": "Witt",
"age": 88
},
{
"name": "Rhodes",
"age": 30
},
{
"name": "Mandy",
"age": 44
},
{
"name": "Abbott",
"age": 33
},
{
"name": "Adela",
"age": 93
},
{
"name": "Jenna",
"age": 93
},
{
"name": "Maria",
"age": 23
},
{
"name": "Gonzales",
"age": 87
},
{
"name": "Hendricks",
"age": 70
},
{
"name": "Maynard",
"age": 26
},
{
"name": "Howard",
"age": 99
},
{
"name": "Richmond",
"age": 48
},
{
"name": "Chelsea",
"age": 51
},
{
"name": "Mcdaniel",
"age": 92
},
{
"name": "Leonard",
"age": 18
},
{
"name": "Queen",
"age": 18
},
{
"name": "Ruth",
"age": 99
},
{
"name": "Beard",
"age": 18
},
{
"name": "Rose",
"age": 42
},
{
"name": "Hall",
"age": 64
},
{
"name": "Albert",
"age": 36
},
{
"name": "Sasha",
"age": 42
},
{
"name": "Mia",
"age": 88
},
{
"name": "Earnestine",
"age": 36
},
{
"name": "Rachelle",
"age": 44
},
{
"name": "Sellers",
"age": 98
},
{
"name": "Hannah",
"age": 87
},
{
"name": "Baker",
"age": 29
},
{
"name": "Millicent",
"age": 99
},
{
"name": "Vivian",
"age": 21
},
{
"name": "Simone",
"age": 54
},
{
"name": "Meyer",
"age": 41
},
{
"name": "Fletcher",
"age": 49
},
{
"name": "Kidd",
"age": 79
},
{
"name": "Cathleen",
"age": 97
},
{
"name": "Sheppard",
"age": 69
},
{
"name": "Ella",
"age": 81
},
{
"name": "Charmaine",
"age": 26
}
]