26

我正在尝试让 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）在标签中没有<a>元素，所以它没有在页面上正确显示（见这里：http: //i.imgur.com/OczPh.png）。<li>

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

这甚至可以修复吗？

4

12 回答 12

62

我已经使用了引导所需的 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>
于 2013-04-03T16:47:09.853 回答
7

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

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

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

于 2013-01-16T02:47:05.640 回答
6

您真正需要做的就是为当前和禁用的项目添加一个 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标签相同的样式。

于 2013-01-15T21:56:30.850 回答
2

我能得到的最好的：

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>

于 2014-12-20T17:03:19.343 回答
2

您需要在活动页面的“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>
于 2015-04-19T16:18:58.020 回答
1

如果你使用 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>
于 2014-08-08T19:36:23.983 回答
1

对于具有字体真棒和完整分页的引导程序 2，您可以使用它：

并为您的 css 或更少添加一些技巧

        <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;
}
于 2014-12-28T21:50:26.817 回答
1 
<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>
于 2017-02-24T09:05:07.850 回答
0 
#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;
}
于 2015-04-15T13:19:38.980 回答
0

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

<?php
echo $this->Paginator->numbers(array(
        'before' => '<ul class="pagination">',
        'separator' => '',
       'currentClass' => 'active',
        'currentTag' => 'a',
        'tag' => 'li',
        'after' => '</ul>'
    ));
?>
于 2014-05-29T13:40:20.113 回答
0 
    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>';    
}
于 2014-02-01T17:37:32.650 回答
0

这么多答案，但没有句柄省略号。您可以在下面找到完整版本，无需自定义 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>

于 2018-06-06T15:53:51.397 回答