Welcome Guest, Not a member yet? Register   Sign In
Add style to pagination
#1

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 ?
Reply
#2

https://codeigniter4.github.io/userguide...-the-links
Simple CI 4 project for beginners codeigniter-expenses ( topic )
Reply
#3

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.
What did you Try? What did you Get? What did you Expect?

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

(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 ?
Reply
#5

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...
Simple CI 4 project for beginners codeigniter-expenses ( topic )
Reply
#6

(This post was last modified: 08-23-2023, 08:55 AM by pippuccio76.)

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

Did you save the Pagination templates in the correct folder?
App/Views/Pager/templates.php

Add the Pager paths to App/Config/Pager.php
What did you Try? What did you Get? What did you Expect?

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

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




Theme © iAndrew 2016 - Forum software by © MyBB