How to place pagination outside angular ui-grid?
10,664
To use a custom pagination outside the grid, set enablePaginationControls: false
in its gridOptions.
$scope.gridOptions = {
data: 'data',
totalItems: $scope.data.length,
paginationPageSize: 10,
enablePaginationControls: false,
paginationCurrentPage: 1,
columnDefs: [
{name: 'name'},
{name: 'car'}
]
}
You can then create your custom pagination directive (or use Bootstrap pagination directive), and bind paginationCurrentPage
property to it.
Here is a Plunker with live demo that uses external Bootstrap pagination directive.
Author by
durga siva kishore mopuru
Updated on June 12, 2022Comments
-
durga siva kishore mopuru about 2 years
This is my code
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.pagination']); app.controller('MainCtrl', [ '$scope', '$http', 'uiGridConstants', function($scope, $http, uiGridConstants) { var paginationOptions = { pageNumber: 1, pageSize: 25, sort: null }; $scope.gridOptions = { paginationPageSizes: [25, 50, 75], paginationPageSize: 25, useExternalPagination: true, useExternalSorting: true, columnDefs: [ { name: 'name' }, { name: 'gender', enableSorting: false }, { name: 'company', enableSorting: false } ], onRegisterApi: function(gridApi) { $scope.gridApi = gridApi; $scope.gridApi.core.on.sortChanged($scope, function(grid, sortColumns) { if (sortColumns.length == 0) { paginationOptions.sort = null; } else { paginationOptions.sort = sortColumns[0].sort.direction; } getPage(); }); gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) { paginationOptions.pageNumber = newPage; paginationOptions.pageSize = pageSize; getPage(); }); } }; var getPage = function() { var url; switch(paginationOptions.sort) { case uiGridConstants.ASC: url = 'https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100_ASC.json'; break; case uiGridConstants.DESC: url = 'https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100_DESC.json'; break; default: url = 'https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json'; break; } $http.get(url) .success(function (data) { $scope.gridOptions.totalItems = 100; var firstRow = (paginationOptions.pageNumber - 1) * paginationOptions.pageSize; $scope.gridOptions.data = data.slice(firstRow, firstRow + paginationOptions.pageSize); }); }; getPage(); } ]);
<!doctype html> <html ng-app="app"> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script> <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script> <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script> <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script> <script src="http://ui-grid.info/release/ui-grid.js"></script> <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css"> <link rel="stylesheet" href="main.css" type="text/css"> </head> <body> <div ng-controller="MainCtrl"> <div ui-grid="gridOptions" ui-grid-pagination class="grid"></div> </div> <script src="app.js"></script> </body> </html>