214_pagination.ngdoc

@ngdoc overview
@name Tutorial: 214 Pagination
@description

<div class="alert alert-warning" role="alert"><strong>Alpha</strong> This feature is in development. There will almost certainly be breaking api changes, or there are major outstanding bugs.</div>

When pagination is enabled, the data is displayed in pages that can be browsed using the built in pagination selector.

Documentation for the pagination feature is provided in the api documentation, in particular:

- {@link api/ui.grid.pagination.api:GridOptions gridOptions}
- {@link api/ui.grid.pagination.api:PublicAPI publicApi}

If you wanted server based pagination, you could look at {@link 314_external_pagination the external pagination tutorial} or consider
using {@link 212_infinite_scroll infinite scroll}, which also retrieves data in pages from the server.

For better performance with the following example, you can choose to load the ui-grid.core.js and specific feature files instead:
<pre>
  <script src="/release/ui-grid.core.min.js"></script>
  <script src="/release/ui-grid.pagination.min.js"></script>
</pre>

@example
<example module="app">
  <file name="app.js">
    var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.pagination']);

    app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
      $scope.gridOptions1 = {
        paginationPageSizes: [25, 50, 75],
        paginationPageSize: 25,
        columnDefs: [
          { name: 'name' },
          { name: 'gender' },
          { name: 'company' }
        ]
      };

      $scope.gridOptions2 = {
        enablePaginationControls: false,
        paginationPageSize: 25,
        columnDefs: [
          { name: 'name' },
          { name: 'gender' },
          { name: 'company' }
        ]
      };

      $scope.gridOptions2.onRegisterApi = function (gridApi) {
        $scope.gridApi2 = gridApi;
      }

      $http.get('/data/100.json')
      .then(function (response) {
        $scope.gridOptions1.data = response.data;
        $scope.gridOptions2.data = response.data;
      });
    }]);
  </file>
  <file name="index.html">
    <div ng-controller="MainCtrl">
      <p><strong>Grid with native pagination controls</strong></p>
      <div ui-grid="gridOptions1" ui-grid-pagination class="grid"></div>
      <br /><br />
      <p><strong>Grid pagination controlled via the API</strong></p>
      <div ui-grid="gridOptions2" ui-grid-pagination class="grid"></div>
      <p>Current page: {{ gridApi2.pagination.getPage() }} of {{ gridApi2.pagination.getTotalPages() }}</p>
      <button type="button" class="btn btn-success" ng-click="gridApi2.pagination.previousPage()">
        previous page
      </button>
      <button type="button" class="btn btn-success" ng-click="gridApi2.pagination.nextPage()">
        next page
      </button>
      <button type="button" class="btn btn-success" ng-click="gridApi2.pagination.seek(3)">
        go to page 3
      </button>
    </div>
  </file>
  <file name="main.css">
    .grid {
      width: 600px;
    }
  </file>
</example>