web-dev-qa-db-fra.com

Pagination Bootstrap avec l'assistant de pagination CakePHP

J'essaie de faire en sorte que l'assistant de pagination de CakePHP joue bien avec bootstrap. C'est-à-dire que je veux que mes éléments de pagination ressemblent à ceux de bootstrap mais générés par CakePHP.

Pour le moment, j'ai ceci sur ma page de vue:

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

Qui produit le balisage suivant:

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

Le problème est que, parce que la page active (1 dans ce cas) n'a pas d'élément <a> dans la balise <li>, elle ne s'affiche pas correctement sur la page (voir ici: http://i.imgur.com/OczPh .png ).

Je n'arrive pas à trouver quoi que ce soit dans le livre de recettes qui mentionne quoi que ce soit qui pourrait régler ce problème.

Cela peut-il même être corrigé?

cakephptwitter-bootstrappagination
25
James Dawson

Tout ce que vous devez faire, c'est ajouter une classe CSS pour que les éléments actuels et désactivés correspondent. Voici celui que j'utilise pour mon projet (il est essentiellement copié et collé à partir du fichier CSS d'amorçage).

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

Cela lui donne le même style que les balises a.

6
jeremyharris

J'ai utilisé les fonctions génériques de cake php html nécessaires pour démarrer.

Code 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>
60
jruzafa

Ceci est en fait spécifiquement mentionné dans la section "Création de liens de numéro de page" de la documentation "Paginator" :

currentTag Balise à utiliser pour le numéro de page actuel. La valeur par défaut est null . Cela vous permet de générer par exemple Twitter Bootstrap comme des liens avec le numéro de page actuel entouré d’une balise supplémentaire ‘a’ ou ‘span’.

Dans votre cas, vous voudrez utiliser 'currentTag' => 'a'. Cependant, gardez à l'esprit que cette option a été ajoutée dans CakePHP 2.3, donc si vous utilisez une version plus ancienne, cela ne fonctionnera pas.

7
Adam Taylor

Vous devez ajouter une balise d'ancrage entre les balises "li" pour la page active, essayez ce code:

<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>
2
Younes NAJA

Le meilleur que j'ai pu obtenir:

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

Résultat:

Paginator

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

2
Toni Almeida
<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>
1
Ghasem Aladaghlou

Pour bootstrap 2 avec une police géniale et une pagination complète, vous pouvez utiliser ceci: 

Et ajoutez un petit bidouillage à votre css ou moins 

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

Essayez ceci si vous utilisez Twitter Bootstrap 3.0 et CakePHP 2.0 ou 2.1:

css (quelque part dans votre css, pas dans le css bootstrap!)

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

Vue CakePHP (où vous voulez afficher la barre de pagination)

<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>
1
Christian Strang

Tant de réponses, mais pas gérer Ellipsis. Vous trouverez ci-dessous la version complète, aucun CSS personnalisé n’est nécessaire.

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>

Le code résultant:

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

0
Rafał Nowak

vous pouvez y arriver sans aucun css à ajouter:

<?php
echo $this->Paginator->numbers(array(
        'before' => '<ul class="pagination">',
        'separator' => '',
       'currentClass' => 'active',
        'currentTag' => 'a',
        'tag' => 'li',
        'after' => '</ul>'
    ));
?>
0
user1655410
    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>';    
}
0
Chris Pierce
#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;
}
0
rochdi123