Bootstrap分页与CakePHP分页助手

Bootstrap分页与CakePHP分页助手

本文介绍了Bootstrap分页与CakePHP分页助手的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想尝试让CakePHP的分页辅助程式与bootstrap完美搭配。也就是说,我希望我的分页元素看起来像引导程序,但由CakePHP生成。



现在我已经在我的视图页面上:

 <?php 
echo $ this-> Paginator-> numbers(array(
'before'=> ;'< div class =pagination>< ul>',
'separator'=>',
'currentClass'=>'active',
' ';'=>'< / 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)没有< li> 标记中的c $ c>< a> 元素,它在页面上无法正确显示href =http://i.imgur.com/OczPh.png> http://i.imgur.com/OczPh.png )。



这个问题可以解决吗?

解决方案

你真正需要做的是为当前和禁用的项目添加一个CSS类来匹配。这是我用于我的项目(它基本上复制和粘贴从引导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;
}

/ code>标签。


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.

这篇关于Bootstrap分页与CakePHP分页助手的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-05 14:47