CodeIgniter项目中点击返回按钮时Ajax分页筛选状态无法保留

嘿，这个问题我之前在做CodeIgniter项目时也碰到过！核心就是得把你的筛选状态「存」好，等从详情页返回时再「读」出来恢复。给你几个实用的解决方案，都是我亲测有效的：

这个思路是把所有筛选条件（搜索关键词、选中的checkbox、dropdown选项）都拼到URL的GET参数里。这样不管是分页跳转，还是从详情页点返回，URL里的参数都会保留，页面加载时自动读取这些参数就能恢复筛选状态，甚至还能把带筛选的URL分享给别人。

步骤1：前端Ajax请求带上筛选参数 #

在你的JS代码里，收集好所有筛选条件，转成查询字符串加到Ajax请求的URL里：

// 收集所有筛选值
const searchVal = $('#search').val();
const checkboxVals = $('input[name="filter[]"]:checked').map(function(){return $(this).val();}).get();
const dropdownVal = $('#dropdown').val();

// 构建合法的查询字符串（记得编码避免特殊字符问题）
const queryString = `search=${encodeURIComponent(searchVal)}&filter=${checkboxVals.join(',')}&dropdown=${dropdownVal}`;

// 发起Ajax请求，带上参数
$.ajax({
    url: '<?= site_url('your_controller/list') ?>?' + queryString,
    type: 'GET',
    success: function(data){
        $('#result-container').html(data);
    }
});

步骤2：控制器读取参数并传给分页类 #

在列表页的控制器方法里，先获取这些GET参数，然后把它们拼到分页的基础URL里，这样分页链接也会带着筛选参数：

public function list()
{
    // 获取筛选参数，没有的话用默认值
    $search = $this->input->get('search') ?? '';
    $filter = $this->input->get('filter') ?? '';
    $dropdown = $this->input->get('dropdown') ?? '1';

    // 构建数据库查询条件
    $this->db->like('title', $search);
    if (!empty($filter)) {
        $this->db->where_in('category', explode(',', $filter));
    }
    $this->db->where('status', $dropdown);

    // 初始化分页，把筛选参数加到分页链接后缀
    $config['base_url'] = site_url('your_controller/list') . 
        "?search=" . urlencode($search) . 
        "&filter=" . urlencode($filter) . 
        "&dropdown=" . urlencode($dropdown);
    $config['total_rows'] = $this->db->count_all_results('your_table', FALSE); // FALSE保留查询条件
    $config['per_page'] = 10;

    $this->pagination->initialize($config);

    // 获取分页数据
    $data['results'] = $this->db->get('your_table', $config['per_page'], $this->uri->segment(3))->result();
    $data['pagination'] = $this->pagination->create_links();

    // 把筛选参数传给视图，用于恢复表单状态
    $data['search'] = $search;
    $data['filter'] = !empty($filter) ? explode(',', $filter) : [];
    $data['dropdown'] = $dropdown;

    $this->load->view('list_view', $data);
}

步骤3：视图里恢复表单的选中状态 #

在列表视图中，把控制器传过来的参数赋值给表单元素，让页面加载时自动恢复之前的筛选状态：

<!-- 搜索框 -->
<input type="text" id="search" name="search" value="<?= set_value('search', $search) ?>">

<!-- Checkbox组 -->
<?php foreach ($categories as $cat): ?>
    <input type="checkbox" name="filter[]" value="<?= $cat->id ?>" 
        <?= in_array($cat->id, $filter) ? 'checked' : '' ?>>
    <label><?= $cat->name ?></label>
<?php endforeach; ?>

<!-- Dropdown菜单 -->
<select id="dropdown" name="dropdown">
    <option value="1" <?= $dropdown == '1' ? 'selected' : '' ?>>Active</option>
    <option value="0" <?= $dropdown == '0' ? 'selected' : '' ?>>Inactive</option>
</select>

这样处理后，浏览器的返回按钮会直接回到带筛选参数的列表页URL，控制器自动读取参数恢复筛选，完美解决问题！

如果不想把筛选参数显示在URL里，可以用Session来临时存储筛选条件。

步骤1：点击详情页前保存筛选状态到Session #

在详情链接的点击事件里，先通过Ajax把筛选条件存到Session，再跳转详情页：

$('.detail-link').click(function(e) {
    e.preventDefault();
    const detailUrl = $(this).attr('href');
    
    // 收集筛选条件
    const searchVal = $('#search').val();
    const checkboxVals = $('input[name="filter[]"]:checked').map(function(){return $(this).val();}).get();
    const dropdownVal = $('#dropdown').val();

    // 把筛选条件存到Session
    $.ajax({
        url: '<?= site_url('your_controller/save_filter') ?>',
        type: 'POST',
        data: {
            search: searchVal,
            filter: checkboxVals,
            dropdown: dropdownVal
        },
        success: function(){
            // 跳转详情页
            window.location.href = detailUrl;
        }
    });
});

步骤2：控制器添加保存筛选的方法 #

public function save_filter()
{
    $filter_data = [
        'search' => $this->input->post('search'),
        'filter' => $this->input->post('filter'),
        'dropdown' => $this->input->post('dropdown')
    ];
    $this->session->set_userdata('list_filter', $filter_data);
    echo 'success';
}

步骤3：列表页控制器读取Session恢复状态 #

在列表方法里，优先从Session读取筛选参数，没有的话用默认值：

public function list()
{
    // 从Session获取筛选数据
    $filter_data = $this->session->userdata('list_filter');
    if ($filter_data) {
        $search = $filter_data['search'];
        $filter = $filter_data['filter'];
        $dropdown = $filter_data['dropdown'];
    } else {
        // 默认状态
        $search = '';
        $filter = [];
        $dropdown = '1';
    }

    // 后续的查询、分页逻辑和方案一一致，记得把参数传给视图恢复表单
    // ...

    $data['search'] = $search;
    $data['filter'] = $filter;
    $data['dropdown'] = $dropdown;

    $this->load->view('list_view', $data);
}

注意点： #

• 可以在用户手动刷新列表页且无GET参数时，清除Session里的筛选数据，避免状态残留。
• 如果需要恢复分页位置，记得把当前页码也存到Session里。

这个方法不需要后端改动，纯前端通过History API维护状态。每次筛选或分页后，把状态加到浏览器历史记录，返回时触发状态变化恢复筛选：

// 每次筛选完成后，更新浏览器历史记录
const stateObj = {
    search: searchVal,
    filter: checkboxVals,
    dropdown: dropdownVal,
    page: currentPage // 当前页码
};
history.pushState(stateObj, "List Page", '<?= site_url('your_controller/list') ?>?' + queryString);

// 监听浏览器返回事件（popstate）
window.addEventListener('popstate', function(e) {
    if (e.state) {
        // 恢复表单状态
        $('#search').val(e.state.search);
        $('input[name="filter[]"]').prop('checked', false);
        e.state.filter.forEach(function(val){
            $(`input[name="filter[]"][value="${val}"]`).prop('checked', true);
        });
        $('#dropdown').val(e.state.dropdown);
        
        // 重新发起Ajax请求加载对应分页和筛选的数据
        loadData(e.state.page, e.state.search, e.state.filter, e.state.dropdown);
    }
});

这个方案适合纯前端驱动的场景，但需要处理好分页和状态的同步逻辑。

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