-
InsiteFX
Super Moderator
-
Posts: 6,514
Threads: 324
Joined: Oct 2014
Reputation:
239
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.
What did you Try? What did you Get? What did you Expect?
Joined CodeIgniter Community 2009. ( Skype: insitfx )
-
obstbude
Newbie
-
Posts: 2
Threads: 0
Joined: Aug 2020
Reputation:
0
This is really helpful. Thanks for that.
Thanks a million saved my day. Codeigniter Rocks!
(04-18-2023, 10:28 AM)remesses_thegreat Wrote: Thanks a million saved my day. Codeigniter Rocks!
So just ran into a small problem that i dont see mentioned in the comments. So i have a one page website with multiple Popup modals and a lot of paging needs to happen. So managed to get it right on the first tab, And it looks and works great. The moment i copy the same code and implement on the second tab there it behave abnormally. So i thought maybe its the variable so i changed them so they are not exactly the same. What is it that i am suppose to change if using one page to display multiple records on different tabs and modals
-
InsiteFX
Super Moderator
-
Posts: 6,514
Threads: 324
Joined: Oct 2014
Reputation:
239
(04-18-2023, 11:00 PM)InsiteFX Wrote: You need to use grouping.
CodeIgniter 4 User Guide - Library Reference Pagination - Paginating Multiple Results
I'm really sorry to bother you. Never done this and its going over my head. Not sure what I'm doing wrong. So i tried it with the first two groups it worked fine. The moment i added other group it only returns one page of each. Here is my code maybe I'm doing it wrong. I have a lot of data being rendered onto just one page. I know it maybe stupid but honestly dont know what i need to change
PHP Code: $data = [ 'pendingapproval' => $companiesmodel->where('status', 'pending')->paginate(5,'group1'), 'verifiedcompanies' => $companiesmodel->where('status', 'Approved')->paginate(5,'group2'), 'activepayments' => $companiesmodel->where('paymentstatus', 'active')->paginate(5,'group3'), 'inactivepayments' => $companiesmodel->where('paymentstatus', 'inactive')->paginate(10,'group4'), 'apicompanies' => $companiesmodel->where('role', 'apicompany')->paginate(10,'group5'),
'appusers' => $appusers->paginate(10,'group6'), 'contractors' => $dmodel->paginate(10,'group7'), 'users' => $cumodel->where('role', 'companyuser')->paginate(10,'group8'), 'pending' => $coldelmodel->where('cstatus', 'pending')->paginate(10,'group9'), 'completed' => $coldelmodel->where('cstatus', 'completed')->paginate(10,'group10'), 'requests' => $srmodel->where('sstatus', 'pending')->paginate(10,'group11'), 'currentPage' => $companiesmodel->pager->getCurrentPage('group1'), // The current page number 'totalPages' => $companiesmodel->pager->getPageCount('group1'), 'vcurrentPage' => $companiesmodel->pager->getCurrentPage('group2'), // The current page number 'vtotalPages' => $companiesmodel->pager->getPageCount('group2'), // The total page count
'activecurrentPage' => $companiesmodel->pager->getCurrentPage('group3'), // The current page number 'activetotalPages' => $companiesmodel->pager->getPageCount('group3'), // The total page count
'inactivecurrentPage' => $companiesmodel->pager->getCurrentPage('group4'), // The current page number 'inactivetotalPages' => $companiesmodel->pager->getPageCount('group4'), // The total page count
'apicurrentPage' => $companiesmodel->pager->getCurrentPage('group5'), // The current page number 'apitotalPages' => $companiesmodel->pager->getPageCount('group5'), // The total page count
'appcurrentPage' => $appusers->pager->getCurrentPage('group6'), // The current page number 'apptotalPages' => $appusers->pager->getPageCount('group6'), // The total page count
'concurrentPage' => $dmodel->pager->getCurrentPage('group7'), // The current page number 'contotalPages' => $dmodel->pager->getPageCount('group7'), // The total page count
'userscurrentPage' => $cumodel->pager->getCurrentPage('group8'), // The current page number 'userstotalPages' => $cumodel->pager->getPageCount('group8'), // The total page count
'pendcurrentPage' => $coldelmodel->pager->getCurrentPage('group9'), // The current page number 'pendtotalPages' => $coldelmodel->pager->getPageCount('group9'), // The total page count
'comcurrentPage' => $coldelmodel->pager->getCurrentPage('group10'), // The current page number 'comtotalPages' => $coldelmodel->pager->getPageCount('group10'), // The total page count
'reqcurrentPage' => $srmodel->pager->getCurrentPage('group11'), // The current page number 'reqtotalPages' => $srmodel->pager->getPageCount('group11'), // The total page count 'pager' => $companiesmodel->pager, 'apppager' => $appusers->pager, 'conpager' => $dmodel->pager, 'userpager' => $cumodel->pager, 'colpager' => $coldelmodel->pager, 'reqpager' => $srmodel->pager, ];
(04-19-2023, 02:50 AM)InsiteFX Wrote: You need unique group# you have multiple groups with the same group number. I named them group 1-11 without duplicating for each call to the database. The only place that has duplicates is the currentPage and totalPages as i thought they should use the associated group name same as the tutorial. I just changed curentPage to vcurrentPage or appcurrentPage.
|