三十二、UI-Grid Pagination 分页

原文: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>

Example
代码
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;
  });
}]);

Demo

作者水平有限,不当之处敬请指正。
感谢您的阅读,如果觉得文章对您有帮助,请支持一下。

发表评论

电子邮件地址不会被公开。 必填项已用*标注