Codeigniter 4结合jQuery Ajax实现分页仅返回表格行数据方法

核心逻辑是区分普通页面请求和Ajax请求：普通访问返回完整页面，Ajax分页请求只返回需要替换的表格行、分页栏片段，不输出整页HTML。

第一步：拆分视图片段 #

把页面里需要动态替换的两部分代码拆成独立的子视图，避免重复写代码：

• 新建app/Views/material/_table_rows.php，把原页面中<tbody id="listMaterial">内部遍历输出<tr><td>的代码全部剪切到这个文件里，文件里只保留tr、td相关的输出逻辑，不要任何外层布局、html/head/body标签。
• 新建app/Views/material/_pager.php，把你写的id为pagerRumah的整个分页栏代码剪切到这个文件里，文件开头保留<?php $pager->setSurroundCount(1); ?>代码。
• 原materialKatalog.php主视图里，两个部分剪切走的位置，直接用<?= view('material/_table_rows', $data) ?>和<?= view('material/_pager', $data) ?>引入即可。

第二步：修改控制器逻辑 #

在控制器里加Ajax请求判断，Ajax请求时不渲染整页，只返回拼接好的片段JSON：

public function index() {
    $perPage = 50;
    $search = $this->request->getGet('q');
    // 此处替换为你自己的搜索查询逻辑，没有搜索可以跳过
    if ($search) {
        $this->mamat->like('对应搜索字段名', $search);
    }
    $data['listMT'] = $this->mamat->paginate($perPage, 'material');
    $data['pager'] = $this->mamat->pager;
    $data['searchString'] = $search;

    // 识别Ajax请求
    if ($this->request->isAJAX()) {
        // 渲染两个片段的HTML
        $tableContent = view('material/_table_rows', $data);
        $pagerContent = view('material/_pager', $data);
        // 返回JSON格式数据
        return $this->response->setJSON([
            'code' => 200,
            'tableHtml' => $tableContent,
            'pagerHtml' => $pagerContent
        ]);
    }

    // 普通页面访问返回完整页面
    return view('materialKatalog', $data);
}

注意：如果需要分页链接保留搜索参数，要在CI4分页配置里开启query参数透传，或者调用pager的时候传入当前GET参数，避免换页后搜索条件丢失。

第三步：修改前端JS逻辑 #

原来的代码有两个问题：一是没有做事件委托，换页后新生成的分页按钮会丢失点击事件；二是没有对应处理JSON返回的内容，修改如下：

$(function(){
    // 用事件委托绑定点击事件，适配动态渲染的分页按钮
    $(document).on('click', "#pagerRumah a", function(e){
        e.preventDefault();
        const pageUrl = $(this).attr("href");
        $.ajax({
            type: "GET",
            url: pageUrl,
            // 用对象传参，避免特殊字符转义错误
            data: {q: "<?= $searchString ?>"},
            dataType: 'JSON',
            beforeSend: function() {
                // 可选：加加载态，提升体验
                $("#listMaterial").css('opacity', 0.5);
            },
            success: function(res){
                if(res.code === 200) {
                    // 替换表格内容
                    $("#listMaterial").html(res.tableHtml);
                    // 替换分页栏
                    $("#pagerRumah").replaceWith(res.pagerHtml);
                    // 可选：滚动到表格顶部，方便查看内容
                    $('html, body').animate({scrollTop: $("#listMaterial").offset().top - 30}, 150);
                }
            },
            complete: function() {
                $("#listMaterial").css('opacity', 1);
            }
        });
       return false;
    });
});

避坑提示 #

• Ajax返回的视图片段里不要包含整页的html、head、script、layout布局代码，只保留需要替换的局部HTML即可，避免页面嵌套错乱。
• 不要直接给分页a标签绑定事件，必须用事件委托，否则第一次换页后新生成的分页按钮点击会直接跳页，不会走Ajax逻辑。
• 如果分页链接里没有自动带上搜索q参数，可以在控制器里给pager传入query配置，把当前GET参数附加到分页链接上。

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