用户
 找回密码
 入住 CI 中国社区
搜索
查看: 10600|回复: 17
收起左侧

[讨论/交流] CI 2.0 分页功能的完善 [css 已添加]

  [复制链接]
发表于 2011-6-21 14:01:21 | 显示全部楼层 |阅读模式
本帖最后由 幽蓝冰魄 于 2011-6-21 16:59 编辑

废话不说,直接进入正题。
CI 默认自带的分页类调用代码如下:
controller 部分
PHP复制代码
 
function index($num = '') {
        $this->load->library('pagination'); // 加载分页类
        $config['base_url'] = 'other/index/'; // 分页的基础 URL
        $config['total_rows'] = $this->M_other->count('front'); // 统计数量
        $config['per_page'] = 2; // 每页显示数量,为了能有更好的显示效果,我将该数值设置得较小
        $config['num_links'] = 3; // 当前连接前后显示页码个数
        $config['full_tag_open'] = '<div class="pagination">'; // 分页开始样式
        $config['full_tag_close'] = '</div>'; // 分页结束样式
        $config['first_link'] = '首页'; // 第一页显示
        $config['last_link'] = '末页'; // 最后一页显示
        $config['next_link'] = '下一页 >'; // 下一页显示
        $config['prev_link'] = '< 上一页'; // 上一页显示
        $config['cur_tag_open'] = ' <a class="current">'; // 当前页开始样式
        $config['cur_tag_close'] = '</a>'; // 当前页结束样式
        $this->pagination->initialize($config); // 配置分页
        $data['post'] = $this->M_other->get('front', $config['per_page'], $num); // 获取前分页数据
}
 
复制代码

view 部分
HTML复制代码
 
<?php echo $this->pagination->create_links(); ?>
 
复制代码

这样得到的结果如下:
snap_1.png
这样给读者的感觉就是并不能直接知道这个分页有多少条记录和多少页。现在我们稍微修改一下代码:
controller 部分
PHP复制代码
 
function index($num = '') {
        $this->load->library('pagination'); // 加载分页类
        $config['base_url'] = 'other/index/'; // 分页的基础 URL
        $config['total_rows'] = $this->M_other->count('front'); // 统计数量
        $config['per_page'] = 2; // 每页显示数量,为了能有更好的显示效果,我将该数值设置得较小
        $config['num_links'] = 3; // 当前连接前后显示页码个数
        //$config['full_tag_open'] = ''; // 分页开始样式
        //$config['full_tag_close'] = ''; // 分页结束样式
        $config['first_link'] = '首页'; // 第一页显示
        $config['last_link'] = '末页'; // 最后一页显示
        $config['next_link'] = '下一页 >'; // 下一页显示
        $config['prev_link'] = '< 上一页'; // 上一页显示
        $config['cur_tag_open'] = ' <a class="current">'; // 当前页开始样式
        $config['cur_tag_close'] = '</a>'; // 当前页结束样式
        $this->pagination->initialize($config); // 配置分页
        $data['post'] = $this->M_other->get('front', $config['per_page'], $num); // 获取前分页数据
        $data['page'] = array(
                'total' => $config['total_rows'],
                'num' => $config['per_page'],
                'page' => (int) (($config['total_rows'] % $config['per_page'] === 0) ? ($config['total_rows'] / $config['per_page']) : ($config['total_rows'] / $config['per_page'] + 1)),
                'current' => ($num + 1) . '~' . ($num + $data['post']->num_rows)
        );
}
 
复制代码

view 部分
HTML复制代码
 
<div class="pagination">
每页 <b><?php echo $page['num']; ?></b> 条 / 当前 <b><?php echo $page['current']; ?></b> 条 / 计 <b><?php echo $page['page']; ?></b> 页 / 共 <b><?php echo $page['total']; ?></b>
<?php echo $this->pagination->create_links(); ?>
</div>
 
复制代码

这样到的结果如下:
snap_2.png
如果对上面的输出效果修正一下样式和内容则会更加漂亮。
当然,还可以通过只传递一个参数或者修改 $config['full_tag_open'] 和 $config['full_tag_close'] 来实现。高人们甚至还可以扩展系统分页类来实现效果。
由于本人只是业余技术爱好者,这里就不再继续深入了。

发表于 2011-6-21 15:57:12 | 显示全部楼层
呵呵,你不发css,肯定有人要问你要的
发表于 2011-6-21 16:44:07 | 显示全部楼层
搭车做个广告~
没有写CSS,但还是挺灵活的~
http://www.codeigniter.org.cn/forums/thread-9319-1-1.html
 楼主| 发表于 2011-6-21 16:58:27 | 显示全部楼层
本帖最后由 幽蓝冰魄 于 2011-6-21 16:59 编辑

jeongee 真是太有远见了。现在给大家补上 css,其实 MeMo Blog 完善之后我会公布整个前台代码的,自然包括 css 啦。
CSS复制代码
 
/*************** Pagination  for MeMo Blog ***************/
#page .pagination {border-top:1px solid #dfdfdf; padding-top: 10px; text-align: left; margin-bottom: 10px; font-size: 10px;}
.pagination a ,.pagination a.number {margin: 0 5px 0 0; padding: 3px 6px; border: 1px solid #d0d0d0;}
.pagination a:hover,.pagination a.current {border-color: #000 !important; color: #000 !important;}
 
复制代码


发表于 2011-6-21 17:06:23 | 显示全部楼层
幽蓝冰魄 发表于 2011-6-21 16:58
jeongee 真是太有远见了。现在给大家补上 css,其实 MeMo Blog 完善之后我会公布整个前台代码的,自然包括  ...

呵呵,你要知道有些同学是比较懒的
 楼主| 发表于 2011-6-21 17:07:32 | 显示全部楼层
jeongee 发表于 2011-6-21 17:06
呵呵,你要知道有些同学是比较懒的

同感,同感。
发表于 2011-6-21 18:56:24 | 显示全部楼层
智齿一个,我是用{page}替换做的
发表于 2011-7-1 16:52:39 | 显示全部楼层
学习了
发表于 2011-7-5 23:34:45 | 显示全部楼层
我也来看看,留个念想!
发表于 2011-7-7 00:35:51 | 显示全部楼层
PHP复制代码
$config['base_url'] = 'other/index/'; // 分页的基础 URL
复制代码


这个位置稍稍休整一下,在伪静态下才不会出错;
如下:
PHP复制代码
$config['base_url'] = '/other/index/'; // 分页的基础 URL
复制代码

本版积分规则