+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: CodeIgniter 4 (https://forum.codeigniter.com/forumdisplay.php?fid=28)
+--- Forum: CodeIgniter 4 Addins (https://forum.codeigniter.com/forumdisplay.php?fid=34)
+--- Thread: Tutorial for creating custom Bootstrap 4 pagers and page numbers (/showthread.php?tid=77274)
Tutorial for creating custom Bootstrap 4 pagers and page numbers - InsiteFX - 08-10-2020
In this quick tutorial I will show you how to create two Bootstrap 4.5.2 Custom Pagers, I will also show you
how to create a Bootstrap Button to display the current page of total pages.
So lets get started.
NOTE: I will be using a dummy controller just to show you how we pass the data to the view.
1) Create a blank PHP file called view_data.php in the Views folder, this is just to pass the data to all views.
2) We need our two custom Bootstrap 4 pager templates. These will be placed in the Views folder under Pagers.
Views/Pagers/
bs_full.php
bs_simple.php
--------------
Code for the bs_full.php
PHP Code:
<?php
/**
* bs_full.php - - Bootstrap 4.5.2 Pager Template.
* @var \CodeIgniter\Pager\PagerRenderer $pager
*/
$pager->setSurroundCount(2);
?>
<nav aria-label="<?= lang('Pager.pageNavigation') ?>">
<ul class="pager pagination justify-content-center">
<?php if ($pager->hasPreviousPage()) : ?>
<li class="page-item">
<a class="page-link" href="<?= $pager->getFirst() ?>" aria-label="<?= lang('Pager.first') ?>">
<span aria-hidden="true"><?= lang('Pager.first') ?></span>
</a>
</li>
<li class="page-item">
<a class="page-link" href="<?= $pager->getPreviousPage() ?>" aria-label="<?= lang('Pager.previous') ?>">
<span aria-hidden="true"><?= lang('Pager.previous') ?></span>
</a>
</li>
<?php endif ?>
<?php foreach ($pager->links() as $link) : ?>
<li <?= $link['active'] ? 'class="page-item active"' : '' ?>>
<a class="page-link" href="<?= $link['uri'] ?>">
<?= $link['title'] ?>
</a>
</li>
<?php endforeach ?>
<?php if ($pager->hasNextPage()) : ?>
<li class="page-item">
<a class="page-link" href="<?= $pager->getNextPage() ?>" aria-label="<?= lang('Pager.next') ?>">
<span aria-hidden="true"><?= lang('Pager.next') ?></span>
</a>
</li>
<li class="page-item">
<a class="page-link" href="<?= $pager->getLast() ?>" aria-label="<?= lang('Pager.last') ?>">
<span aria-hidden="true"><?= lang('Pager.last') ?></span>
</a>
</li>
<?php endif ?>
</ul>
</nav>
Code for the bs_simple.php
PHP Code:
<?php
/**
* bs_simple - Bootstrap 4.5.2 Pager Template.
* @var \CodeIgniter\Pager\PagerRenderer $pager
*/
$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="<?= lang('Pager.previous') ?>">
<span aria-hidden="true"><?= lang('Pager.newer') ?></span>
</a>
</li>
<li <?= $pager->hasNext() ? 'class="page-item active"' : 'class="page-item disabled"' ?>>
<a class="page-link" href="<?= $pager->getnext() ?? '#' ?>" aria-label="<?= lang('Pager.next') ?>">
<span aria-hidden="true"><?= lang('Pager.older') ?></span>
</a>
</li>
</ul>
</nav>
3) We need to edit the app/Config/Pager.php file to add our two custom pagers.
PHP Code:
public $templates = [
'default_full' => 'CodeIgniter\Pager\Views\default_full',
'default_simple' => 'CodeIgniter\Pager\Views\default_simple',
'default_head' => 'CodeIgniter\Pager\Views\default_head',
'bs_full' => 'Pagers\bs_full',
'bs_simple' => 'Pagers\bs_simple',
];
4) Here in the controller we are getting the pager current page (getCurrentPage) and total pages (getPageCount). We are passing these to a pagination view.
PHP Code:
/**
* posts ()
* -------------------------------------------------------------------
*
*
*/
public function posts()
{
$pager = Services::pager();
$posts = new PostModel($this->request);
$categories = new CategoryModel();
$data = [
'posts' => $posts->getLivePosts()->paginate(3, 'group1'),
'pager' => $posts->pager,
'currentPage' => $posts->pager->getCurrentPage('group1'), // The current page number
'totalPages' => $posts->pager->getPageCount('group1'), // The total page count
'categories' => $categories->getTopCategories(),
'title' => 'Blog Home',
'pageHeading' => 'Blog',
'subHeading' => 'Home',
'typography' => Services::typography(),
];
// Make all variables global to all views. (Empty PHP File)
echo view('Insitefx\Blog\Views\view_data', $data);
echo view('Insitefx\Blog\Views\posts\index');
}
5) The pagination view file.
The top part is the type of pager we want to use and the bottom part displays the Page 1 of 4 total pages.
PHP Code:
<!-- Pagination -->
<div class="pagination justify-content-center mb-4">
<?php if ( ! empty($pager)) :
//echo $pager->simpleLinks('group1', 'bs_simple');
echo $pager->links('group1', 'bs_full');
endif ?>
<!-- Bootstrap 4.5.2 code to show page 1 of 4 total pages using a button. -->
<div class="btn-group pagination justify-content-center mb-4" role="group" aria-label="pager counts">
<button type="button" class="btn btn-light"><?= 'Page '.$currentPage.' of '.$totalPages; ?></button>
</div>
</div>
You can use this pagination view in layouts etc;
That's all there is to it so good luck and I hope you find these useful.
RE: Tutorial for creating custom Bootstrap 4 pagers and page numbers - MGatner - 08-10-2020
Great tutorial! I do mostly the same thing in all my projects. Thanks for sharing this!
RE: Tutorial for creating custom Bootstrap 4 pagers and page numbers - obstbude - 08-10-2020
This is really helpful. Thanks for that.