PrimeVue DataTable分页未按totalRecords显示正确页码链接

问题原因 #

你当前的配置未开启服务器端分页模式，DataTable默认会根据绑定的dataItems数组长度计算可显示的页码，而非你设置的totalRecords值，因此只会显示已加载数据对应的页码。

解决方案：开启懒加载模式 #

只需给DataTable添加lazy属性并设为true，组件就会基于totalRecords和rows计算总页数、生成对应页码链接，同时通过懒加载事件触发服务器请求。

修改后的DataTable代码 #

<DataTable 
  ref="dt" 
  :value="dataItems" 
  dataKey="id" 
  :loading="loading1" 
  :paginator="true" 
  :totalRecords="50" 
  :rows="5" 
  :pageLinkSize="50"
  :lazy="true"  <!-- 新增：开启服务器端分页 -->
  @lazy-load="handlePagination"  <!-- 用lazy-load事件获取分页参数 -->
>
  <!-- 列定义 -->
</DataTable>

分页请求逻辑 #

lazy-load事件会返回包含分页参数的对象（含page、first、rows等），用这些参数向服务器请求对应页数据：

const handlePagination = (event) => {
  loading1.value = true;
  
  // 注意：PrimeVue的page从0开始，若后端接口页码从1开始需加1
  fetch(`/api/data?page=${event.page + 1}&pageSize=${event.rows}`)
    .then(res => res.json())
    .then(data => {
      dataItems.value = data.list; // 服务器返回的当前页数据
      totalRecords.value = data.total; // 更新总条数（按需）
      loading1.value = false;
    })
    .catch(err => {
      loading1.value = false;
      console.error(err);
    });
};

能否使用独立Paginator组件实现？ #

完全可以。如果需要更灵活的分页栏布局，可关闭DataTable内置分页器，单独使用Paginator组件：

示例代码 #

<!-- DataTable 关闭内置分页 -->
<DataTable 
  ref="dt" 
  :value="dataItems" 
  dataKey="id" 
  :loading="loading1" 
  :paginator="false"  <!-- 关闭内置分页 -->
>
  <!-- 列定义 -->
</DataTable>

<!-- 独立Paginator组件 -->
<Paginator
  :totalRecords="50"
  :rows="5"
  :pageLinkSize="50"
  v-model:page="currentPage"
  @page="handlePagination"
/>

对应逻辑 #

const currentPage = ref(0); // PrimeVue的page从0开始计数

const handlePagination = (event) => {
  currentPage.value = event.page;
  loading1.value = true;
  
  fetch(`/api/data?page=${event.page + 1}&pageSize=${event.rows}`)
    .then(res => res.json())
    .then(data => {
      dataItems.value = data.list;
      totalRecords.value = data.total;
      loading1.value = false;
    });
};

关键注意点 #

• lazy属性是核心：开启后DataTable才会使用totalRecords计算总页数，而非当前数据长度。
• 注意PrimeVue页码从0开始，若后端接口页码从1开始，请求时需做转换。
• 确保totalRecords始终与服务器返回的总数据条数一致，保证分页栏页码数量准确。

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