使用 CakePHP 分页助手的引导分页
Posted
技术标签:
【中文标题】使用 CakePHP 分页助手的引导分页【英文标题】：Bootstrap pagination with CakePHP pagination helper 【发布时间】：2012-12-30 01:12:16 【问题描述】：我正在尝试让 Cakephp 的分页助手与引导程序很好地配合使用。也就是说，我希望我的分页元素看起来像引导程序，但由 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）在 <li> 标记中没有 <a> 元素，所以它无法正确显示在页面上（参见此处：http://i.imgur.com/OczPh.png）。
我似乎在 Cookbook 上找不到任何提及可以解决此问题的任何内容。
这甚至可以解决吗？
【问题讨论】：
【参考方案1】：这么多答案，但没有句柄省略号。您可以在下面找到完整版本，无需自定义 CSS。
CakePHP v2、Bootstrap v3
<ul class="pagination">
<li><?php echo $this->Paginator->prev('Previous', array('escape' => false, 'tag' => 'li'), null, array('escape' => false, 'tag' => 'li', 'class' => 'disabled', 'disabledTag' => 'a')); ?></li>
<li><?php echo $this->Paginator->numbers(array('separator' => '', 'currentTag' => 'a', 'currentClass' => 'active', 'tag' => 'li', 'first' => 1, 'ellipsis' => '<li class="disabled"><a>...</a></li>')); ?></li>
<li><?php echo $this->Paginator->next('Next', array('escape' => false, 'tag' => 'li', 'currentClass' => 'disabled'), null, array('escape' => false, 'tag' => 'li', 'class' => 'disabled', 'disabledTag' => 'a')); ?></li>
</ul>
生成的代码：
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="pagination">
<li class="prev">
<a href="/users/page:8" rel="prev">Previous</a>
</li>
<li>
<a href="/users">1</a>
</li>
<li class="disabled">
<a>...</a>
</li>
<li>
<a href="/users/page:5">5</a>
</li>
<!-- more numbers here... -->
<li class="active">
<a>9</a>
</li>
<!-- more numbers here... -->
<li class="next">
<a href="/users/page:10" currentclass="disabled" rel="next">Next</a>
</li>
</ul>【讨论】：
【参考方案2】：<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>
【讨论】：
欢迎来到 SO。请注意，仅代码答案不符合 SO 的标准。见***.com/help/how-to-answer【参考方案3】：您需要在活动页面的“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=''>$1</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>
【讨论】：
【参考方案4】：#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;
【讨论】：
欢迎来到***。完全由代码组成的答案不如答案有用，包括对代码的一些解释，以及答案代码和 OP 代码之间的差异如何成为功能的关键。请考虑改进您的答案。【参考方案5】：对于字体真棒和完整分页的 bootstrap 2，您可以使用它：
并在您的 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;
【讨论】：
【参考方案6】：我能得到的最好的：
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：
button:hover > a
text-decoration: none;
结果：
.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>【讨论】：
【参考方案7】：如果你使用 Twitter Bootstrap 3.0 和 CakePHP 2.0 或 2.1，试试这个：
css （在您的 css 中，而不是在引导 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 视图 （要显示分页栏的位置）
<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>
【讨论】：
【参考方案8】：您无需添加任何 CSS 即可实现此目的：
<?php
echo $this->Paginator->numbers(array(
'before' => '<ul class="pagination">',
'separator' => '',
'currentClass' => 'active',
'currentTag' => 'a',
'tag' => 'li',
'after' => '</ul>'
));
?>
【讨论】：
【参考方案9】：我已经使用了 bootstrap 所需的 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>
【讨论】：
这是最好的答案，刚刚复制到我的页面并与 bootstrap css 完美配合，谢谢！ 完美，正是我所需要的 这很好用，但对于 Bootstrap 3，您需要将 class="pagination" 放在 UL 中，而不是放在 DIV 中 有什么方法可以防止省略号出现在侧面并使整个分页器偏离中心？ 如果您使用的是新版本的蛋糕，您需要设置省略号的样式（这 3 个点表示第 1 页和其余部分之间的分隔）。只需在 Paginator->numbers() 的数组中添加'ellipsis' => '<li class="disabled"><a>...</a></li>'【参考方案10】：
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>';
【讨论】：
【参考方案11】：这个其实在the "Creating page number links" section of the "Paginator" documentation里特别提到：
currentTag当前页码使用的标签，默认为空。 这允许您生成例如 Twitter Bootstrap 之类的链接 当前页码包含在额外的“a”或“span”标签中。
在您的情况下，您需要使用'currentTag' => 'a'。但是，请记住，此选项是在 CakePHP 2.3 中添加的，因此如果您使用的是旧版本，它将不起作用。
【讨论】：
【参考方案12】：您真正需要做的就是为当前和禁用的项目添加一个 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;
这使它具有与a 标签相同的样式。
【讨论】：
我不确定你的意思。我将我的currentClass 更改为active，但没有修复。你的意思是我应该直接修改bootstrap.css文件吗？
你不需要修改 bootstrap CSS，只需将它添加到你自己的 CSS 文件中。
@jeremyharris 虽然您的解决方案可以工作，但从 CakePHP 2.3 开始就不需要了。看我的回答。以上是关于使用 CakePHP 分页助手的引导分页的主要内容，如果未能解决你的问题，请参考以下文章