+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: CodeIgniter 4 (https://forum.codeigniter.com/forumdisplay.php?fid=28)
+--- Forum: CodeIgniter 4 Support (https://forum.codeigniter.com/forumdisplay.php?fid=30)
+--- Thread: Add style to pagination (/showthread.php?tid=88315)
Add style to pagination - pippuccio76 - 08-21-2023
HI , i use pagination on my project :
Code:
<div class="d-flex justify-content-end ">
<?= $pager->links() ?>
</div> How can i add custom style to pagination ?
RE: Add style to pagination - ozornick - 08-21-2023
https://codeigniter4.github.io/userguide/libraries/pagination.html?highlight=pager#customizing-the-links
RE: Add style to pagination - InsiteFX - 08-21-2023
If you want custom Pagination styles then you would need to add them to the Pagination Templates.
Create your css classes and add them to the templates.
RE: Add style to pagination - pippuccio76 - 08-23-2023
(08-21-2023, 08:54 PM)InsiteFX Wrote: If you want custom Pagination styles then you would need to add them to the Pagination Templates.
Create your css classes and add them to the templates.
If i want use bootstrap pagination what do i do ?
RE: Add style to pagination - ozornick - 08-23-2023
Pls, read docs. if you don't understand it in the manual, I do not know how to explain it in more detail.
Writing code for you is too good...
RE: Add style to pagination - pippuccio76 - 08-23-2023
(08-23-2023, 07:49 AM)ozornick Wrote: Pls, read docs. if you don't understand it in the manual, I do not know how to explain it in more detail.
Writing code for you is too good...
hi , i found this example:
https://forum.codeigniter.com/thread-77274.html
This is my code :
bootstrap_full.php:
Code:
<div class="d-flex justify-content-end ">
<?php $pager->setSurroundCount(1) ?>
<nav aria-label="Page navigation">
<ul class="pagination">
<?php if ($pager->hasPrevious()) : ?>
<li class="page-item">
<a href="<?= $pager->getFirst() ?>" class="page-link" aria-label="Prima">
<span aria-hidden="true">Prima</span>
</a>
</li>
<li class="page-item">
<a href="<?= $pager->getPrevious() ?>" class="page-link" aria-label="Precedente">
<span aria-hidden="true">Precedente</span>
</a>
</li>
<?php endif ?>
<?php foreach ($pager->links() as $link): ?>
<li <?= $link['active'] ? 'class="active"' : '' ?>>
<a href="<?= $link['uri'] ?>">
<?= $link['title'] ?>
</a>
</li>
<?php endforeach ?>
<?php if ($pager->hasNext()) : ?>
p
<li class="page-item">
<a href="<?= $pager->getNext() ?>" class="page-link" aria-label="Successiva">
<span aria-hidden="true">Successiva</span>
</a>
</li>
<li class="page-item">
<a href="<?= $pager->getLast() ?>" class="page-link" aria-label="Ultima">
<span aria-hidden="true">Ultima</span>
</a>
</li>
<?php endif ?>
</ul>
</nav>
</div> bootstrap_simple.php:
Code:
<?php
/**
* bs_simple - Bootstrap 5.2 Pager Template.
*/
$pager->setSurroundCount(0);
?>
<nav aria-label="Page Results">
<ul class="pager pagination justify-content-center">
<li <?= $pager->hasPrevious() ? 'class="page-item active"' : 'class="page-item disabled"' ?>>
<a class="page-link" href="<?= $pager->getPrevious() ?? '#' ?>" aria-label="Precedente">
Nuovi
</a>
</li>
<li <?= $pager->hasNext() ? 'class="page-item active"' : 'class="page-item disabled"' ?>>
<a class="page-link" href="<?= $pager->getnext() ?? '#' ?>" aria-label="Successiva">
Vecchi
</a>
</li>
</ul>
</nav>Controller:
Code:
$lista=$viaggi_model->where('id_users',session()->get('user_id'))
->orderBy('data_viaggio','desc');
$data = [
'titolo_lista' => 'Viaggi Inseriti Da Te',
'lista' => $lista->paginate(1, 'group1'),
'pager' => $viaggi_model->pager,
'currentPage' => $viaggi_model->pager->getCurrentPage('group1'), // The current page number
'totalPages' => $viaggi_model->pager->getPageCount('group1'), // The total page count
];
echo view('empty_view',$data);
echo view('user/viaggi/lista_viaggi');in view:
Code:
<div class="d-flex justify-content-end ">
<?= $pager->links('group1','bootstrap_full') ?>
</div> But this is the result:
https://imgur.com/ONHrzNY.png
If i use bootstrap_simple it seem ok :
https://imgur.com/aRS5veH.png
It seem on bootstrap full that there aren't $pager->hasNext() and $pager->hasPrevious()
What's wrong ?
RE: Add style to pagination - InsiteFX - 08-24-2023
Did you save the Pagination templates in the correct folder?
App/Views/Pager/templates.php
Add the Pager paths to App/Config/Pager.php
RE: Add style to pagination - pippuccio76 - 08-24-2023
Yes , i see the style but not the previous and next button...
It seem on bootstrap full that there aren't $pager->hasNext() and $pager->hasPrevious()