CodeIgniter Ajax分页失效求助：点击分页链接触发整页刷新

你遇到的核心问题是分页链接默认触发了浏览器的跳转行为，没通过Ajax加载数据；同时当前控制器只接收POST参数，分页时无法携带之前的搜索条件，导致数据也会出错。下面一步步来解决：

步骤1：修改控制器，支持携带搜索参数的分页 #

首先要让分页URL包含搜索条件（类型、起止日期），同时让控制器兼容POST和GET参数，这样搜索提交和分页请求都能拿到条件：

public function chrgs_ajs_result() {
    // 兼容POST（搜索提交）和GET（分页请求）获取参数
    $type = $this->input->post('catg') ?? $this->input->get('catg');
    $sdate = $this->input->post('start_date') ?? $this->input->get('start_date');
    $edate = $this->input->post('end_date') ?? $this->input->get('end_date');

    $result['error'] = "";
    $result['res'] = "";
    
    // 建议给模型加一个统计总数的方法，避免重复查询全量数据（性能更好）
    $total_rows = $this->chrgs_edit_report_model->get_edit_amount_count($type,$sdate,$edate);
    // 如果不想改模型，也可以用原来的count($this->chrgs_edit_report_model->get_edit_amount(...))，但不推荐

    // 配置分页：base_url带上搜索参数，让分页链接包含条件；给链接加自定义类方便绑定事件
    $config['base_url'] = base_url() . 'index.php/payment_edit/chrgs_ajs_result?catg='.$type.'&start_date='.$sdate.'&end_date='.$edate;
    $config['total_rows'] = $total_rows;
    $config['per_page'] = 15;
    $config["uri_segment"] = 3;
    $config['attributes'] = array('class' => 'pagination-link');
    
    $this->pagination->initialize($config);

    $page = ($this->uri->segment(3)) ? $this->uri->segment(3) : 0;
    // 带分页参数查询数据
    $result['res'] = $this->chrgs_edit_report_model->get_edit_amount($type,$sdate,$edate,$config["per_page"], $page);
    $result["links"] = $this->pagination->create_links();
    $result["type"] = $type; // 把类型传到视图，避免变量未定义

    if (!empty($result['res'])) {
        $this->load->view('edit_charg_ajax_result',$result);
    } else {
        echo "No Result Found";
    }
}

补充：模型新增统计总数的方法示例

public function get_edit_amount_count($type, $sdate, $edate) {
    // 这里写你的查询条件，最后返回总数
    return $this->db->where('type', $type)
                    ->where('added_on >=', $sdate)
                    ->where('added_on <=', $edate)
                    ->count_all_results('your_table_name');
}

步骤2：修改Ajax结果视图（edit_charg_ajax_result.php） #

• 修复序号问题：分页后序号应该从$page + $i开始，不然每一页都从1计数
• 调整分页链接的容器，方便后续事件绑定：

<div class="pagination-wrapper">
    <?php if (isset($links)) { echo $links; } ?>
</div>
<table border="1" class="mainTable" cellpadding="0" cellspacing="0">
    <tr style="background-color:#F2FAFF;color:#660">
        <td width="3%">Sl No</td>
        <td width="8%">Track Number</td>
        <td width="8%">Old <?php echo $type; ?></td>
        <td width="8%">New <?php echo $type; ?></td>
        <td width="30%">Reason</td>
        <td width="10%">Date</td>
        <td width="10%">Requested By</td>
        <td width="10%">Approved By</td>
        <td width="10%">Approved IP</td>
    </tr>
    <?php $i = 1; foreach ($res as $value) { ?>
    <tr>
        <td><?php echo $page + $i; ?></td> <!-- 修复分页后的序号 -->
        <td><?php echo $value['track_no']; ?></td>
        <td><?php echo $value['old_value']; ?></td>
        <td><?php echo $value['new_value']; ?></td>
        <td><?php echo $value['reason']; ?></td>
        <td><?php echo $value['added_on']; ?></td>
        <td><?php echo $value['requested_by']; ?></td>
        <td><?php echo $value['approved_by']; ?></td>
        <td><?php echo $value['ip']; ?></td>
    </tr>
    <?php $i++; } ?>
</table>

步骤3：修改主页面的Ajax代码，拦截分页链接点击 #

原来的Ajax只处理了搜索按钮，现在要给动态生成的分页链接绑定事件，阻止默认跳转：

// 搜索按钮点击事件
$("#search_charge_edit").on("click",function(){
    var controller_function = "<?php echo base_url();?>index.php/payment_edit/chrgs_ajs_result";
    var post_data = $("#form").serialize();
    $.ajax({
        type:"post",
        url:controller_function,
        data:post_data,
        success:function(data) {
            $('#result').html(data);
            // 动态内容加载后，重新绑定分页事件
            bindPaginationClick();
        }
    });
});

// 绑定分页链接的点击事件
function bindPaginationClick() {
    $('.pagination-link').on('click', function(e) {
        e.preventDefault(); // 阻止浏览器默认跳转
        var pageUrl = $(this).attr('href');
        $.ajax({
            type:"get",
            url:pageUrl,
            success:function(data) {
                $('#result').html(data);
                // 重新绑定事件，因为新的分页链接又生成了
                bindPaginationClick();
            }
        });
    });
}

关键逻辑说明 #

1. 分页URL带搜索参数：让每个分页链接都包含之前的搜索条件，控制器处理分页请求时能拿到条件，返回对应页码的正确数据。
2. 拦截默认跳转：通过e.preventDefault()阻止浏览器跳转到分页URL，改用Ajax请求局部更新页面。
3. 动态绑定事件：因为分页链接是Ajax生成的，每次加载完数据都要重新绑定点击事件，不然新链接不会生效。

这样修改后，点击分页链接就不会触发整页刷新，而是通过Ajax局部更新表格和分页区域啦！

内容的提问来源于stack exchange，提问作者sooraj s pillai