使用 CakePHP 分页助手进行 Bootstrap 分页 [英] Bootstrap pagination with CakePHP pagination helper

问题描述

我正在尝试让 CakePHP 的分页助手与引导程序很好地配合使用.也就是说，我希望我的分页元素看起来像引导程序的但由 CakePHP 生成.

目前我在我的查看页面上看到了这个:

Paginator->numbers(array('之前' =>'<div class="分页"><ul>','分隔符' =>'','当前类' =>'积极的'，'标签' =>'丽','之后' =>'</ul></div>'));?>

产生以下标记:

<ul><li class="active">1</li><li><a href="/test/posts/page:2">2</a></li><li><a href="/test/posts/page:3">3</a></li>

问题是，因为活动页面(在本例中为 1)在

标签中没有 元素，它是未在页面上正确显示(请参阅此处:http://i.imgur.com/OczPh.png).

我似乎在食谱上找不到任何提到可以解决此问题的任何内容.

这甚至可以修复吗?

解决方案

您真正需要做的就是为当前和禁用的项目添加一个 CSS 类来匹配.这是我用于我的项目的一个(它基本上是从引导 CSS 文件中复制和粘贴的).

.pagination .current,.分页 .disabled {向左飘浮;填充:0 14px；颜色:#999；光标:默认；行高:34px；文字装饰:无；边框:1px 实心#DDD；边框左宽度:0；}

这使它具有与 a 标签相同的样式.

I'm trying to get CakePHP's pagination helper to play nicely with bootstrap. That is, I want my pagination elements to look like bootstrap's but generated by CakePHP.

At the moment I've got this on my view page:

<?php
echo $this->Paginator->numbers(array(
    'before' => '<div class="pagination"><ul>',
    'separator' => '',
    'currentClass' => 'active',
    'tag' => 'li',
    'after' => '</ul></div>'
));
?>

Which produces the following markup:

<div class="pagination">
    <ul>
        <li class="active">1</li>
        <li><a href="/test/posts/page:2">2</a></li>
        <li><a href="/test/posts/page:3">3</a></li>
    </ul>
</div>

The problem is, because the active page (1 in this case) doesn't have an <a> element in the <li> tag, it's not displaying correctly on the page (see here: http://i.imgur.com/OczPh.png).

I can't seem to find anything on the Cookbook that mentions anything that would fix this.

Can this even be fixed?

解决方案

All you really need to do is add a CSS class for the current and disabled items to match. Here's one I use for my project (it's basically copied and pasted from the bootstrap CSS file).

.pagination .current,
.pagination .disabled {
    float: left;
    padding: 0 14px;

    color: #999;
    cursor: default;
    line-height: 34px;
    text-decoration: none;

    border: 1px solid #DDD;
    border-left-width: 0;
}

This gives it the same style as the a tags.

这篇关于使用 CakePHP 分页助手进行 Bootstrap 分页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！