Tutorial: Ajax pagination Codeigniter // Paginación con Ajax en CodeIgniter

Hey Hola, como les va a todos, antes que nada vamos a ver el resultado final, o almenos lo que esperamos obtener al final de este articulo.



Como podemos apreciar, los nuevos resultados son anexados de forma asíncrona usando ajax. pretty cool x). Bueno a primera vista solo podríamos decir eso, pero si somos mas cuidadosos podemos ver una pequeña animación la cual nos indica que la consulta para los nuevos registros esta siendo procesada, ademas, el enlace de More Results es des habilitado para prevenir el caso que un usuario impaciente pueda realizar nuevamente click en el enlace si aun haberse completado totalmente la consulta anterior, nuevamente, pretty cool x). y por ultimo, cuando ya no quedan mas registros por ser retornados desde la base de datos, notificamos al usuario que no hay mas registros para mostrar.

Para lograr lo anteriormente explicado vamos a utilizar: Libreria Javascript JQuery para realizar las llamadas ajax a la base de datos. como gestor de base de datos... bueno eso es indiferente, pero como yo uso XAMPP vamos a trabajar con MySql y PhpMyAdmin. y para manejar las vistas y el acceso a la base de datos (osea el MVC) el Framework Codeigniter. creo que no se me olvida nada... bueno, y un poco de CSS.



Bueno. que es lo primero que vamos a codificar. pues en si, la lógica de las consultas, y como estamos usando el Framework Codeigniter, nos referimos al Modelo. entonces, sin perder mas tiempo, procedamos a crear un nuevo archivo en la carpeta application/models llamado (en mi caso) UserModel.php
El Modelo por el momento simplemente contendrá un método el cual recibirá dos parámetros, El máximo numero de registros retornados($limit) y el $offset, que vendría a ser como el numero desde el cual la consulta retornara registros de la base de datos. bueno, ustedes entenderán a que me quiero referir, y si no es así, cuando ejecutemos el código nos vamos a enterar :). so (8) dont worry, be happy.(8).

<?php

 // @author McCubo <-- ese soy yo xD
 // @copyright 2011
 // @license GPL V2.
class UserModel extends CI_Model {

    public function __construct() {
        parent::__construct();
    }

    // @return $limit cantidad de registros a partir de $offset
    public function getUserList($limit, $offset=0) {
        $this->db->select('id, first_name, last_name, nickname, registration_date');
        $this->db->order_by('first_name', 'asc');
        return $this->db->get('user', $limit, $offset);
    } // getUserList End

    // @return integer del total de registros en la tabla
    public function getTotalUserCount() {
        $numRows = $this->db->count_all_results('user');
        return $numRows;
    }// getTotalUserCount End

}//UserModel End

?>//FILE END

Bastante sencillo no?. indicamos que campos necesitamos retornar con la consulta (ya que no quiero mostrar la password, tipo de privilegios, edad y otros campos que no son relevantes). los ordenamos por nombre ascendente y retornamos los valores encontrados por la consulta.

Luego la otra función es aun mas sencilla, simplemente retornamos cuantos registros existen en la tabla (es importante conocer cuantos registros tiene la tabla a la hora de configurar la paginación) Ahora, ya teniendo los métodos en el modelo, guardemos, y dejemos en segundo plano ese archivo para proceder con... no se, déjenme pensarlo, no se si el controlador o la vista. si, vamos a empezar con el controlador. Entonces procedemos a crear un nuevo archivo php llamado (en mi caso) UserController.php en la carpeta application/controllers. justo ahora vamos a crear el método index:

<?php
 // @author McCubo <-- otra vez yo...
 // @copyright 2011
 // @license GPL V2.
class UserController extends CI_Controller {
    private $limit = 1;

    public function __construct() {
        parent::__construct();
        $this->load->model('UserModel');
        $this->load->library(array('form_validation', 'table', 'session', 'encrypt'));
        $this->load->helper(array('security', 'form'));
    } // End Construct

    public function index() {
        $data['userList'] = $this->UserModel->getUserList($this->limit);
        $data['limit'] = $this->limit;
        $data['totalCount'] = $this->UserModel->getTotalUserCount();
        $this->load->view('user/userView', $data);
    } // End Index

    public function user_ajax_pag($offset) {
       // Empty. not implemented yet
    }
}// End Controller
?> // End File

En el Constructor, lo normal, la llamada al constructor de la clase padre, cargamos el modelo, librerias y helpers que vamos a necesitar en todo el controlador.

Mientras tanto en el index, llamamos al método que nos devuelve la lista de usuarios, si el $offset es enviado como parámetro a la función, entonces este es 0 (Cero.) ya que necesitamos regresar desde el primer registro de la tabla, hasta un numero de $limit. Luego cargamos una nueva vista (que aun no hemos creado) y le pasamos un arreglo el cual contiene dos posiciones.

Y Creamos una función user_ajax_pag (vacia por el momento), la cual es la que vamos a llamar desde la vista. dicha funcion nos retornara de forma asincrona los registros de las consultas.

Bueno dejemos este otro archivo tambien en segundo plano para crear uno nuevo llamado userView.php (en el directorio application/views/user) en el cual vamos a desarrollar la vista, osea la paginación, como podemos ver en el gif de arriba, dicha tabla tiene dos imagenes (que suponen eliminar y editar). pues esas columnas por el momento las vamos a olvidar paracentrar nuestra atención en la cuestión de la paginación.
La vista inicial:

Como podemos suponer, userList será el div contenedor de la tabla. y la etiquita script que esta vacia, en ella se ejecutara la llamada al método que nos retornará los nuevos registros (que es el método vacio del controlador user_ajax_pag). Bueno antes que nada, vamos iniciar con una pequeña condicional, si no existen registros en la tabla, mostramos el mensaje correspondiente en lugar de la tabla:

        
  <div id="userList">
      <?php if ($totalCount == 0) : ?>
           <h3>No Records Found</h3>
      <?php else: ?>
           // Generamos la tabla
      <?php endif; ?>
  </div>

Entonces, vamos a proceder a seguir editando la vista, en especifico a generar la tabla

    <body>
        <div id="userList">
            <?php if ($totalCount == 0) : ?>
                <h3>No user to display</h3>
            <?php else : ?>
                // Generamos la tabla
                <?php $this->table->set_heading('User Id', 'First Name', 'Last Name', 'NickName', 'Registration Date'); ?>
                <?php $template = array('table_open' => '<table border="1" cellpadding="1" cellspacing="0" class="stripeTable" style="width:500px;"'); ?>
                <?php $this->table->set_template($template); ?>
                <?php foreach ($userList->result() as $user) : ?>
                    <?php $this->table->add_row($user->id, $user->first_name, $user->last_name, $user->nickname, $user->registration_date); ?>
                <?php endforeach; ?>
                <?php echo $this->table->generate(); ?>
                <div id="div_more" class="div_more_pag"><a href="#">More Results</a></div>                
            <?php endif; ?>
        </div>
    </body>

Entonces si nos vamos a nuestro navegador y escribimos la url para nuestro controlador. si tenemos uno o mas registros en la tabla de la base de datos, entonces obtendremos algo como esto:

o si No tenemos registros:

Bueno, Llegamos a este punto, guardamos todos los cambios en este archivo y nos regresamos al controlador, y vamos a implementar el método user_ajax_pag.

    public function user_ajax_pag($offset) {
        // Lista con los Nuevos registros
        $userList = $this->UserModel->getUserList($this->limit, $offset);
        $data['userList'] = $userList;
        // Vista que simplemente nos retorna una tabla en formato HTML con los nuevos registros de la consulta
        $newTable = $this->load->view('user/ajax/userList_pagination', $data, true);
        $returnedData = array('newtable' => $newTable);
        // Codificamos a formato json (que es lo que vamos a esperar en la vista)
        $json_encode = json_encode($returnedData);
        // para que se note un poco mejor la animacion. deberia de ser removido una vez puesto en produccion
        sleep(1);
        echo $json_encode;
    }

Ahora vamos a ver la vista userList_pagination.php, la cual se almacena en: application/views/user/ajax

<?php
    foreach ($userList->result() as $user) {
        $this->table->add_row($user->id, $user->first_name, $user->last_name, $user->nickname, $user->registration_date);
    }
    echo $this->table->generate();
?>

Eso seria todo por parte del Controlador, entonces guardamos y nos regresamos a la vista.
Agregamos código entre las etiquetas de <script> que dejamos anteriormente sin implementar, y dicho código nos quedara parecido a lo siguiente:

           $(document).ready(function() {
                // variable enviada desde el controlador
                var totalCount = "<?php echo $totalCount; ?>";
                // variable enviada desde el controlador
                var limit = "<?php echo $limit; ?>";
                var controller =  "<?php echo site_url("userController/user_ajax_pag/"); ?>";
                limit = parseInt(limit);
                var counter = limit;
                $("#div_more a").click(function() {
                    var methodUrl = controller+"/"+counter;                                        
                    $.ajax({
                        type: "POST", // Indicamos que método se utilizará para la petición
                        url: methodUrl, // Método a ejecutarse
                        dataType: "json", // Tipo de respuesta esperada
                        beforeSend: function() {                            
                            $("#div_more").toggleClass("div_more_pag loadingAjaxClass");
                        },
                        success: function(data) {
                            // Si ningun error es arrojado obtenemos el HTML que contiene la nueva tabla, osea todos las etiquetas <tr>
                            var newRecords = $("tbody", data.newtable).html();
                            // Obtenemos la tabla y despues de la ultima fila agregamos N numero de filas devueltas por la consulta
                            $("table tr:last").after(newRecords);
                            // Creamos el estilo tipo Zebra para la tabla
                            createTableStyle();
                            // Aumentamos el counter, que lo podemos ver como el offset de la proxima consulta
                            counter += limit;
                        },
                        complete: function() {
                            $("#div_more").toggleClass("div_more_pag loadingAjaxClass");
                            if (counter >= totalCount) {
                                $("#div_more a")
                                    .text("No More Results to show...") // Cambiamos el texto del enlace
                                    .css("pointer-events", "none") // deshabilitamos el enlace
                                    .css("color", "#CCC"); // Cambiamos color del enlace
                            }
                        }
                    });
                    return false;
                });  // End link More Result Click event
           }); // End Jquery document.ready

Agregamos la referencia a la hoja de estilo en el header

<link rel="stylesheet" href="<?php echo base_url("css/main.css"); ?>" >

Y dicha Hoja de estilo es la siguiente:

.div_more_pag, .loadingAjaxClass{
    text-align: center;
    margin-top: 10px;
    padding-top: 7px;
    height: 28px;
    width: 500px;
    background: #E0F2F7;
    border: 1px solid #000;
}

.div_more_pag a, .loadingAjaxClass a {
    text-decoration: none;
}

.div_more_pag a{
    color: #000;
}

.loadingAjaxClass a {
    color: #CCC;
    pointer-events: none;
    cursor: default;
}

.div_more_pag a:hover {
    color: #610B0B;
}

.loadingAjaxClass {
    background: #fff;
    background-image: url("images/loading.gif");
    background-repeat: no-repeat;
    background-position: right;
}

Bueno, espero no se me olvide nada y si les gusta comenten, si no les gusta compartan x).
Ojala les funcione, cualquier duda o comentario pueden hacerlo escribiendo en este post o a mi cuenta personal de google (gmail) y vamos a tratar de solucionar o aclarar cualquier cuestión del tema

Suscribanse al blog o háganse seguidores demi cuenta de twitter para enterarse de los nuevos post que, ojala el tiempo y Dios lo permitan,  estaré publicando :D
Saludos y Cuídense.