使用Livewire的simplePaginate删除末页唯一行后表格显示无数据问题

问题表现 #

• 业务表格每行配置单条数据删除按钮，分页能力基于Livewire提供的simplePaginate实现
• 用户导航到分页最后一页（该页仅剩余1条展示数据）时，点击删除按钮可正常完成数据库层面的删除操作
• 删除操作执行完成后，表格区域直接展示“暂无记录”提示，但经核验数据库仍存储有其他未展示的有效数据
• 对应状态参考截图：最后一页正常展示状态、删除操作完成后的异常空白状态

异常根因 #

该问题属于典型的页码越界未自动校正问题，和simplePaginate的底层实现逻辑直接相关：

• simplePaginate 区别于传统paginate的核心特点是不会预先全量查询总记录数、计算全局总页数，它的取数逻辑是直接根据请求携带的page参数，计算数据偏移量后抓取固定条数的数据，本身没有“页码越界自动回溯到上一有效页”的兜底逻辑
• 当用户停留在最后一页执行删除操作时，数据库总记录数减少1，重新计算数据偏移量后，用户当前所处的页码已经超出了有效数据的覆盖范围
• Livewire默认会在组件状态中保留用户上一次操作的页码参数，不会根据最新的数据量自动修正页码值，最终就会出现取数偏移超出有效范围、返回空结果集的异常表现

解决方案 #

• 删除逻辑执行后主动校验并校正页码
  在完成单条数据删除、重新调用simplePaginate查询展示数据之前，先判断当前留存的页码值是否已经超过最新数据量能支撑的最大有效页码，如果存在越界就自动将页码修正为最大的合法值。核心实现逻辑参考：

  // 完成单条数据删除的数据库操作后
  $totalRecords = DataModel::count();
  $maxValidPage = (int) ceil($totalRecords / $this->perPage);
  // 页码越界时自动校正
  if ($this->page > $maxValidPage) {
      $this->page = $maxValidPage;
  }
  

• 针对最后一条数据删除场景做交互优化
  单独判断如果当前页删除后已经没有剩余展示数据，直接将页码值减1回到上一页的有效数据范围。相比直接跳转到最大有效页码，这种处理方式不会打断用户之前的翻页操作路径，交互体验更顺滑
• 避免使用粗暴的页码重置逻辑
  不要在数据变更后直接将页码参数固定为1，这种处理虽然能解决页面空白问题，但会让用户从原来的靠后页码直接跳回首页，完全中断原有浏览路径，带来不必要的体验损耗

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