Paginación con Codeigniter 4

Anterior Siguiente

Realizar una Paginación con Codeigniter 4 es muy sencillo, y lo vamos a ver en este tutorial a través de un sencillo ejemplo.

Ya sabemos que Codeigniter 4 está en fase de desarrollo desde hace aproximadamente 1 año, pues bien, la cosa parece que avanza poco a poco pero con un rumbo muy claro, ser un framework php puntero utilizando todos los beneficios de Php7 y que así nadie pueda decir que Codeigniter es para novatos.

Codeigniter 4 trae una buena cantidad de clases en su Core las cuales nos facilitan la vida a la hora de realizar las tareas más cotidianas (de eso tratan los frameworks), pues bien, una de esas clases que trae es la clase Pager, la cual nos permite crear una paginación de forma completa con un par de lineas de código.

Por si eso no fuera suficiente, también nos ofrece la posibilidad de cambiar las templates de la paginación de forma tremendamente sencilla, lo vamos a ver.

Si tienes dudas con el código que vamos a ver revisa los tutoriales de Codeigniter 4.

Obtener registros paginados con Codeigniter 4

Gracias a la clase CodeIgniter\Model podemos obtener registros paginados con una sola línea, pero primero, debemos definir un modelo, así que vamos a crear uno que se llame Product.

<?php

namespace App\Models;
use CodeIgniter\Model;

class Product extends Model
{
    protected $table = 'products';

    protected $allowedFields = ['name', 'description', 'price'];
}

<?php

namespace App\Models;

use CodeIgniter\Model;

class Product extends Model

{

protected $table = 'products';

protected $allowedFields = ['name', 'description', 'price'];

}

Con eso ya tenemos un modelo que hereda todo lo que nos ofrece la clase Model, y entre todo esto tenemos el método paginate, el cual nos ayuda a realizar la paginación con Codeigniter 4.

Ahora crea un controlador y añade el siguiente código para obtener los datos del modelo y pasarlos a una vista.

<?php
namespace App\Controllers;

use CodeIgniter\Controller;

class Products extends Controller
{
    public function index()
    {
        $model = new \App\Models\Products();
        $data = [
            'products'  => $model->paginate(1),
            'pager'     => $model->pager
        ];
        return view('products', $data);
    }
}

<?php

namespace App\Controllers;

use CodeIgniter\Controller;

class Products extends Controller

{

public function index()

{

$model = new \App\Models\Products();

$data = [

'products' => $model->paginate(1),

'pager' => $model->pager

];

return view('products', $data);

}

Ahora ya tenemos disponibles en una vista alojada en views/products.php las variables products y pager para poder mostrar nuestros productos paginados.

Paginación con Codeigniter 4

Llegados a este punto nos queda crear la template views/products.php, así que crea ese archivo, ábrelo y añade el siguiente código.

<html>
    <head>
        <title>Codeigniter 4 MVC</title>
    </head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.css">
    <body>
        <div class="container">
            <ul class="collection">
                <?php
                foreach($products as $product)
                {
                ?>
                    <li class="collection-item"><?php echo $product['name'] ?></li>
                <?php
                }
                ?>
            </ul>
            <?php echo $pager->links() ?>
        </div>
    </body>
</html>

<html>

<head>

<title>Codeigniter 4 MVC</title>

</head>

<body>

<?php

foreach($products as $product)

{

<?php

}

</ul>

<?php echo $pager->links() ?>

</div>

</body>

</html>

Simplemente recorremos los productos y con la variable $pager llamamos al método links(), el cual es el encargado de pintar los enlaces.

Cómo puedes ver hemos podido crear una paginación con Codeigniter 4 de forma muy sencilla, pero aún podemos mejorarlo.

Paginación con Codeigniter 4 utilizando templates personalizadas

Algo muy interesante es poder sobrescribir la template que pinta los enlaces, pues bien, para hacer eso simplemente abre el archivo application/Config/Pager.php y modifica el código por el siguiente.

<?php namespace Config;

use CodeIgniter\Config\BaseConfig;

class Pager extends BaseConfig
{
	/*
	|--------------------------------------------------------------------------
	| Templates
	|--------------------------------------------------------------------------
	|
	| Pagination links are rendered out using views to configure their
	| appearance. This array contains aliases and the view names to
	| use when rendering the links.
	|
	| Within each view, the Pager object will be available as $pager,
	| and the desired group as $pagerGroup;
	|
	*/
	public $templates = [
		//'default_full'   => 'CodeIgniter\Pager\Views\default_full',
        'default_full'   => 'App\Views\Pagers\materialize_full', // <----- añadimos nuestra template
		'default_simple' => 'CodeIgniter\Pager\Views\default_simple'
	];

	/*
	|--------------------------------------------------------------------------
	| Items Per Page
	|--------------------------------------------------------------------------
	|
	| The default number of results shown in a single page.
	|
	*/
	public $perPage = 20;
}

<?php namespace Config;

use CodeIgniter\Config\BaseConfig;

class Pager extends BaseConfig

{

|--------------------------------------------------------------------------

| Templates

|--------------------------------------------------------------------------

| Pagination links are rendered out using views to configure their

| appearance. This array contains aliases and the view names to

| use when rendering the links.

| Within each view, the Pager object will be available as $pager,

| and the desired group as $pagerGroup;

public $templates = [

//'default_full' => 'CodeIgniter\Pager\Views\default_full',

'default_full' => 'App\Views\Pagers\materialize_full', // <----- añadimos nuestra template

'default_simple' => 'CodeIgniter\Pager\Views\default_simple'

];

|--------------------------------------------------------------------------

| Items Per Page

|--------------------------------------------------------------------------

| The default number of results shown in a single page.

public $perPage = 20;

}

Con la propiedad templates podemos definir las templates que vayamos a utilizar, podemos definir default_full que es la que hemos utilizado y default_simple que es la más simple y por defecto sólo te muestra los enlaces anterior y siguiente.

Ahora que la hemos cambiado, crea el archivo Views\Pagers\materialize_full.php y añade el siguiente contenido, el cual se encargará de pintar la paginación cómo nosotros queramos.

<?php $pager->setSurroundCount(1) ?>

<nav aria-label="Page navigation">
    <ul class="pagination">
        <?php if ($pager->hasPrevious()) : ?>
            <li class="waves-effect">
                <a href="<?= $pager->getFirst() ?>" aria-label="Primero">
                    <span aria-hidden="true">Primero</span>
                </a>
            </li>
            <li>
                <a href="<?= $pager->getPrevious() ?>" aria-label="Anterior">
                    <span aria-hidden="true">«</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()) : ?>
            <li class="waves-effect">
                <a href="<?= $pager->getNext() ?>" aria-label="Previous">
                    <span aria-hidden="true">»</span>
                </a>
            </li>
            <li class="waves-effect">
                <a href="<?= $pager->getLast() ?>" aria-label="Last">
                    <span aria-hidden="true">Último</span>
                </a>
            </li>
        <?php endif ?>
    </ul>
</nav>

<?php $pager->setSurroundCount(1) ?>

<?php if ($pager->hasPrevious()) : ?>

<a href="<?= $pager->getFirst() ?>" aria-label="Primero">

<span aria-hidden="true">Primero</span>

</a>

</li>

<li>

<a href="<?= $pager->getPrevious() ?>" aria-label="Anterior">

</a>

</li>

<?php endif ?>

<?php foreach ($pager->links() as $link) : ?>

<?= $link['title'] ?>

</a>

</li>

<?php endforeach ?>

<?php if ($pager->hasNext()) : ?>

<a href="<?= $pager->getNext() ?>" aria-label="Previous">

</a>

</li>

<a href="<?= $pager->getLast() ?>" aria-label="Last">

<span aria-hidden="true">Último</span>

</a>

</li>

<?php endif ?>

</ul>

</nav>

No tenemos que hacer nada más, con eso nuestra paginación se mostrará tal como la hemos definido aquí, puedes ver que el código habla por si mismo, lo más interesante quizá está en la primera linea.

<?php $pager->setSurroundCount(1) ?>

1	<?php $pager->setSurroundCount(1) ?>

Con eso simplemente le decimos la cantidad de enlaces que queremos que aparezcan por delante y detrás del seleccionado, nada más.

Y eso es todo, espero que te haya parecido interesante, así de sencillo es montar una paginación con Codeigniter 4.