twitter-bootstrap 使用 CakePHP 分页助手进行 Bootstrap 分页
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14346182/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap pagination with CakePHP pagination helper
提问by James Dawson
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.
我正在尝试让 CakePHP 的分页助手与引导程序一起很好地发挥作用。也就是说，我希望我的分页元素看起来像引导程序但由 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).
问题是，因为活动页面（在本例中为 1）<a>在<li>标签中没有元素，所以它没有在页面上正确显示（请参阅此处：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?
这甚至可以修复吗？
采纳答案by jeremyharris
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).
你真正需要做的就是为当前和禁用的项目添加一个 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;
}
This gives it the same style as the atags.
这使它具有与a标签相同的样式。
回答by jruzafa
I've used the generic functions of cake php html needed to bootstrap.
我已经使用了 bootstrap 所需的 cake php html 的通用功能。
Gist code: https://gist.github.com/jruzafa/5302941
要点代码：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>
回答by Adam Taylor
This is actually specifically mentioned in the "Creating page number links" section of the "Paginator" documentation:
这实际上在“分页器”文档的“创建页码链接”部分中特别提到：
currentTagTag to use for current page number, defaults to null. This allows you to generate for example Twitter Bootstrap like links with the current page number wrapped in extra ‘a' or ‘span' tag.
currentTag用于当前页码的标签，默认为空。这允许您生成例如 Twitter Bootstrap 之类的链接，其中当前页码包含在额外的“a”或“span”标签中。
In your case, you'll want to use 'currentTag' => 'a'. However, keep in mind that this option was added in CakePHP 2.3, so if you're using a version older than that, it won't work.
在你的情况下，你会想要使用'currentTag' => 'a'. 但是，请记住，该选项是在 CakePHP 2.3 中添加的，因此如果您使用的版本早于该版本，它将无法使用。
回答by António Almeida
The best I could get:
我能得到的最好的：
PHP:
PHP：
<div class="paging btn-group page-buttons">
<?php
echo $this->Paginator->prev('< ' . __d('users', 'previous'), array('class' => 'btn btn-default prev', 'tag' => 'button'), null, array('class' => 'btn btn-default prev disabled', 'tag' => 'button'));
echo $this->Paginator->numbers(array('separator' => '', 'class' => 'btn btn-default', 'currentClass' => 'disabled', 'tag' => 'button'));
echo $this->Paginator->next(__d('users', 'next') . ' >', array('class' => 'btn btn-default next', 'tag' => 'button'), null, array('class' => 'btn btn-default next disabled', 'tag' => 'button'));
?>
</div>
CSS:
CSS：
button:hover > a {
text-decoration: none;
}
Result:
结果：
.paging {margin: 10px;}
button:hover > a {text-decoration: none;}<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://getbootstrap.com/dist/css/bootstrap-theme.min.css" rel="stylesheet"/>
<div class="paging btn-group page-buttons">
<button class="btn btn-default prev disabled">< anterior</button>
<button class="disabled btn btn-default">1</button>
<button class="btn btn-default"><a href="/cakephp/users/index/page:2">2</a></button>
<button class="btn btn-default next"><a href="/cakephp/users/index/page:2" rel="next">próximo ></a></button>
</div>回答by Younes NAJA
You need to add an anchor tag between "li" tags for active page, try this code :
您需要在活动页面的“li”标签之间添加一个锚标签，试试这个代码：
<nav>
<ul class="pagination">
<?php
echo $this->Paginator->prev('«', array('tag' => 'li', 'escape' => false), '<a href="#">«</a>', array('class' => 'prev disabled', 'tag' => 'li', 'escape' => false));
$numbers = $this->Paginator->numbers(array('separator' => '', 'tag' => 'li', 'currentLink' => true, 'currentClass' => 'active', 'currentTag' => 'a'));
$numbers = preg_replace("#\<li class=\"active\"\>([0-9]+)\<\/li\>#", "<li class=\"active\"><a href=''></a></li>",$numbers);
echo $numbers;
echo $this->Paginator->next('»', array('tag' => 'li', 'escape' => false), '<a href="#">»</a>', array('class' => 'prev disabled', 'tag' => 'li', 'escape' => false));
?>
</ul>
</nav>
回答by Ghasem Aladaghlou
<ul class="pagination">
<?php
echo $this->Paginator->prev('«', array('tag' => 'li', 'escape' => false), '<a href="#">«</a>', array('class' => 'prev disabled', 'tag' => 'li', 'escape' => false));
echo $this->Paginator->numbers(array('separator' => '', 'tag' => 'li', 'currentLink' => true, 'currentClass' => 'active', 'currentTag' => 'a'));
echo $this->Paginator->next('»', array('tag' => 'li', 'escape' => false), '<a href="#">»</a>', array('class' => 'prev disabled', 'tag' => 'li', 'escape' => false));
?>
</ul>
回答by Extrablind
For bootstrap 2 with font awesome and full pagination you can use that :
对于带有字体真棒和完整分页的引导程序 2，您可以使用它：
And add a little hack to your css or less
并在您的 css 或更少中添加一些 hack
<div class="pagination">
<ul>
<?php
## PAGINATION
echo $this->Paginator->first('<i class="fa fa-angle-double-left"></i>', ['escape' => false, 'tag' => 'li']);
//
//
echo $this->Paginator->prev('<span><i class="fa fa-angle-left"></i></span>', [
'class' => 'prev enabled',
'tag' => 'li',
'escape' => false,
], null, [
'class' => 'prev disabled',
'tag' => 'li',
'escape' => false,
]);
echo $this->Paginator->numbers(
[
'separator' => '',
'tag' => 'li',
'modulus' => 20,
'escape' => false,
'currentTag' => 'span',
'currentClass' => 'active',
]);
//
echo $this->Paginator->next('<span><i class="fa fa-angle-right"></i></span>', [
'class' => 'next enabled',
'tag' => 'li',
'escape' => false,
], null, [
'class' => 'next disabled',
'tag' => 'li',
'escape' => false,
]);
echo $this->Paginator->last('<i class="fa fa-angle-double-right"></i>', ['escape' => false, 'tag' => 'li']);
?>
</ul>
<div class="pull-right paginationCounter">
<?php
echo $this->Paginator->counter(
[
'class' => 'pull-right',
'format' => '{:page} / {:pages} pages, {:count} results',
]);
?>
</div>
</div>
/* Pagination bootstrap 2 add */
.pagination ul > li.active{
float: left;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #fff;
border-color: #ddd;
border-image: none;
border-style: solid;
border-width: 1px 1px 1px 0;
line-height: 20px;
padding: 4px 12px;
text-decoration: none;
cursor: default;
}
.pagination ul > li a[rel='first'],
.pagination ul > li a[rel='last'],
.pagination ul > li.prev a,
.pagination ul > li.next a {
height: 17px;
padding-top: 7px;
}
回答by Christian Strang
Try this if you are using Twitter Bootstrap 3.0 and CakePHP 2.0 or 2.1:
如果你使用 Twitter Bootstrap 3.0 和 CakePHP 2.0 或 2.1，试试这个：
css(somewhere in your css, not in the bootstrap css!)
css （在你的 css 中的某个地方，而不是在 bootstrap css 中！）
ul.pagination li.active {
position: relative;
float: left;
padding: 6px 12px;
margin-left: -1px;
line-height: 1.428571429;
text-decoration: none;
background-color: #fff;
border: 1px solid #ddd;
}
CakePHP View(where you want to display the pagination bar)
CakePHP 视图（要在其中显示分页栏的位置）
<ul class="pagination">
<?php
echo ($this->Paginator->hasPrev()) ? $this->Paginator->prev('?', array('tag' => 'li'), null, null) : '<li class="disabled"><a href="#">?</a></li>';
echo $this->Paginator->numbers(array('separator' => false, 'tag' => 'li'));
echo ($this->Paginator->hasNext()) ? $this->Paginator->next('?', array('tag' => 'li'), null, null) : '<li class="disabled"><a href="#">?</a></li>';
?>
</ul>
回答by rochdi123
#pagination > li.current {
z-index: 2;
color: #ffffff;
position: relative;
float: left;
padding: 6px 12px;
line-height: 1.428571429;
text-decoration: none;
border: 1px solid #dddddd;
margin-left: 0;
color: #999999;
z-index: 2;
color: #ffffff;
cursor: default;
background-color: #428BCA;
border-color: #428BCA;
}
#pagination > li.prev.disabled,#pagination > li.next.disabled {
position: relative;
float: left;
padding: 6px 12px;
line-height: 1.428571429;
text-decoration: none;
border: 1px solid #dddddd;
margin-left: 0;
color: #999999;
cursor: not-allowed;
background-color: #ffffff;
border-color: #dddddd;
}
.pagination > li > a{
color: #428BCA;
}
回答by Chris Pierce
if ($this->Paginator->hasPage(null, 2)) {
echo '<tfoot>';
echo '<tr>';
echo '<td colspan="7" class="text-right">';
echo ' <ul class="pagination pagination-right">';
echo $this->Paginator->first('<span class="glyphicon glyphicon-fast-backward"></span> First', array('escape' => false, 'tag' => 'li'), null, array('escape' => false, 'tag' => 'li', 'class' => 'disabled', 'disabledTag' => 'a'));
echo $this->Paginator->prev('<span class="glyphicon glyphicon-step-backward"></span> Prev', array('escape' => false, 'tag' => 'li'), null, array('escape' => false, 'tag' => 'li', 'class' => 'disabled', 'disabledTag' => 'a'));
echo $this->Paginator->numbers(array(
'currentClass' => 'active',
'currentTag' => 'a',
'tag' => 'li',
'separator' => '',
));
echo $this->Paginator->next('Next <span class="glyphicon glyphicon-step-forward"></span>', array('escape' => false, 'tag' => 'li', 'currentClass' => 'disabled'), null, array('escape' => false, 'tag' => 'li', 'class' => 'disabled', 'disabledTag' => 'a'));
echo $this->Paginator->last('Last <span class="glyphicon glyphicon-fast-forward"></span>', array('escape' => false, 'tag' => 'li', 'currentClass' => 'disabled'), null, array('escape' => false, 'tag' => 'li', 'class' => 'disabled', 'disabledTag' => 'a'));
echo ' </ul>';
echo '<p>'.$this->Paginator->counter(array('format' => 'Page {:page} of {:pages}, showing {:current} records out of {:count} total.')).'</p>';
echo '</td>';
echo '</tr>';
echo '</tfoot>';
}
