使用CakePHP分页助手进行Bootstrap分页

Question

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

目前我在我的浏览页面上有这个:

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

产生以下标记:

<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>

问题是,因为活动页面(在这种情况下为1)<a>在<li>标签中没有元素,所以它在页面上没有正确显示(参见http://i.imgur.com/OczPh.png).

我似乎无法在Cookbook上找到任何可以解决这个问题的东西.

这甚至可以修复吗？

Answer 1

我已经使用了boot php所需的cake php html的泛型函数.

要点代码:https://gist.github.com/jruzafa/5302941

<div class="pagination pagination-large">
    <ul class="pagination">
            <?php
                echo $this->Paginator->prev(__('prev'), array('tag' => 'li'), null, array('tag' => 'li','class' => 'disabled','disabledTag' => 'a'));
                echo $this->Paginator->numbers(array('separator' => '','currentTag' => 'a', 'currentClass' => 'active','tag' => 'li','first' => 1));
                echo $this->Paginator->next(__('next'), array('tag' => 'li','currentClass' => 'disabled'), null, array('tag' => 'li','class' => 'disabled','disabledTag' => 'a'));
            ?>
        </ul>
    </div>

Answer 2

这实际上在"Paginator"文档的"创建页码链接"部分中特别提到:

currentTag标记用于当前页码,默认为null.这允许您生成例如Twitter Bootstrap,其中包含包含在额外"a"或"span"标记中的当前页码的链接.

在你的情况下,你会想要使用'currentTag' => 'a'.但是,请记住,此选项已添加到CakePHP 2.3中,因此如果您使用的是旧版本,则无法使用.

Answer 3

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

.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;
}

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