<!DOCTYPE html>
<html ng-app="GridApp">
<head>
<script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" data-semver="0.13.1" data-require="ui-bootstrap@0.13.1" />
<link data-require="ui-grid@3.0.1" data-semver="3.0.1" rel="stylesheet" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/v3.0.1/ui-grid.min.css" />
<script data-require="ui-grid@3.0.1" data-semver="3.0.1" src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/v3.0.1/ui-grid.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js" data-semver="0.14.3" data-require="ui-bootstrap-tpls@0.14.3"></script>
<script src="script.js"></script>
</head>
<body ng-controller="GridController as ctrl">
<h1>Angular ui-grid with ui-bootstrap pagination</h1>
<div>
<!--
ui-bootstrap pagination control displaying first, prev, next, last
buttons and three pages. Current page will center in the display.
Uses the grid's data source and pagination size.
-->
<uib-pagination total-items="ctrl.importantCrucialData.length"
ng-model="ctrl.gridOptions.paginationCurrentPage"
items-per-page="ctrl.gridOptions.paginationPageSize"
boundary-links="true"
direction-links="true"
max-size="3"
first-text="<<"
previous-text="<"
next-text=">"
last-text=">>"
rotate="true"></uib-pagination>
<!--
ui-grid setup for pagination.
See gridOptions in the controller for configuration.
-->
<div id="myGrid" ui-grid="ctrl.gridOptions" class="grid" ui-grid-pagination></div>
</div>
</body>
</html>
(function() {
function GridController() {
var vm = this;
// Just some data
vm.importantCrucialData = [
{toads: "17", frogs: "32", lizards: "19", chickens: "98"},
{toads: "2", frogs: "0", lizards: "15", chickens: "4"},
{toads: "22", frogs: "9", lizards: "7", chickens: "555"},
{toads: "13", frogs: "7", lizards: "13", chickens: "43"},
{toads: "4", frogs: "8", lizards: "12", chickens: "14"},
{toads: "6", frogs: "44", lizards: "35", chickens: "42"},
{toads: "33", frogs: "12", lizards: "66", chickens: "476"},
{toads: "16", frogs: "88", lizards: "12", chickens: "32"},
{toads: "77", frogs: "14", lizards: "0", chickens: "1"},
{toads: "2", frogs: "2", lizards: "12", chickens: "3"},
{toads: "46", frogs: "0", lizards: "3", chickens: "46"},
{toads: "18", frogs: "1", lizards: "14", chickens: "134"},
{toads: "6", frogs: "7", lizards: "73", chickens: "378"},
{toads: "2", frogs: "6", lizards: "2", chickens: "9"},
{toads: "93", frogs: "0", lizards: "6", chickens: "3"},
{toads: "174", frogs: "3", lizards: "1", chickens: "87"},
{toads: "1", frogs: "1", lizards: "82", chickens: "14"},
{toads: "0", frogs: "1", lizards: "13", chickens: "8"},
{toads: "89", frogs: "7", lizards: "187", chickens: "3"},
{toads: "4", frogs: "9", lizards: "3728", chickens: "84"},
{toads: "1", frogs: "2", lizards: "1", chickens: "31"},
{toads: "8", frogs: "14", lizards: "0", chickens: "14"},
{toads: "6", frogs: "87", lizards: "6", chickens: "89"},
{toads: "5", frogs: "3", lizards: "1", chickens: "4372"},
{toads: "90", frogs: "0", lizards: "5", chickens: "1"},
{toads: "21", frogs: "1", lizards: "47", chickens: "0"},
{toads: "7", frogs: "18", lizards: "1", chickens: "6"},
{toads: "6", frogs: "32", lizards: "32", chickens: "37"},
{toads: "8", frogs: "14", lizards: "87", chickens: "8"},
{toads: "18", frogs: "44", lizards: "774", chickens: "2"},
{toads: "3", frogs: "2", lizards: "31", chickens: "1"},
{toads: "8", frogs: "76", lizards: "5", chickens: "3"},
{toads: "1", frogs: "19", lizards: "11", chickens: "5"},
{toads: "89", frogs: "3", lizards: "3728", chickens: "876"},
{toads: "5", frogs: "0", lizards: "6", chickens: "3"},
{toads: "3", frogs: "1", lizards: "3", chickens: "2"},
{toads: "22", frogs: "3", lizards: "53", chickens: "1"},
{toads: "97", frogs: "8", lizards: "72", chickens: "3"},
{toads: "3", frogs: "6", lizards: "1", chickens: "2"},
{toads: "1", frogs: "14", lizards: "5", chickens: "99"},
{toads: "7", frogs: "0", lizards: "1", chickens: "6"}
];
// Configure the grid for a pagination size of 10, but don't show
// the grid's own pagination controls.
vm.gridOptions = {
paginationPageSize: 10,
enablePaginationControls: false,
data: vm.importantCrucialData
}
}
angular.module('GridApp', [
'ui.grid',
'ui.grid.pagination',
'ui.bootstrap'
]);
angular.module('GridApp')
.controller('GridController', ['uiGridConstants', GridController]);
})()
Angular ui-grid table with ui-bootstrap pagination.