使用 CakePHP 分页助手的引导分页

Question

我正在尝试让 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 上找不到任何提及可以解决此问题的任何内容。

这甚至可以解决吗？

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

Answer 2

<ul class="pagination">
<?php
  echo $this->Paginator->prev('&laquo;', array('tag' => 'li', 'escape' => false), '<a href="#">&laquo;</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('&raquo;', array('tag' => 'li', 'escape' => false), '<a href="#">&raquo;</a>', array('class' => 'prev disabled', 'tag' => 'li', 'escape' => false));
?>
</ul>

Answer 3

您需要在活动页面的“li”标签之间添加一个锚标签，试试这个代码：

<nav>
    <ul class="pagination">
    <?php
    echo $this->Paginator->prev('&laquo;', array('tag' => 'li', 'escape' => false), '<a href="#">&laquo;</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('&raquo;', array('tag' => 'li', 'escape' => false), '<a href="#">&raquo;</a>', array('class' => 'prev disabled', 'tag' => 'li', 'escape' => false));
    ?>
    </ul>
</nav>

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

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

Answer 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">&lt; 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 &gt;</a></button>
</div>

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

Answer 8

您无需添加任何 CSS 即可实现此目的：

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

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

Answer 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>';    
}

Answer 11

这个其实在the "Creating page number links" section of the "Paginator" documentation里特别提到：

currentTag 当前页码使用的标签，默认为空。 这允许您生成例如 Twitter Bootstrap 之类的链接 当前页码包含在额外的“a”或“span”标签中。

在您的情况下，您需要使用'currentTag' => 'a'。但是，请记住，此选项是在 CakePHP 2.3 中添加的，因此如果您使用的是旧版本，它将不起作用。

Answer 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 标签相同的样式。