CodeIgniter4分页场景下实现表格序号跨页连续计数的求助

核心逻辑很简单：当前页的展示序号 = （当前页码 - 1）* 每页固定展示条数 + 当前行在当前页的索引，不需要改动原有分页的核心结构，只需要在现有代码基础上做两处调整即可。

1. 后端控制器改动 #

原来的返回结果缺少前端计算连续序号必需的分页参数，直接利用CodeIgniter 4 Pager自带的方法获取当前页码，把分页基础参数随接口返回给前端即可，不需要在后端拼接序号字段。
修改后的getAll方法代码：

public function getAll()
{
    // 保持原有每页10条的设置，单独抽成变量方便后续调整
    $perPage = 10;
    $result = $this->model->getData()->asObject()->paginate($perPage);
    $pager = $this->model->pager;
    
    foreach($result as $row){
        $output[] = [
             'id'          =>  $row->id,
             'myColumn'    =>  $row->myColumn,
        ];
    }

    // 新增前端序号计算必需的分页信息，默认兜底第1页避免空值报错
    $currentPage = $pager->getCurrentPage() ?: 1;
    $jsonArray = [
        'result'  => $output, 
        'pager'   => $pager->links(),
        // 把分页基础参数传给前端
        'pageInfo' => [
            'currentPage' => $currentPage,
            'perPage' => $perPage
        ]
    ];
    return $this->response->setJSON($jsonArray);
}

2. 前端jQuery代码改动 #

原来的代码硬把序号起始值设为1，完全没有关联当前页码，现在只要把后端返回的分页参数拿过来计算起始序号，再配合遍历的索引累加即可。
同时补全原来代码里遗漏的内容：

• html变量初始化，避免拼接时报未定义错误
• 分页链接的点击拦截，走AJAX加载不刷新页面
  修改后的show方法代码：

// 预留page入参，支持点击分页时传目标页码加载
function show(page = 1) {
    let ajax = $.ajax({
        url     : '/Controller/getAll',
        method  : 'post',
        dataType: 'json',
        cache   : false,
        // 把页码传给后端，匹配CI4 Pager的默认参数规则
        data    : { page: page }
    });
    ajax.done(function(data) {
        let html = '';
        // 计算当前页的序号起始值
        const startSerial = (data.pageInfo.currentPage - 1) * data.pageInfo.perPage + 1;

        $.each(data.result, function(k, v) {
            // 起始值 + 当前行在本页的索引 = 跨页连续序号
            const serialNumber = startSerial + k;
            html += `<tr>
                         <td>${serialNumber}</td>
                         <td>${v.myColums}</td>
                     </tr>`;
        });
        // 渲染表格内容
        $('.result').html(html);

        // 渲染分页组件，绑定点击事件走AJAX
        $('#pagerContainer').html(data.pager);
        $('#pagerContainer a').on('click', function(e) {
            e.preventDefault();
            // CI4默认分页链接自带data-ci-page属性，直接取即可
            const targetPage = $(this).data('ci-page') || 1;
            show(targetPage);
        });
    });
}
// 页面初始化加载第一页
show(1);

补充说明 #

• 两种实现路径效果完全一致：既可以在后端遍历时给每行结果拼接好连续序号返回，也可以把分页参数传给前端计算。后者的好处是后续调整每页条数时，只要同步修改perPage的传值即可，不用改动后端数据拼接逻辑。
• 计算逻辑通用：不管后续每页条数改成20、50，只要保证后端返回的perPage和实际分页条数一致，序号就会自动连续累加，不会出现断号、重置的问题。
• CI4默认生成的分页链接自带data-ci-page属性，不需要从href里正则匹配页码，直接取值就能拿到目标页码，避免格式解析出错。

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