CodeIgniter 3.1.8 实现分页始终保留前后导航链接的方法

问题根因 #

你当前的实现出现链接错配，核心原因有两点：

• CodeIgniter 3.1.8 原生分页库在边界场景（第一页、最后一页）下，会自动移除/禁用上一页/下一页的DOM节点，导致你之前靠CSS选择器定位节点的逻辑失效
• 你依赖li:first-child（上一页）、li.active + li（下一页）的选择规则，在DOM结构变化时会错误匹配到页码节点的链接，最终出现最后一页时“较新文章”按钮指向首页的问题

具体改造步骤 #

1. 优化分页库初始化配置 #

修改_initPagination方法，补充强制固定上下页节点的配置，直接关闭原生页码的DOM渲染，从根源上避免多余节点干扰选择：

private function _initPagination($path, $totalRows, $query_string_segment = 'page')
{
    $this->load->library('pagination');
    $config['base_url']             = base_url($path);
    $config['query_string_segment'] = $query_string_segment;
    $config['enable_query_strings'] = TRUE;
    $config['reuse_query_string']   = TRUE;
    $config['total_rows']           = $totalRows;
    $config['per_page']             = 12;

    // 新增固定上下页节点配置
    $config['display_pages'] = FALSE; // 不生成任何中间页码的<li>节点，只保留上下页
    $config['prev_tag_open'] = '<li class="page-item">';
    $config['prev_tag_close'] = '</li>';
    $config['next_tag_open'] = '<li class="page-item">';
    $config['next_tag_close'] = '</li>';
    $config['prev_link'] = 'newer'; // 链接内容无关，后续会用CSS重写
    $config['next_link'] = 'older';
    $config['attributes'] = ['class' => 'page-link'];

    if (!isset($_GET[$config['query_string_segment']]) || $_GET[$config['query_string_segment']] < 1) {
        $_GET[$config['query_string_segment']] = 1;
    }
    // 限制页码不超过最大页数，避免越界
    $total_pages = ceil($totalRows / $config['per_page']);
    if ($_GET[$config['query_string_segment']] > $total_pages) {
        $_GET[$config['query_string_segment']] = $total_pages;
    }

    $this->pagination->initialize($config);
    $current_page = $this->input->get($config['query_string_segment']);
    
    return array(
        'limit' => $config['per_page'],
        'offset' => ($current_page - 1) * $config['per_page'],
        'current_page' => $current_page,
        'total_pages' => $total_pages
    );
}

这个配置的效果是，分页生成的DOM结构永远保持固定顺序，不会随页码变化调整节点：

<ul class="pagination">
  <li class="page-item"> <!-- 永远是上一页（较新文章）的链接，指向page=当前页-1 -->
    <a href="xxx?page=当前页-1" class="page-link">newer</a>
  </li>
  <li class="page-item"> <!-- 永远是下一页（较旧文章）的链接，指向page=当前页+1 -->
    <a href="xxx?page=当前页+1" class="page-link">older</a>
  </li>
</ul>

彻底解决DOM结构变动导致的选择错配问题。

2. 修正边界页的链接展示规则 #

利用返回的current_page和total_pages值，在控制器里补边界判断：

• 当处于第1页时，隐藏“较新文章”按钮
• 当处于最后一页时，隐藏“较旧文章”按钮
  在把分页传到模板之前补处理逻辑：

// 在index和search方法里，拿到分页配置之后补
$pagination_html = $this->pagination->create_links();
// 第一页时移除上一页节点
if ($config['current_page'] == 1) {
    $pagination_html = preg_replace('/<li class="page-item">.*?newer<\/li>/', '', $pagination_html);
}
// 最后一页时移除下一页节点
if ($config['current_page'] == $config['total_pages']) {
    $pagination_html = preg_replace('/<li class="page-item">.*?older<\/li>/', '', $pagination_html);
}
// 把处理后的分页传到模板
$this->twig->addGlobal('pagination', $pagination_html);

3. 调整CSS选择器匹配固定DOM结构 #

因为现在分页的DOM结构是固定顺序的两个节点，把之前依赖li.active + li的选择规则替换为固定序号选择器即可：

• 第一个li对应上一页（较新文章）
• 第二个li对应下一页（较旧文章）
  替换后关键CSS规则示例：

/* 只保留两个节点的样式，不需要隐藏其他节点 */
.pagination li:first-child {
  display: inline-block;
  margin-right: auto;
}

.pagination li:nth-child(2) {
  display: inline-block;
  margin-left: auto;
}
/* 替换之前选择.active相邻节点的规则，匹配固定位置的下一页节点 */
.pagination li:nth-child(2) a::before {
  content: 'Older Posts';
  padding-right: 35px;
}

.pagination li:nth-child(2) a::after {
  content: '\1F812';
  right: 7px;
}

改造效果 #

• 不会再因为原生分页的节点移除逻辑导致链接错配
• 最后一页时，“较新文章”的链接会准确指向当前页-1的地址，不会错跳首页
• 分页DOM结构稳定，CSS样式不会因为页码变化失效

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