阿里云新用户优惠

三十二、UI-Grid Pagination 分页

· 199 words · 1 minute read
ui-grid
angularjs · ui-grid · ui-grid中文

原文：Tutorial: 214 Pagination

启用分页后，数据会使用内置分页选择器显示在浏览的页面中。 api文档中提供了分页功能的文档，特别是：

  • gridOptions
  • publicApi

如果您想要基于服务器的分页，可以查看外部分页教程或考虑使用无限滚动，它还支持检索页面中的数据。 为了通过以下示例获得更好的性能，您可以选择加载ui-grid.core.js和特定功能文件：

<script src="http://ui-grid.info/release/ui-grid.core.min.js"></script>
<script src="http://ui-grid.info/release/ui-grid.auto-resize.min.js"></script>
  • index.html
<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-animate.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-aria.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/docs/grunt-scripts/lodash.min.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/jszip.min.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/excel-builder.dist.js"></script>
    <script src="/release/ui-grid.js"></script>
    <script src="/release/ui-grid.css"></script>
    <script src="app.js"></script>
  </head>
  <body>
    <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>
  </body>
</html>
  • main.css
.grid {
  width: 600px;
}
  • 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;
  });
}]);

关注微信公众号，与我交流吧~

分享