314_external_pagination.ngdoc

@ngdoc overview
@name Tutorial: 314 External Pagination
@description

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

For external pagination, implement the `gridApi.pagination.on.paginationChanged` callback function. The callback 
may contain code to update any pagination state variables your application may utilize, e.g. variables containing 
the `pageNumber` and `pageSize`. The REST call used to fetch the data from the server should be called from within 
this callback. The URL of the call should contain query parameters that will allow the server-side code to have 
sufficient information to be able to retrieve the specific subset of data that the client requires from the 
entire set.

It should also update the `$scope.gridOptions.totalItems` variable with the total count of rows that exist (but 
were not all fetched in the REST call mentioned above since they exist in other pages of data).

This will allow ui-grid to calculate the correct number of pages on the client-side.

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
This shows combined external pagination and sorting.
<example module="app">
  <file name="app.js">
    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 = '/data/100_ASC.json';
            break;
          case uiGridConstants.DESC:
            url = '/data/100_DESC.json';
            break;
          default:
            url = '/data/100.json';
            break;
        }

        $http.get(url)
        .then(function (response) {
          var data = response.data;

          $scope.gridOptions.totalItems = 100;
          var firstRow = (paginationOptions.pageNumber - 1) * paginationOptions.pageSize;
          $scope.gridOptions.data = data.slice(firstRow, firstRow + paginationOptions.pageSize);
        });
      };

      getPage();
    }
    ]);
  </file>
  <file name="index.html">
    <div ng-controller="MainCtrl">
      <div ui-grid="gridOptions" ui-grid-pagination class="grid"></div>
    </div>
  </file>
  <file name="main.css">
    .grid {
      width: 600px;
    }
  </file>
</example>