Ag-grid分页自定义：AngularJS实现分页按需从服务器加载数据

这事儿我熟，刚好之前在AngularJS项目里用ag-grid做过类似的分页加载需求，给你拆解下具体实现步骤，保证能搞定：

首先在你的HTML模板里，先把ag-grid的指令加上，同时开启分页功能，指定每页显示10条（和你的需求匹配）。如果不想用ag-grid默认的分页栏，咱们可以自己加自定义的「下一页」按钮：

<!-- ag-grid容器 -->
<div ag-grid="vm.gridOptions" class="ag-theme-alpine" style="height: 500px;"></div>

<!-- 自定义分页按钮 -->
<button ng-click="vm.loadNextPage()" ng-disabled="vm.isLoading || !vm.hasMorePages">
  {{ vm.isLoading ? '加载中...' : '下一页' }}
</button>

接下来在你的AngularJS控制器里，定义分页相关的状态变量，还有ag-grid的核心配置。这里要重点设置pagination: true开启分页，同时把rowData初始化为空数组，后续通过接口请求填充：

angular.module('yourApp').controller('YourGridController', function($http) {
  var vm = this;

  // 分页状态管理
  vm.currentPage = 1;
  vm.pageSize = 10;
  vm.totalRecords = 0;
  vm.isLoading = false;
  vm.hasMorePages = true;

  // ag-grid核心配置
  vm.gridOptions = {
    columnDefs: [
      // 这里替换成你的列定义，比如：
      { headerName: 'ID', field: 'id' },
      { headerName: '名称', field: 'name' },
      { headerName: '描述', field: 'description' }
    ],
    pagination: true,
    paginationPageSize: vm.pageSize,
    // 可选：隐藏ag-grid默认的分页栏，用自定义按钮
    suppressPaginationPanel: true,
    rowData: []
  };

  // 页面初始化时加载第一页数据
  vm.getPageData(vm.currentPage);
});

写一个通用的加载函数，根据当前页码去请求后端接口，拿到数据后更新ag-grid的rowData，同时更新总记录数，判断是否还有下一页：

// 加载指定页码的数据
vm.getPageData = function(page) {
  vm.isLoading = true;
  // 调用后端接口，传递page和pageSize参数
  $http.get(`/api/your-data-endpoint?page=${page}&size=${vm.pageSize}`)
    .then(function(response) {
      // 假设后端返回的数据结构是 { data: [...], total: 100 }
      vm.gridOptions.rowData = response.data.data;
      vm.totalRecords = response.data.total;

      // 判断是否还有下一页
      var totalPages = Math.ceil(vm.totalRecords / vm.pageSize);
      vm.hasMorePages = page < totalPages;

      vm.isLoading = false;
    })
    .catch(function(error) {
      console.error('加载数据失败:', error);
      vm.isLoading = false;
    });
};

最后给自定义按钮绑定点击事件，每次点击时页码加1，然后调用加载函数：

// 加载下一页数据
vm.loadNextPage = function() {
  if (vm.hasMorePages && !vm.isLoading) {
    vm.currentPage++;
    vm.getPageData(vm.currentPage);
  }
};

几个关键注意点： #

• 后端接口需要支持分页参数（page和size），并且返回当前页的数据以及总记录数，这样咱们才能判断是否还有下一页。
• 加个isLoading状态可以防止用户重复点击按钮，避免多次请求。
• 如果想用ag-grid默认的分页栏而不是自定义按钮，只需要去掉suppressPaginationPanel: true，然后监听ag-grid的paginationChanged事件，在事件触发时调用getPageData函数即可，逻辑是类似的。

内容的提问来源于stack exchange，提问作者Joginaidu Gopisetti