CODEWITHSUNDEEP
twitter-bootstrapcakephppaginationcakephp-3.0
Ataboy Josef
Ataboy Josef

Reputation: 2101

Ellipsis in CakePHP bootstrap pagination shows outside the box

The CakePHP3 pagination helper is not properly rendering with the list. I need to show the pager like :

|First|1|2|...|12|13|Last|

On the third page:

|First|1|2|3|...|12|13|Last|

On the seventh page:

|First|1|2|...|6|7|8|...|12|13|Last|

By default, I got the proper bootstrap pagination like:

|First|1|2|3|4|5|6|7|8|9|10|11|12|13|Last|

from this code:

<?php
echo $this->Paginator->first(__('First'), 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->last(__('Lastssss'), array('tag' => 'li','currentClass' => 'disabled'), null, array('tag' => 'li','class' => 'disabled','disabledTag' => 'a'));
?>

After a little research, I got some extra options like setting 'modulus' and changing 'first' and 'last' like 'first' => 2 and 'last' => 2, and the code looks like:

echo $this->Paginator->numbers(array('modulus' => 8, 'first' => 2,'last' => 2, 'separator' => '','currentTag' => 'a', 'currentClass' => 'active','tag' => 'li'));

But this shows the ellipsis(...) outside like:

|1|2|3|4|5|6|7|8|9|12|13|Last|...

and the paginator is not showing the page numbers properly.

I need to get a pagination like the one I showed above or a pagination something like the Google Search pagination.

Please help. I am not that experienced with CakePHP. Thank you.

Upvotes: 0

Views: 983

Answers (2)

Brijesh Patel Shivam
Brijesh Patel Shivam

Reputation: 1

<?php echo $this->Paginator->numbers(array('separator'=>'','currentTag'=>'a', 'currentClass'=>'active','tag'=>'li','first'=>1,'ellipsis'=>'<li class="ellipsis"><span>...</span></li>')); ?>

Upvotes: 0

user1418909
user1418909

Reputation:

Try to change the markup of ellipsis with templates, so it is compatible with bootstrap

$this->Paginator->templates([
    'ellipsis' => '<li class="ellipsis"><span>...</span></li>',
    // Default looks like this
    //'ellipsis' => '<li class="ellipsis">...</li>',
]);

then use this to generate pagination links

<ul class="pagination">
    <?= $this->Paginator->first(__('First'));?>
    <?= $this->Paginator->numbers([
        'modulus' => 2,
        'first' => 2,
        'last' => 2
    ]);?>
    <?= $this->Paginator->last(__('Last'));?>
</ul>

Code above changed the template dynamically, but you can also define and load your own reusable templates: PaginatorHelper Templates

Upvotes: 1

Related Questions