CodeIgniter Ajax分页链接异常：无数据加载且激活状态错误

问题分析 #

你遇到的分页异常主要有三个核心原因：

1. 分页参数传递错误：前端点击分页时未传递页码/偏移量给后端，且后端错误地从GET获取参数（但Ajax是POST请求），导致始终加载第一页数据。
2. 动态元素事件绑定失效：live()方法在高版本jQuery中已被废弃，无法正确绑定Ajax动态生成的分页链接点击事件。
3. 激活状态逻辑冲突：手动设置cur_page干扰了分页类的自动计算，加上base_url配置问题，导致多页同时显示激活状态。

解决方案步骤 #

1. 修复后端控制器（star.php的filtersearch函数）

public function filtersearch() { 
    // 安全获取POST参数，避免未定义索引错误
    $proSearch = implode(",", $this->input->post('search') ?? []); 
    $cat = $this->input->post('cat'); 
    // 从POST获取offset，默认值设为0
    $offset = $this->input->post('offset') ? intval($this->input->post('offset')) : 0;

    log_message('error', 'post value is '.$proSearch ); 
    log_message('error', ' '.$cat ); 

    $config = array(); 
    $config["base_url"] = "#"; 
    $config['page_query_string'] = FALSE; // 关闭query_string模式，适配POST传参
    $config["total_rows"] = $this->Star_model->getfilterCount($proSearch,$cat); 
    $config["per_page"] = 2; 
    // 移除uri_segment配置（仅适用于URL分段传参场景）
    $config['full_tag_open'] = '<ul class="pagination">'; 
    $config['full_tag_close'] = '</ul>'; 
    $config['first_link'] = false; 
    $config['last_link'] = false; 
    $config['first_tag_open'] = '<li>'; 
    $config['first_tag_close'] = '</li>'; 
    $config['prev_link'] = '«'; 
    $config['prev_tag_open'] = '<li class="prev">'; 
    $config['prev_tag_close'] = '</li>'; 
    $config['next_link'] = '»'; 
    $config['next_tag_open'] = '<li>'; 
    $config['next_tag_close'] = '</li>'; 
    $config['last_tag_open'] = '<li>'; 
    $config['last_tag_close'] = '</li>'; 
    $config['cur_tag_open'] = '<li class="active"><a href="#">'; 
    $config['cur_tag_close'] = '</a></li>'; 
    $config['num_tag_open'] = '<li>'; 
    $config['num_tag_close'] = '</li>'; 

    $this->pagination->initialize($config); 
    // 基于offset计算当前页，让分页类正确生成激活状态
    $current_page = ($offset / $config["per_page"]) + 1;
    $this->pagination->cur_page = $current_page;

    $output = array( 
        'pagination_link' => $this->pagination->create_links(), 
        'country_table' => $this->Star_model->getfilterSearch($proSearch,$cat,$config["per_page"],$offset) 
    ); 
    $this->output->set_content_type('application/json'); 
    echo json_encode($output); 
}

2. 修复前端Ajax与事件绑定（products.php）

替换废弃的live()方法为on()事件委托，同时传递分页偏移量参数：

$(document).ready(function(){ 
    // 封装加载数据函数，接收offset参数
    function load_data(offset = 0) { 
        var val = $('input[type=checkbox]:checked').map(function(_, el) { 
            return $(el).val(); 
        }).get(); 
        var cat = $("#sub_cat").val(); 
        
        $.ajax({ 
            url:"<?php echo base_url();?>star/filtersearch", 
            method:"POST", 
            data: {
                search: val, 
                cat: cat,
                offset: offset // 传递偏移量给后端
            }, 
            dataType:"json", 
            success:function(data) { 
                $('#country_table').html(data.country_table); 
                $('#pagination_link').html(data.pagination_link); 
                $("#asd").hide(); 
            } 
        }); 
    } 

    // 初始加载第一页（offset=0）
    load_data(0); 

    // 用事件委托绑定分页链接点击事件（适配动态生成的元素）
    $(document).on("click", ".pagination li a", function (e) { 
        e.preventDefault(); // 阻止锚点跳转，避免URL无意义变化
        var page = $(this).data('ci-pagination-page'); // 获取分页类生成的页码
        var offset = (page - 1) * 2; // 计算偏移量，2对应后端per_page值
        load_data(offset); 
    }); 

    // 修复筛选按钮的点击事件（用on代替live）
    $(document).on("click", ".cl", function () { 
        var val = $('input[type=checkbox]:checked').map(function(_, el) { 
            return $(el).val(); 
        }).get(); 
        var cat = $("#sub_cat").val(); 
        $.ajax({ 
            type: "POST", 
            url: "<?php echo base_url();?>star/filtersearch", 
            data: {search: val, cat: cat, offset: 0}, // 筛选后回到第一页
            dataType:"json", 
            success:function(data){ 
                $("#asd").hide(); 
                $('#country_table').html(data.country_table); 
                $('#pagination_link').html(data.pagination_link); 
            } 
        }); 
    }); 
});

3. 额外注意事项

• 确保jQuery版本≥1.7（支持on()方法），若版本过低建议升级。
• 确认模型的getfilterSearch方法正确使用offset参数构建SQL的LIMIT语句。
• 点击分页链接时的e.preventDefault()会阻止URL锚点变化，解决你遇到的URL异常问题。

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