使用CakePHP分页助手实现Bootstrap分页。

Question

我正在尝试让CakePHP的分页助手与Bootstrap良好地协作。也就是说，我希望我的分页元素看起来像Bootstrap的，但是由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）在

标签中没有元素，所以它在页面上显示不正确（请参见此处：http://i.imgur.com/OczPh.png）。

我似乎找不到Cookbook上提到任何可以解决这个问题的内容。

这个问题能修复吗？

- James Dawson

Answer 1

我已经使用了Cake PHP HTML的通用函数，这些函数需要引导。

Gist代码：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>

- jruzafa

---

这是最佳答案，我把它复制到我的页面并与Bootstrap CSS一起使用，非常完美！谢谢！ - dav

在Bootstrap 3中，要使其正常工作，您需要将class="pagination"放在 UL 标签上，而不是 DIV 标签上。 - Joseph

有没有什么方法可以防止省略号出现在边缘并使整个分页器偏离中心？ - user984976

如果您正在使用更新版本的Cake框架，您需要为省略号（表示页面1和其余页面之间的分隔符的三个点）设置样式。只需在Paginator->numbers()函数中的数组中添加 'ellipsis' => '<li class="disabled"><a>...</a></li>' 即可。 - Mauro Zadunaisky

我已经尝试过了。它可以工作，但当前页面索引显示在分页数字之外，为什么？我正在使用cakephp 2.3和bootstrap 3.0。 - user3270303

"disabledTag" 在 CakePHP 2.3 中被添加。 - Christian Strang

Answer 2

这实际上在“Paginator”文档的“创建页面编号链接”部分中有特别提到：

currentTag标签用于当前页面编号，默认为null。 这允许您生成类似Twitter Bootstrap的链接，其中当前页面编号包含在额外的“a”或“span”标记中。

在您的情况下，您将需要使用'currentTag' => 'a'。但是，请记住，此选项是在CakePHP 2.3中添加的，因此如果您使用的版本早于此，则无法正常工作。

- Adam Taylor

Answer 3

你只需要添加一个CSS类来匹配当前和禁用的项目即可。这是我在我的项目中使用的一个类（基本上是从Bootstrap 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标签相同的样式。

- jeremyharris

---

我不确定你的意思。我将我的 currentClass 改为 active，但问题没有解决。你是说我应该直接修改 bootstrap.css 文件吗？ - James Dawson

你不需要修改Bootstrap CSS，只需将此内容添加到您自己的CSS文件中即可。 - jeremyharris

@jeremyharris 虽然你的解决方案可以工作，但在CakePHP 2.3中已经不再需要了。请看我的回答。 - Adam Taylor

Answer 4

The best I could get:

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>

- António Almeida

Answer 5

你需要在“li”标签之间添加一个锚点标签来激活页面，尝试使用以下代码：

你需要在“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>

- Younes NAJA

Answer 6

如果你想在Bootstrap 2中使用字体图标和完整的分页，可以使用以下代码：

并且需要为你的CSS或less添加一个小的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;
}

- Extrablind

Answer 7

如果你正在使用Twitter Bootstrap 3.0和CakePHP 2.0或2.1，可以尝试以下方法：

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视图（您希望显示分页栏的位置）

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

- Christian Strang

Answer 8

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

- Aladaghlou

---

欢迎来到SO。请注意，仅包含代码的答案不符合SO的标准。请参阅http://stackoverflow.com/help/how-to-answer。 - Uwe Allner

Answer 9

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

- Rochdy

---

欢迎来到Stack Overflow。仅包含代码的答案并不像包括代码解释的答案那样有用，而且答案代码与问题提出者（OP）的代码之间的差异对功能至关重要。请考虑改进您的回答。 - Politank-Z

Answer 10

有很多答案，但没有一个处理省略号。下面您可以找到完整版本，无需自定义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>

- Rafał Myszyński