如何在AngularJS（1.x）中切换页面时维持ui-grid分页状态？

要实现切换视图时保留ui-grid的分页状态（当前页码、每页条数），核心思路是用单例服务存储分页信息——AngularJS的服务是全局单例，不会随视图销毁而丢失数据；如果需要刷新页面也保留状态，可结合localStorage实现持久化。

步骤1：创建分页状态存储服务 #

这个服务负责保存和读取分页信息，可选加入localStorage支持实现持久化：

angular.module('yourApp').factory('GridPaginationService', function() {
  // 单个grid用固定key，多个grid可改成动态传入key避免冲突
  var storageKey = 'userListGridPagination';
  // 初始化状态：优先从localStorage读取，无数据则用默认值
  var paginationState = JSON.parse(localStorage.getItem(storageKey)) || {
    pageNumber: 1,
    pageSize: 10
  };

  // 持久化到localStorage的辅助方法
  function persistState() {
    localStorage.setItem(storageKey, JSON.stringify(paginationState));
  }

  return {
    // 返回状态副本，避免直接修改内部数据
    getState: function() {
      return angular.copy(paginationState);
    },
    // 更新状态并持久化
    setState: function(newState) {
      paginationState.pageNumber = newState.pageNumber;
      paginationState.pageSize = newState.pageSize;
      persistState();
    }
  };
});

步骤2：在列表页控制器中集成服务 #

在grid所在的控制器里，初始化时恢复之前的分页状态，同时监听分页变化并实时保存到服务：

angular.module('yourApp').controller('UserListController', function($scope, GridPaginationService) {
  // 初始化grid基础配置
  $scope.gridOptions = {
    paginationPageSizes: [10, 20, 50],
    paginationPageSize: GridPaginationService.getState().pageSize,
    enablePaginationControls: true,
    // 其他grid配置（列定义、数据绑定等）...
  };

  // 注册grid API，处理分页状态
  $scope.gridOptions.onRegisterApi = function(gridApi) {
    $scope.gridApi = gridApi;

    // 监听页码/每页条数变化，实时保存状态并重新加载数据
    gridApi.pagination.on.paginationChanged($scope, function(newPage, pageSize) {
      GridPaginationService.setState({
        pageNumber: newPage,
        pageSize: pageSize
      });
      loadGridData(newPage, pageSize);
    });

    // 页面初始化时，恢复之前的分页状态并加载对应数据
    var savedState = GridPaginationService.getState();
    if (savedState.pageNumber > 1) {
      gridApi.pagination.seek(savedState.pageNumber);
      loadGridData(savedState.pageNumber, savedState.pageSize);
    } else {
      loadGridData(1, savedState.pageSize);
    }
  };

  // 封装数据加载方法，根据分页参数请求对应数据
  function loadGridData(pageNum, pageSize) {
    // 替换成你的实际数据请求逻辑
    // yourDataService.fetchUsers(pageNum, pageSize)
    //   .then(function(response) {
    //     $scope.gridOptions.data = response.data.items;
    //     $scope.gridOptions.totalItems = response.data.totalCount; // 设置总数据量
    //   });
  }
});

关键注意事项 #

• 多grid场景下，需修改服务为支持传入唯一key的形式，避免不同grid的分页状态互相覆盖。
• 数据加载逻辑必须和分页状态绑定，每次视图切换或分页变化时，都要根据当前页码和每页条数请求对应数据。
• 若不需要刷新页面保留状态，可去掉服务中的localStorage相关代码，仅用内存存储状态即可。

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