如何使用ui-grid应用pagination.js

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/angular-ui-grid@4.8.3/ui-grid.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/angular-ui-grid@4.8.3/ui-grid.min.css" />

var app = angular.module('myApp', ['ui.grid']);

<div ng-app="myApp" ng-controller="myCtrl">
  <div ui-grid="gridOptions" class="grid"></div>
</div>

app.controller('myCtrl', function($scope) {
  $scope.gridOptions = {
    paginationPageSizes: [25, 50, 75],
    paginationPageSize: 25,
    useExternalPagination: true,
    useExternalSorting: true,
    columnDefs: [
      // 定义表格列
      { name: 'name', displayName: '姓名' },
      { name: 'age', displayName: '年龄' },
      { name: 'email', displayName: '邮箱' }
    ],
    onRegisterApi: function(gridApi) {
      // 注册pagination.js的回调函数
      gridApi.pagination.on.paginationChanged($scope, function(newPage, pageSize) {
        // 在这里处理分页变化事件，例如从服务器获取新的数据
        // 使用newPage和pageSize参数来请求相应的数据
      });
    }
  };
});

$scope.gridOptions.data = [
  { name: 'John', age: 25, email: 'john@example.com' },
  { name: 'Jane', age: 30, email: 'jane@example.com' },
  { name: 'Bob', age: 35, email: 'bob@example.com' },
  // 更多数据...
];