Paginación en CodeIgniter

La paginación es una de las características más demandadas en cualquier aplicación web. Generalmente, la paginación viene muy bien en aquellos casos donde extraemos datos de una base de datos y los listamos. Sobre todo se vuelve primordial cuando listamos una gran cantidad de datos. Ayuda a cargar la información mucho más rápido y hace que tu aplicación sea mucho más usable.

Si tu aplicación web está desarrollada con CodeIgniter, debo decirte que es muy sencillo integrar una paginación. CodeIgniter cuenta con una clase llamada Pagination para crear enlaces de paginación sobre un conjunto de resultados. En este tutorial, te mostraremos paso a paso cómo implementar una paginación utilizando la librería CodeIgniter.

Para nuestro ejemplo, extraeremos unos registros de la base de datos y los listaremos junto a los enlaces de paginación.

• Extrae la información de la base de datos
• Crea los enlaces de paginación mediante la librería Pagination
• Listamos los registros junto a los enlaces

Crear tabla de la base de datos

La tabla posts contiene los campos básicos para almacenar nuestros registros.

CREATE TABLE `posts` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `title` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
 `content` text COLLATE utf8_unicode_ci NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Controlador (Posts.php)

El controlador Posts contiene dos métodos, __construct() e index().

__construct()

• Carga la librería Pagination
• Carga el modelo Post
• Define el limite de la paginación (por página)

index()

• Obtiene el total de filas utilizando el método getRows() del modelo Post
• Define la configuración del array $config de la clase Pagination
• Inicializa la clase Pagination con tus opciones seleccionadas mediante el metodo initialize()
• Define el offset de la URL de la página
• Obtiene registros de la tabla posts utilizando el método getRows() del modelo Post
• Pasa la información de los posts para ver y cargar el listado
• Ciertas opciones de configuración las hemos definido según el estilo de los enlaces de paginación de Bootstrap. Puedes omitir esta configuración (estilo) si deseas utilizar el estilo básico.

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Posts extends CI_Controller {
    
    function __construct() {
        parent::__construct();
        //load pagination library
        $this->load->library('pagination');
        //load post model
        $this->load->model('post');
        //per page limit
        $this->perPage = 4;
    }
    
    public function index(){
        $data = array();
        
        //get rows count
        $conditions['returnType'] = 'count';
        $totalRec = $this->post->getRows($conditions);
        
        //pagination config
        $config['base_url']    = base_url().'posts/index/';
        $config['uri_segment'] = 3;
        $config['total_rows']  = $totalRec;
        $config['per_page']    = $this->perPage;
        
        //styling
        $config['num_tag_open'] = '<li>';
        $config['num_tag_close'] = '</li>';
        $config['cur_tag_open'] = '<li class="active"><a href="javascript:void(0);">';
        $config['cur_tag_close'] = '</a></li>';
        $config['next_link'] = 'Next';
        $config['prev_link'] = 'Prev';
        $config['next_tag_open'] = '<li class="pg-next">';
        $config['next_tag_close'] = '</li>';
        $config['prev_tag_open'] = '<li class="pg-prev">';
        $config['prev_tag_close'] = '</li>';
        $config['first_tag_open'] = '<li>';
        $config['first_tag_close'] = '</li>';
        $config['last_tag_open'] = '<li>';
        $config['last_tag_close'] = '</li>';
        
        //initialize pagination library
        $this->pagination->initialize($config);
        
        //define offset
        $page = $this->uri->segment(3);
        $offset = !$page?0:$page;
        
        //get rows
        $conditions['returnType'] = '';
        $conditions['start'] = $offset;
        $conditions['limit'] = $this->perPage;
        $data['posts'] = $this->post->getRows($conditions);
        
        //load the list page view
        $this->load->view('posts/index', $data);
    }
    
}

Modelo (Post.php)

Utilizamos el modelo Post para extraer los registros de la base de datos. La función getRows() extrae los registros de la tabla post basándose en la restricción de límite que tenemos en el array $params y devuelve la información en forma de array.

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Post extends CI_Model{
    /*
     * Get posts
     */
    function getRows($params = array()){
        $this->db->select('*');
        $this->db->from('posts');
        if(array_key_exists("id",$params)){
            $this->db->where('id',$params['id']);
            $query = $this->db->get();
            $result = $query->row_array();
        }else{
            //set start and limit
            if(array_key_exists("start",$params) && array_key_exists("limit",$params)){
                $this->db->limit($params['limit'],$params['start']);
            }elseif(!array_key_exists("start",$params) && array_key_exists("limit",$params)){
                $this->db->limit($params['limit']);
            }
            
            if(array_key_exists("returnType",$params) && $params['returnType'] == 'count'){
                $result = $this->db->count_all_results();
            }else{
                $query = $this->db->get();
                $result = ($query->num_rows() > 0)?$query->result_array():FALSE;
            }
        }

        //return fetched data
        return $result;
    }
}

 

Vista (posts/)

La carpeta de las vistas (posts/) contiene el fichero index.php que lista la información paginada.

index.php

Utilizaremos la librería bootstrap para personalizar el listado de posts y los enlaces de paginación. Por lo tanto, lo primero que tenemos que hacer es incluir la librería Bootstrap. Si quieres utilizar el estilo básico, no hace falta que la incluyas.

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

En el fichero index.php, se mostrará la información con los enlaces de paginación. La función create_links() de la clase Pagination generará los enlaces de paginación.

<div class="panel panel-default ">
    <div class="panel-heading">Posts </div>
    <div class="panel-body">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th width="5%">ID</th>
                    <th width="30%">Title</th>
                    <th width="65%">Content</th>
                </tr>
            </thead>
            <tbody id="userData">
                <?php if(!empty($posts)): foreach($posts as $post): ?>
                <tr>
                    <td><?php echo '#'.$post['id']; ?></td>
                    <td><?php echo $post['title']; ?></td>
                    <td><?php echo (strlen($post['content'])>150)?substr($post['content'],0,150).'...':$post['content']; ?></td>
                </tr>
                <?php endforeach; else: ?>
                <tr><td colspan="3">Post(s) not found......</td></tr>
                <?php endif; ?>
            </tbody>
        </table>
    </div>
</div>
<!-- render pagination links -->
<ul class="pagination pull-right">
    <?php echo $this->pagination->create_links(); ?>
</ul>