如何在CodeIgniter框架中自定义分页链接样式并替换Pagination标签？

在CodeIgniter项目中，Pagination类默认生成的分页HTML往往带有固定的标签结构和类名，当我们需要对接特定的前端框架或设计稿时，直接套用样式会很别扭。通过合理的配置，我们可以在不改动框架核心文件的前提下，完全控制分页链接的标签与样式。

一、Pagination默认输出结构的问题

CodeIgniter的Pagination在调用create_links()方法后，默认会使用ul和li标签包裹每一个分页链接，并且自动添加类似class="pagination"的属性。这种结构在原生PHP模板里还算清晰，但遇到使用Flex布局或者纯div容器的设计时就显得冗余。

更严重的是，默认的“上一页”“下一页”文字被写死在配置里，标签闭合方式也不支持自定义。如果项目要求所有分页必须使用<nav>配合<a>且不允许列表项，就需要用到标签替换机制。理解默认结构有助于我们针对性地覆盖配置项。

二、通过配置数组替换分页标签

在控制器中初始化Pagination时，我们可以传入一个配置数组，其中的tag_open、tag_close用于定义包裹整个分页的容器标签，而num_tag_open与num_tag_close则控制每一个数字链接的外层标签。将默认的ul改为nav，把li改为span即可完成基础替换。

下面是一段典型的自定义配置代码，展示了如何把分页容器替换成div，数字链接替换成无列表样式的a标签：

$config['base_url'] = 'https://ipipp.com/index.php/article/index/';
$config['total_rows'] = 200;
$config['per_page'] = 10;

// 替换整体容器标签
$config['tag_open'] = '<div class="my-pager">';
$config['tag_close'] = '</div>';

// 替换普通数字链接外层标签
$config['num_tag_open'] = '<a class="page-num" href="#">';
$config['num_tag_close'] = '</a>';

// 替换当前页标签
$config['cur_tag_open'] = '<a class="page-current" href="#">';
$config['cur_tag_close'] = '</a>';

// 上一页下一页
$config['prev_link'] = '上一页';
$config['next_link'] = '下一页';
$config['prev_tag_open'] = '<span class="prev">';
$config['prev_tag_close'] = '</span>';
$config['next_tag_open'] = '<span class="next">';
$config['next_tag_close'] = '</span>';

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

以上代码执行后，分页HTML将不再出现ul和li，而是以div内嵌a与span的形式输出。这样做的好处是前端可以直接使用CSS选择器.my-pager .page-num来定义间距与颜色，不需要处理列表默认缩进。

需要注意的是，tag_open和tag_close必须成对出现，且内部不能包含未转义的双引号以外的特殊符号。如果项目使用了HTML压缩，标签替换后也能减少无意义的嵌套层级，提升渲染效率。

三、结合样式文件实现完全自定义

标签替换只是第一步，真正让分页符合设计稿还需要编写对应的CSS。由于我们已经将链接统一为a标签并赋予特定类名，可以在静态资源中集中管理样式，而不必依赖框架自带的视觉表现。

示例样式如下，通过将容器设为Flex布局，让分页项横向排列并添加悬停效果：

.my-pager {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin: 20px 0;
}
.my-pager a.page-num,
.my-pager a.page-current {
    padding: 6px 12px;
    border: 1px solid #ccc;
    text-decoration: none;
    color: #333;
    border-radius: 4px;
}
.my-pager a.page-current {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
}
.my-pager span.prev,
.my-pager span.next {
    padding: 6px 12px;
    color: #999;
}

这段CSS与前面的PHP标签配置形成互补，使得分页在视觉上完全独立于CodeIgniter的默认主题。如果后续要更换UI风格，只需要调整CSS，PHP端的标签结构可以保持不变，降低了维护成本。

另外，在大型项目中建议把Pagination的配置数组提取到配置文件里，通过$this->config->load('pagination')加载，这样多个控制器都能复用同一套标签替换规则，避免重复书写。

四、常见误区与注意事项

有些开发者在替换标签时，只改了tag_open却忘记设置tag_close，导致页面出现未闭合标签，浏览器自动补全后样式错乱。还有人试图用JavaScript去删除默认li标签，这种方式不仅增加请求负担，也不利于服务端渲染的SEO。

正确的做法始终是在PHP配置层完成标签替换。如果使用了URL重写，记得把base_url中的index.php去掉，并确保enable_query_strings配置与路由规则一致，否则分页链接可能指向错误地址。掌握这些细节后，CodeIgniter的分页就能既灵活又稳定地服务于各类业务场景。

CodeIgniterpagination标签替换修改时间：2026-08-06 19:33:34