Fatal编程技术网
  • cakephp/
  • 使用CakePHP分页助手进行引导分页

使用CakePHP分页助手进行引导分页

cakephp twitter-bootstrap pagination

使用CakePHP分页助手进行引导分页,cakephp,twitter-bootstrap,pagination,Cakephp,Twitter Bootstrap,Pagination,我正试图让CakePHP的分页助手很好地使用引导。也就是说，我希望我的分页元素看起来像引导程序，但由CakePHP生成 目前，我在我的查看页面上有以下内容： <?php echo $this->Paginator->numbers(array( 'before' => '<div class="pagination"><ul>', 'separator' => '', 'currentClass' => 'act

我正试图让CakePHP的分页助手很好地使用引导。也就是说，我希望我的分页元素看起来像引导程序，但由CakePHP生成

目前，我在我的查看页面上有以下内容：

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

您真正需要做的就是为当前项和禁用项添加一个CSS类以进行匹配。这里有一个我用于我的项目（它基本上是从引导CSS文件复制和粘贴的）


这使其与
a
标记具有相同的样式。
这实际上在：


currentTag
用于当前页码的标记，默认为空。
这允许您生成类似Twitter引导的链接
将当前页码包装在额外的“a”或“span”标记中


在您的情况下，您需要使用
'currentTag'=>'a'
。但是，请记住，此选项是在CakePHP 2.3中添加的，因此如果您使用的是比该版本更早的版本，它将无法工作。
我使用了引导所需的cake php html的通用函数

要点代码：




    



if（$this->Paginator->hasPage（null，2））{
回声'；
回声'；
回声'；
echo'
    ；
echo$this->Paginator->first（'first'，array（'escape'=>false，'tag'=>li'）、null，array（'escape'=>false，'tag'=>li'，class'=>disabledTag'=>a'）；
echo$this->Paginator->prev（'prev'，array（'escape'=>false，'tag'=>li'）、null，array（'escape'=>false，'tag'=>li'，class'=>disabledTag'=>a'）；
echo$this->Paginator->number（数组）(
“currentClass”=>“活动”，
'currentTag'=>'a'，
'tag'=>'li'，
'分隔符'=>''，
));
echo$this->Paginator->next（'next'，array（'escape'=>false，'tag'=>'li'，'currentClass'=>'disabled'）、null，array（'escape'=>false，'tag'=>'li'，'class'=>'disabledTag'=>'a'）；
echo$this->Paginator->last（'last'，array（'escape'=>false，'tag'=>'li'，'currentClass'=>'disabled'）、null，array（'escape'=>false，'tag'=>'li'，'class'=>'disabledTag'=>'a'）；
回声“
”；
回显“”。$this->Paginator->counter（数组（'format'=>“Page{:Page}，共{:pages}，显示{:count}总数中的{:current}记录）。
”；
回声'；
回声'；
回声'；
}

您无需添加任何css即可实现：


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



如果您使用的是Twitter Bootstrap 3.0和CakePHP 2.0或2.1，请尝试以下方法：

css（在css中的某个地方，而不是在引导css中！）

CakePHP视图（您要在其中显示分页栏）


    



我能得到的最好的：

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>



button:hover > a {
    text-decoration: none;
}




结果：


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



button:hover > a {
    text-decoration: none;
}








.paging{margin:10px；}
按钮：悬停>a{文本装饰：无；}



先前的
1.

对于具有超棒字体和完全分页功能的bootstrap 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>



您需要在活动页面的“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>





    



    



答案太多了，但没有手柄省略号。下面您可以找到完整版本，无需定制CSS

CakePHP v2，引导程序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>



    

  • 

  • 我不知道你的意思。我将我的
    currentClass
    更改为
    active
    ，但它没有被修复。您的意思是我应该直接修改bootstrap.css文件吗？您不需要修改bootstrap css，只需将其添加到您自己的css文件中即可。@jeremyharris虽然您的解决方案可以工作，但从CakePHP 2.3开始就不必了。看看我的答案。这是最好的答案，只是复制到我的页面，并与引导css完美合作，谢谢！完美，这正是我所需要的。这工作非常完美，但对于Bootstrap 3，您需要将class=“pagination”放在UL中，而不是除数中。是否有某种方法可以防止省略号出现在侧面并使整个分页器偏离中心？如果您使用的是较新版本的cake，则需要设置省略号的样式（这三个点表示第1页和其他页之间的分隔）。只需在Paginator->numbers（）中的数组中添加
    'ellipsis'=>'
  • …
    • '
    ）欢迎使用StAccExcel。完全由代码组成的答案并不像答案那样有用，包括对代码的一些解释，以及答案代码和OP代码之间的差异是功能的关键。请考虑改进您的答案。欢迎这样做。请不要仅仅代码回答不符合SO的标准。

    button:hover > a {
    text-decoration: none;
}

    

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

    

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

    

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

    

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