Admin-on-rest如何将pagination分页组件放置在列表顶部

1. 基础布局结构调整 #

这是所有前端场景通用的实现逻辑，不需要修改分页组件本身的功能代码，仅调整页面DOM结构层级即可，按从顶到底的顺序排列：

• 页面顶部功能区
• 筛选器组件区块
• 自定义Pagination分页组件区块
• 列表内容渲染区块
• 其他底部功能区

如果你用的是已经封装好的列表组件，可以给列表组件新增一个topSlot/顶部插槽的扩展位，把分页组件传入插槽即可，不需要拆分现有列表的封装逻辑。

注意：要确保分页组件的分页状态和列表数据请求逻辑完全绑定，顶部分页切换时，和放在底部的分页触发完全相同的列表刷新逻辑，避免出现状态不同步的问题。

2. 常见框架的实现示例 #

React 场景 #

import MyPagination from './MyPagination'

const ListPage = () => {
  const [pagination, setPagination] = useState({ current: 1, pageSize: 10 })
  const [filterParams, setFilterParams] = useState({})
  const [listData, setListData] = useState([])
  const [listTotal, setListTotal] = useState(0)

  // 列表数据请求逻辑
  const fetchList = () => {
    // 传入filterParams + pagination参数请求后端接口
    api.getList({...filterParams, ...pagination}).then(res => {
      setListData(res.data.list)
      setListTotal(res.data.total)
    })
  }

  return (
    <div className="list-page">
      {/* 筛选器组件 */}
      <FilterForm onChange={setFilterParams} onSearch={fetchList} />
      {/* 自定义分页组件放在筛选器下方 */}
      <MyPagination 
        current={pagination.current}
        pageSize={pagination.pageSize}
        total={listTotal}
        onChange={(page, size) => {
          setPagination({ current: page, pageSize: size })
          fetchList()
        }}
      />
      {/* 列表内容 */}
      <List 
        dataSource={listData} 
        renderItem={item => <List.Item key={item.id}>{item.content}</List.Item>} 
      />
    </div>
  )
}

Vue 场景 #

如果是封装好的列表组件，用插槽传入即可：

<template>
  <div class="list-page">
    <!-- 筛选器组件 -->
    <FilterForm @search="fetchList" @change="setFilterParams" />
    <!-- 封装好的列表组件，使用顶部插槽插入分页 -->
    <CustomList
      :data="listData"
      @page-change="handlePageChange"
    >
      <template #top>
        <MyPagination 
          v-model:current="pagination.current"
          v-model:page-size="pagination.pageSize"
          :total="listTotal"
          @change="fetchList"
        />
      </template>
    </CustomList>
  </div>
</template>
<script setup>
import { ref } from 'vue'
const pagination = ref({ current: 1, pageSize: 10 })
const filterParams = ref({})
const listData = ref([])
const listTotal = ref(0)

const fetchList = () => {
  // 请求逻辑
}
const handlePageChange = (page) => {
  pagination.value.current = page
  fetchList()
}
</script>

3. 样式适配注意点 #

• 给分页组件加上下边距，比如margin: 16px 0，和上下的筛选器、列表拉开距离，避免排版拥挤
• 如果需要同时保留顶部和底部两个分页组件，要确保两个组件绑定同一个分页状态变量，切换任意一个分页，两个组件的页码、页长同时更新
• 如果列表是滚动加载的分页模式，顶部可以只保留页长选择器，页码切换逻辑和滚动逻辑绑定即可

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