Welcome Guest, Not a member yet? Register   Sign In
Tutorial for creating custom Bootstrap 4 pagers and page numbers
#1

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">
        &nbsp;&nbsp;&nbsp;
        <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 )
Reply
#2

Great tutorial! I do mostly the same thing in all my projects. Thanks for sharing this!
Reply
#3

This is really helpful. Thanks for that.
Reply
#4

Thanks a million saved my day. Codeigniter Rocks!
Reply
#5

(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
Reply
#6

You need to use grouping.

CodeIgniter 4 User Guide - Library Reference Pagination - Paginating Multiple Results
What did you Try? What did you Get? What did you Expect?

Joined CodeIgniter Community 2009.  ( Skype: insitfx )
Reply
#7

(04-18-2023, 11:00 PM)InsiteFX Wrote: You need to use grouping.

CodeIgniter 4 User Guide - Library Reference Pagination - Paginating Multiple Results

Thanks, Works as expected with the help of javascript to maintain active tab.
Reply
#8

(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,
            ]; 
Reply
#9

You need unique group# you have multiple groups with the same group number.
What did you Try? What did you Get? What did you Expect?

Joined CodeIgniter Community 2009.  ( Skype: insitfx )
Reply
#10

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




Theme © iAndrew 2016 - Forum software by © MyBB