Bootstrap分页与CakePHP分页助手 [英] Bootstrap pagination with CakePHP pagination helper

问题描述

我想尝试让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分页助手的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！