Breaking

Post Top Ad

Your Ad Spot

domingo, 10 de marzo de 2019

Paginación de Ajax en el Framework de CodeIgniter

CodeIgniter tiene la biblioteca de paginación por defecto. Pero muchas veces somos necesarios para implementar la paginación basada en ajax en CodeIgniter. Porque la paginación ajax proporciona una mejor experiencia de usuario. Hoy vamos a discutir cómo crear la paginación ajax en el marco de CodeIgniter.
Modificaremos la biblioteca de paginación de CodeIgniter para integrar la paginación ajax en la aplicación CodeIgniter. Además, esta biblioteca de paginación de Ajax modificada le ofrece muchas opciones de personalización, a continuación se detallan algunas opciones.
  • Muestra la imagen de carga mientras se cargan los datos.
  • Agregue una función personalizada a los enlaces de paginación.
  • Establecer un selector para cargar los datos de paginación.
  • y muchos más
Para una mejor comprensión, vamos a construir un script de ejemplo. En el código de ejemplo, los datos se buscarán en la tabla de la base de datos y se mostrarán en la página de visualización con enlaces de paginación. Una vez que se haga clic en el enlace de paginación, se buscarán más datos de la base de datos y se mostrarán en lugar de los datos mostrados anteriormente. Además, una imagen del cargador aparecerá en el momento de la carga de datos.
Antes de comenzar, eche un vistazo a la estructura de carpetas y archivos del script de ejemplo.
codeigniter-ajax-pagination-tutorial-files-structure-codexworld
Este tutorial se divide en paso a paso y puede crear los archivos uno por uno. Sin embargo, el paquete de código fuente contiene todo el script junto con la carpeta correspondiente.

Creación de tablas de base de datos

Crear una tabla ( posts) en la base de datos ( codeigniter_db). El siguiente SQL creará una tabla de publicaciones en la base de datos con algunos campos básicos.
CREATE  TABLE ` mensajes ` (
     `id`  int ( 11 ) NOT NULL AUTO_INCREMENT,
     ` title`  varchar ( 255 ) compilar utf8_unicode_ci NOT NULL ,
     `contenido en materia  texto INTERCALAR utf8_unicode_ci NOT NULL ,
     ` created` datetime NOT NULL ,
     `modified` datetime NO NULL ,
     `status`  tinyint ( 1 ) NO NULL POR DEFECTO '1' COMENTARIO '1 = Activo, 0 = Inactivo',
     CLAVE PRIMARIA ( `id` )
) MOTOR = InnoDB DEFAULT CHARSET = utf8 COLLATE = utf8_unicode_ci;

Biblioteca de paginación

La biblioteca de paginación ayuda a generar enlaces de paginación y código jQuery y Ajax. Esta biblioteca hace que la paginación ajax sea simple para ti. Solo necesita configurar las opciones de configuración y llamar a la create_links()función. Copiamos la biblioteca de paginación del sistema CodeIgniter, cambiamos el nombre de la clase a Ajax_pagination, modificamos y agregamos código para extender la biblioteca de paginación con la funcionalidad de paginación de Ajax. Cree un archivo llamado Ajax_pagination.php, copie y pegue el siguiente código e inserte este archivo en la application/librariescarpeta.
<? php   if (! defined ( 'BASEPATH' )) exit ( 'No se permite el acceso directo al script' ); / ** 
 * Clase de  paginación 
 * 
* @package CodeIgniter 
 * @link http://codeigniter.com/user_guide/libraries/pagination.html 
 *  
 * Modified by CodexWorld.com 
 * @Ajax se ha agregado la funcionalidad de paginación con esta biblioteca. 
 * @ Le ayudará a integrar la paginación Ajax con la carga de imágenes en la aplicación CodeIgniter. 
 * @TutorialLink http://www.codexworld.com/ajax-pagination-in-codeigniter-framework/ 
 * / class  Ajax_pagination {
 
    var  $ base_url         ''// La página que estamos enlazando a 
    var  $ total_rows       '' // Número total de elementos (resultados de la base de datos) 
    var  $ per_page         10 // Número máximo de elementos que desea que se muestren por página 
    var  $ num_links        =   2 // Número de enlaces de "dígitos" para mostrar antes / después de la página actualmente vista 
    var  $ cur_page         =   0 // La página actual que se está viendo 
    var  $ first_link       'First' ; 
    var  $ next_link        '& # 187;'; 
    var  $ prev_link        '& # 171;' ; 
    var  $ last_link        'Last' ; 
    var  $ uri_segment      3 ; 
    var  $ full_tag_open    '<div class = "pagination">' ; 
    var  $ full_tag_close   '</div>' ; 
    var  $ first_tag_open   '' ; 
    var  $ first_tag_close  '& nbsp;' ; 
    var  $ last_tag_open    '& nbsp;' ;
$ last_tag_close   '' ; 
    var  $ cur_tag_open     '& nbsp; <b>' ; 
    var  $ cur_tag_close    '</b>' ; 
    var  $ next_tag_open    '& nbsp;' ; 
    var  $ next_tag_close   '& nbsp;' ; 
    var  $ prev_tag_open    '& nbsp;' ; 
    var  $ prev_tag_close   '' ; 
    var  $ num_tag_open     '& nbsp;' ;
; 
    var  $ target           '' ; 
    var  $ anchor_class     '' ; 
    var  $ show_count       true ; 
    var  $ link_func        'getData' ; 
    var  $ loading          '.loading' ;

    / ** 
     * Constructor 
     * @access public 
     * @param parámetros de inicialización de la matriz 
     * / 
    function  CI_Pagination ( $ params  = array ()) { 
        if ( count ( $ params)>  0 ) { 
            $ this -> initialize ( $ params );        
        } 
        log_message ( 'debug' "Pagination Class Initialized" ); 
    }
 
    / ** 
     * Inicializar preferencias 
     * @access public 
     * @param array initialization parameters 
     * @return void 
     * / 
    function  initialize ( $ params  = array ()) { 
        if ( count ( $ params )>  0 ) { 
            foreach ( $ params  as $ key  =>  $ val ) { 
                if (isset ( $ this -> $ key )) { 
                    $ this -> $ key  $ val ; 
                } 
            }         
        }
 
        // Aplicar la etiqueta de clase usando la variable anchor_class, si está establecida. 
        if ( $ this -> anchor_class  ! =  '' ) { 
            $ this -> anchor_class  'class = "'  $ this -> anchor_class  '"' ; 
        } 
    }
 
    / **
     * Genere los enlaces de paginación 
     * @access public 
     * @return string 
     * /     
    function  create_links () { 
        // Si nuestro recuento de elementos o el total por página es cero, no hay necesidad de continuar. 
        if ( $ this -> total_rows  ==  $ this -> per_page  ==  0 ) { 
           return  '' ; 
        }
 
        // Calcular el número total de páginas 
        $ NUM_PAGES  ceil ( $ this -> TOTAL_ROWS  $ this -> per_page);

        // ¿Hay una sola página? Hm ... nada más que hacer aquí entonces. 
        if ( $ num_pages  ==  1 ) { 
            $ info  'Mostrando:'  $ esto -> total_rows ; 
            devuelve  $ info ; 
        }
 
        // Determine el número de la página actual.        
        $ CI  = &  get_instance ();    
        if ( $ CI -> uri -> segment ( $ this -> uri_segment )! =  0 ) { 
            $ this -> cur_page  $ CI-> uri -> segmento ( $ this -> uri_segment );   
            // ¡Prepara la página actual - no es un asunto divertido! 
            $ this -> cur_page  = (int)  $ this -> cur_page ; 
        }
 
        $ this -> num_links  = (int) $ this -> num_links ; 
        if ( $ this -> num_links  1 ) { 
            show_error ( 'Su número de enlaces debe ser un número positivo.' ); 
        }
 
        si (!  is_numeric ($ this -> cur_page )) { 
            $ this -> cur_page  0 ; 
        }
 
        // ¿Está el número de página más allá del rango de resultados? 
        // Si es así, mostramos la última página 
        si ( $ this -> cur_page  $ this -> total_rows ) { 
            $ this -> cur_page  = ( $ num_pages  1 ) *  $ this -> per_page ; 
        }
 
        $ uri_page_number  $ this -> cur_page ; 
        $ esto -> cur_page piso (( $ this -> cur_page / $ this -> per_page ) +  1 );

        // Calcular los números de inicio y final. Estos determinan 
        // qué número para comenzar y terminar los enlaces de dígitos con 
        $ start  = (( $ this -> cur_page  $ this -> num_links )>  0 )? $ this -> cur_page  - ( $ this -> num_links  1 ):  1 ; 
        $ end    = (( $ este ->cur_page  $ this -> num_links ) <  $ num_pages )? $ this -> cur_page  $ this -> num_links  $ num_pages ;

        // Agregue una barra diagonal al URL base si es necesario 
        $ this -> base_url  rtrim ( $ this -> base_url '/' ). '/' ;

        // Y aquí vamos ... 
        $ output  '' ;

        // MOSTRANDO ENLACES 
        si ( $ this -> show_count ) {
            $ curr_offset  $ CI -> uri -> segmento ( $ this -> uri_segment ); 
            $ info  'Mostrando'  . $ curr_offset  ). 'a'  ;

            if ((  $ curr_offset  $ this -> per_page  ) <(  $ this -> total_rows  - )) 
            $ info  . =  $ curr_offset  $ this -> per_page ; 
            else 
            $ info  . = $ esto -> total_rows ;

            $ info  . =  'de'  $ esto -> total_rows  '| ' ; 
            $ salida  . =  $ info ; 
        }
 
        // Representa el enlace "Primero" 
        si ( $ this -> cur_page  $ this -> num_links ) { 
            $ output  . =  $ This -> first_tag_open  
                    $ this -> getAJAXlink ''  $ this -> first_link ) 
                    . $ this -> first_tag_close ; 
        }
 
        // Representa el enlace "anterior" 
        si ( $ this -> cur_page  ! =  1 ) { 
            $ i  $ uri_page_number  $ this -> per_page ; 
            si ( $ i  ==  0 $ i  '' ; 
            $ output  . =  $ this -> prev_tag_open  
                    $ this -> getAJAXlink $ i $ this -> prev_link  )
                    . $ this -> prev_tag_close ; 
        }
 
        // Escriba los enlaces de dígitos 
        para ( $ loop  $ start  - 1 $ loop  <=  $ end $ loop ++) { 
            $ i  = ( $ loop  $ this -> per_page ) -  $ this -> per_page ;    
            if ( $ i  > =  0 ) { 
                if ( $ this -> cur_page  ==  $ loop ) { 
                    $ output  . = $ esto -> cur_tag_open . $ loop . $ esto -> cur_tag_close // Página actual 
                } else { 
                    $ n  = ( $ i  ==  0 )? ''  $ i ; 
                    $ output  . =  $ this -> num_tag_open 
                        $ this -> getAJAXlink $ n $ loop  ) 
                        . $ this -> num_tag_close ; 
                } 
            } 
        }
 
        // Render el "siguiente" enlace
        if ( $ this -> cur_page  $ num_pages ) { 
            $ output  . =  $ this -> next_tag_open  
                $ this -> getAJAXlink $ this -> cur_page  $ this -> per_page  $ this -> next_link  ) 
                . $ this -> next_tag_close ; 
        }
 
        // Representa el enlace "Último" 
        si (( $ this -> cur_page  $ this -> num_links ) < $ num_pages ) { 
            $ i  = (( $ num_pages  $ this -> per_page ) -  $ this -> per_page ); 
            $ output  . =  $ this -> last_tag_open  $ this -> getAJAXlink $ i $ this -> last_link  ). $ this -> last_tag_close ; 
        }
 
        // Mata barras dobles. Nota: a veces podemos terminar con una doble barra 
        // en el penúltimo enlace, así que eliminaremos todas las barras dobles. 
        $ salida  preg_replace ( "# ([^:]) // + #" "\\ 1 /" $ output );

        // Agregue el contenedor HTML si existe 
        $ output  $ this -> full_tag_open . $ salida . $ esto -> full_tag_close ; 
        ?>         < script >
         función  getData (página) {  
             $ .ajax ({
                método: "POST" ,
                url: " <? php  echo  $ this -> base_url ?> " + página,
                datos: {página: página},
                beforeSend : function () {
                     $ (' <? php  echo  $ this -> loading ?> ') .show ();
                }
                success : function (data) {
                     $ (' <? php  echo  $ this -> loading ?> ') .hide ();
                    $ (' <? php  echo  $ this -> target ?> ') .html (data);
                }
            });
        }
        </ script > 
        <? php 
        return  $ output ; 
    }
 
    función  getAJAXlink ( $ count $ text ) { 
        $ pageCount  $ count ? $ cuenta : 0 ; 
        devuelve  '<a href = "javascript: void (0);"'  $ esto -> anchor_class  'onclick = "' . $ this -> link_func . '(' . $ pageCount . ')">' $ texto  . '</a>
    } 
} // FIN Clase de paginación

Controlador ( Posts.php)

El controlador Mensajes consta de 3 funciones __construct()index(), y ajaxPaginationData()
__construct()La función carga el modelo de publicación, la biblioteca Ajax_pagination y establece el límite de datos por página en $this->perPagevariable. 
En la index()función, la biblioteca de paginación se inicia con la configuración básica, la vista de índice se carga y los datos de las publicaciones se pasan a la vista. 
La funcionalidad de la ajaxPaginationData()función es la misma que la index()función. Pero este método es solicitado por el ajax cuando se hace clic en el enlace de paginación.
<? php  if (!  defined ( 'BASEPATH' )) exit ( 'No se permite el acceso directo al script' ); / ** 
 * Clase de Gestión de Mensajes creado por CodexWorld 
 * / clase  Mensajes  extiende  CI_Controller  { 
    
    función  __construct () { 
        padres :: __construct (); 
        $ this -> load -> model ( 'post' ); 
        $ this -> load -> library ( 'Ajax_pagination' ); 
        $ this -> perPage  3 ; 
    } 
    
índice de     función pública  () { 
        $ data  = array (); 
        
        // el total de filas cuenta 
        $ totalRec  count ( $ this -> post -> getRows ()); 
        
        // configuración de paginación 
        $ config [ 'target' ] =  '#postList' ; 
        $ config [ 'base_url' ] =  base_url (). 'posts / ajaxPaginationData' ; 
        $ config [ 'total_rows' ] =  $ totalRec ; 
        $ config [ 'per_page'] =  $ this -> perPage ; 
        $ this -> ajax_pagination -> initialize ( $ config ); 
        
        // obtener los datos de las publicaciones 
        $ data [ 'posts' ] =  $ this -> post -> getRows (array ( 'limit' => $ this -> perPage )); 
        
        // cargar la vista 
        $ this -> load -> view ( 'posts / index' $ data ); 
    } 
    
    function  ajaxPaginationData () { 
        $ page $ esto -> entrada -> publicación ( 'página' ); 
        if (! $ page ) { 
            $ offset  0 ; 
        } else { 
            $ offset  $ page ; 
        } 
        
        // el total de filas cuenta 
        $ totalRec  count ( $ this -> post -> getRows ()); 
        
        // configuración de paginación 
        $ config [ 'target' ] =  '#postList' ; 
        $ config [ 'base_url' ] =  base_url ().'posts / ajaxPaginationData' ; 
        $ config [ 'total_rows' ] =  $ totalRec ; 
        $ config [ 'per_page' ] =  $ this -> perPage ; 
        $ this -> ajax_pagination -> initialize ( $ config ); 
        
        // obtener los datos de las publicaciones 
        $ data [ 'posts' ] =  $ this -> post -> getRows (array ( 'start' => $ offset , 'limit' => $ this -> perPage ));
        
        // carga la vista 
        $ this -> load -> view ( 'posts / ajax-pagination-data' $ data false ); 
    } 
}

Modelo ( Post.php)

El modelo Post contiene getRows()función. La getRows()función recupera datos de la base de datos y devuelve la publicación en función de la restricción de límite proporcionada por la $paramsmatriz.
<? php  if (!  defined ( 'BASEPATH' )) exit ( 'No se permite el acceso directo al script' ); 
clase de  mensaje  se extiende  CI_Model { 

    función  GetRows ( $ params  = array ()) 
    { 
        $ this -> db -> seleccionar ( '*' ); 
        $ this -> db -> from ( 'posts' ); 
        $ this -> db -> order_by ( 'created' , 'desc' ); 
        
        Si(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 ->'límite' ]); 
        } 
        
        $ query  $ this -> db -> get (); 
        
        devuelve ( $ consulta -> num_rows ()>  0 )? $ consulta -> result_array (): FALSE ; 
    }
 
}

Ver ( posts/)

La carpeta de vista (posts /) contiene 2 archivos, index.phpajax-pagination-data.php.
index.php
En el index.phparchivo, las publicaciones se enumeran con los enlaces de paginación cuando se carga el controlador de la publicación. La paginación de Ajax utiliza jQuery, por lo jquery.min.jsque debe incluirse jQuery library ( ). Puede ver que solo create_links()se necesita la función para llamar ( $this->ajax_pagination->create_links()) desde la biblioteca de paginación para mostrar los enlaces de paginación. 
Div con loadingclase se usa para mostrar un cargador mientras se cargan datos. Si desea cambiar el selector, configure el selector de carga con las opciones de configuración de paginación.
< script  src = " <? php  echo  base_url ();  ?> asset / js / jquery.min.js" > </ script >
< div  class = "container" >
    < h1 > Paginación de Ajax en el marco de CodeIgniter </ h1 >
    < div  class = "row" >
        < div  class = "post-list"  id = "postList" >
             <? php  if (! empty ( $ posts )): foreach ( $ posts  as  $ post ):  ?> 
                < div  class = "list-item" > < a  href = "javascript: void (0);" > < h2 > <? php  echo  $ post [ 'title' ]; ?> </ h2 > </ a > </ div >
            endforeach else:  ?> 
            < p > Publicaciones no disponibles. </ p >
             <? php  endif; ?>             <? php  echo  $ this -> ajax_pagination -> create_links (); ?> 
        </ div >
        < div  class = "loading"  style = "display: none;" > < div  class = "content" > < img  src = " <? php  echo  base_url (). ' asset / images / loading.gif' ?> " /> </ div > </ div >
    </ div >
</ div >
ajax-pagination-data.php
Este archivo hace el mismo trabajo que el index.php, pero contiene un código mínimo para mostrar solo la lista de publicaciones y los enlaces de paginación.
 <? php  if (! empty ( $ posts )): foreach ( $ posts  as  $ post ):  ?> 
     < div  class = "list-item" > < a  href = "javascript: void (0);" > < h2 > <? php  echo  $ post [ 'title' ]; ?> </ h2 > </ a > </ div >
  <? php  endforeach; else:  ?> 
 < p > Publicaciones no disponibles. </ p >
  ? php endif; ?> <? php  echo  $ this -> ajax_pagination -> create_links (); ?>

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas