Laravel Pagination + Livewire：如何保留每页数据条数并固定分页数据

要实现你描述的「数据变更后分页内容不自动填充空缺」的需求，核心是抛弃传统的动态索引分页逻辑，改用「固定分页归属」的方式，具体实现思路如下：

核心改造点 #

• 给每条数据绑定固定的「分页标识」：不再靠(页码-1)*每页条数这种动态计算划分分页，而是给每条数据添加一个pageId（或类似字段），初始化时按设定的每页条数给数据分配对应的pageId。比如每页50条时，前50条pageId=1，第51-100条pageId=2，以此类推。
• 分页切换逻辑改为按「分页标识筛选」：切换页码时，直接筛选出pageId等于当前页码的所有数据，而非对全量数据做动态切片。

具体实现步骤 #

1. 初始化数据时分配分页标识 #

假设你有一组原始数据rawData，设定每页显示pageSize=50，初始化代码可以这样写：

const pageSize = 50;
const dataWithPageId = rawData.map((item, index) => ({
  ...item,
  pageId: Math.floor(index / pageSize) + 1 // 从1开始计数页码
}));

2. 分页渲染逻辑 #

切换页码时，直接筛选对应pageId的数据：

function getCurrentPageData(currentPage, data) {
  return data.filter(item => item.pageId === currentPage);
}

比如你删除第一页的2条数据后，pageId=1的数据只剩48条；切换到第二页时，依然只筛选pageId=2的50条数据，完全不会出现内容补位的情况。

3. 数据变更的处理 #

• 删除操作：直接移除目标数据即可，无需修改其他数据的pageId。比如删除pageId=1的2条数据后，第一页的条数自然变为48，其他分页的内容完全不受影响。
• 新增数据：可以选择将新增数据分配到指定的pageId（比如加到最后一页），或者新增一个新的pageId（当最后一页已满时），确保不会打乱已有分页的内容。
• 调整每页条数：如果需要修改pageSize，则需要重新遍历全量数据，重新分配所有数据的pageId——这是唯一需要重新计算分页的场景，符合你「设置每页条数后保留状态」的需求。

额外注意事项 #

• 页码总数计算：可以通过提取所有不重复的pageId来获取总页码数，或者维护一个单独的totalPages变量来跟踪。
• 空分页处理：如果某个pageId下的数据被全部删除，可以在渲染页码时隐藏该页码选项。

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