ag-grid-vue企业版32.1.0：服务端排序时重置分页至第1页的方法

你可以通过监听AG Grid的sortChanged事件，在排序发生变化时主动将分页重置到第一页，具体实现如下：

方法一：监听排序变化事件重置分页 #

在Vue组件中给ag-grid-vue绑定sortChanged事件，调用Grid API的paginationGoToPage方法跳转到第一页（AG Grid分页索引从0开始，第一页对应索引0）：

<template>
  <ag-grid-vue
    :columnDefs="columnDefs"
    :rowModelType="rowModelType"
    :pagination="true"
    :paginationPageSize="paginationPageSize"
    :gridOptions="gridOptions"
    @sort-changed="onSortChanged"
    <!-- 其他必要属性 -->
  ></ag-grid-vue>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import 'ag-grid-enterprise';

const gridApi = ref(null);
const rowModelType = ref('serverSide');
const paginationPageSize = ref(10);
const columnDefs = ref([
  // 你的列定义配置
]);
const gridOptions = ref({
  serverSideDatasource: {
    getRows(params) {
      // 服务端请求逻辑，此时params的startRow/endRow已重置为第一页范围
      fetch('/your-api-path', {
        method: 'POST',
        body: JSON.stringify({
          startRow: params.startRow,
          endRow: params.endRow,
          sortModel: params.sortModel,
          filterModel: params.filterModel
        })
      })
      .then(res => res.json())
      .then(data => {
        params.success({
          rowData: data.rows,
          rowCount: data.totalCount
        });
      })
      .catch(err => params.fail());
    }
  }
});

const onSortChanged = () => {
  gridApi.value?.paginationGoToPage(0);
};

onMounted(() => {
  gridApi.value = gridOptions.value.api;
});
</script>

方法二：在getRows中手动修正分页参数（备选） #

若不想通过事件监听，也可在getRows方法中检测排序模型变化，手动重置分页参数：

gridOptions.value = {
  context: { lastSortModel: [] },
  serverSideDatasource: {
    getRows(params) {
      const lastSortModel = params.context.lastSortModel;
      const currentSortModel = params.sortModel;
      const sortChanged = JSON.stringify(lastSortModel) !== JSON.stringify(currentSortModel);

      if (sortChanged) {
        params.startRow = 0;
        params.endRow = paginationPageSize.value;
        params.context.lastSortModel = currentSortModel;
      }

      // 后续服务端请求逻辑，使用修正后的分页参数
      fetch('/your-api-path', {
        method: 'POST',
        body: JSON.stringify({
          startRow: params.startRow,
          endRow: params.endRow,
          sortModel: params.sortModel,
          filterModel: params.filterModel
        })
      })
      .then(res => res.json())
      .then(data => {
        params.success({
          rowData: data.rows,
          rowCount: data.totalCount
        });
      })
      .catch(err => params.fail());
    }
  }
};

注意：第一种方法更符合AG Grid官方推荐，通过API控制分页能自动同步Grid的分页状态，避免手动修改参数可能引发的状态不一致问题。

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