Cargue datos en el desplazamiento de página en CodeIgniter usando jQuery y Ajax

El desplazamiento infinito es la forma más fácil de agregar paginación en la lista de datos. Con la paginación de desplazamiento infinito, el usuario no necesita hacer clic en el enlace para cargar datos de la base de datos. En lugar de que el contenido dinámico se cargue desde el servidor automáticamente mientras se desplaza la página hacia abajo. Infinite Scrolling es el mejor reemplazo de la paginación de enlaces para cargar automáticamente más datos de la base de datos.
Generalmente, la biblioteca de paginación CodeIgniter se usa para agregar enlaces de paginación a la lista de datos. Pero si desea implementar una funcionalidad de paginación avanzada, la opción mejor es el desplazamiento infinito. La carga de datos en la funcionalidad de desplazamiento se puede implementar fácilmente utilizando jQuery y Ajax. Cuando el usuario llega al final de la página web, más datos se recuperan de la base de datos MySQL y se carga contenido adicional en la página web mientras se desplaza hacia abajo. En este tutorial, le mostraremos cómo cargar datos en el desplazamiento de página en CodeIgniter utilizando jQuery y Ajax.
En el código de ejemplo, implementaremos una paginación de desplazamiento infinita para la lista de datos de publicaciones en la aplicación CodeIgniter.
  • Obtener y listar los datos de la base de datos.
  • Detectar la página de desplazamiento hacia abajo utilizando jQuery.
  • Haga una solicitud AJAX para cargar datos de la base de datos.
  • Mostrar más datos de publicación debajo de los datos cargados previamente.

Crear tabla de base de datos

Para almacenar los datos de las publicaciones, es necesario crear una tabla en la base de datos. El siguiente SQL crea una poststabla con algunos campos básicos en la base de datos MySQL.
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` enum ( '1' , '0' ) COLLATE utf8_unicode_ci NO NULL DEFAULT '1' COMENTARIO'1 = Activo, 0 = Inactivo' ,
  TECLA PRINCIPAL ( `id` )
) MOTOR = InnoDB DEFAULT CHARSET = utf8 COLLATE = utf8_unicode_ci;

Controlador (Posts.php)

El controlador de Mensajes contiene 3 funciones, __construct()index(), y loadMoreData()
__construir():
  • Cargar modelo de publicación para obtener datos de la base de datos.
  • Establecer por página límite de lista de datos.
índice():
  • Obtenga datos de publicaciones de la base de datos utilizando la función getRows () del modelo de publicación.
  • Pase los datos de la publicación para ver y cargar esta vista.
loadMoreData (): este método es llamado por la solicitud Ajax para cargar más datos.
  • Obtener el ID de la última publicación mostrada.
  • Obtener los datos de las publicaciones en función de la última ID de la publicación.
  • Pase los datos de la publicación a la vista para cargar más datos de la publicación.
<? php defined ( 'BASEPATH' ) O exit ( 'No se permite el acceso directo al script' ); 

los mensajes de la  clase  extienden el  controlador_CIN  { 
    
    función  __construct () { 
        parent :: __construct (); 
        
        // Cargar modelo post 
        $ this -> cargar -> modelo ( 'publicar' ); 
        
        // Por página limite 
        $ esto -> perPage  4 ; 
    } 
    
índice de     función pública  () { 
        $ data  = array (); 
        
        // Obtener datos de publicaciones de la base de datos.
        $ conditions [ 'order_by' ] =  "id DESC" ; 
        $ conditions [ 'limit' ] =  $ this -> perPage ; 
        $ data [ 'posts' ] =  $ this -> post -> getRows ( $ conditions ); 
        
        // Pase los datos de la publicación para ver 
        $ this -> load -> view ( 'posts / index' $ data ); 
    } 
    
    function  loadMoreData () { 
        $ conditions  = array (); 
        
        // Obtener ID de la última publicación
        $ lastID  $ this -> input -> post ( 'id' ); 
        
        // Obtener filas de publicación num 
        $ conditions [ 'where' ] = array ( 'id <' => $ lastID ); 
        $ conditions [ 'returnType' ] =  'count' ; 
        $ data [ 'postNum' ] =  $ this -> post -> getRows ( $ conditions ); 
        
        // Obtener datos de publicaciones de la base 
        de datos $ conditions [ 'returnType' ] =  '' ;
        [ 'order_by' ] =  "id DESC" ; 
        $ conditions [ 'limit' ] =  $ this -> perPage ; 
        $ data [ 'posts' ] =  $ this -> post -> getRows ( $ conditions ); 
        
        $ data [ 'postLimit' ] =  $ this -> perPage ; 
        
        // Pase los datos para ver 
        $ this -> load -> view ( 'posts / load-more-data' $ data false );

Modelo (Post.php)

El modelo Post maneja el trabajo relacionado con la base de datos.
  • __construct () : especifique el nombre de la tabla de la base de datos.
  • getRows () : recupera los datos de las publicaciones de la base de datos según la condición y devuelve como una matriz.
<? php  if (!  defined ( 'BASEPATH' )) exit ( 'No se permite el acceso directo al script' ); 

clase de  mensaje  se extiende  CI_Model { 
    
    función  __construct () { 
        $ this -> tblName  'mensajes' ; 
    } 
    
    / * 
     * Fetch publica datos de la base de datos 
     * @param id devuelve un solo registro si se especifica, de lo contrario todos los registros 
     * / 
    function  getRows ( $ params  = array ()) { 
        $ this -> db -> select ( '*'); 
        $ this -> db -> from ( $ this -> tblName ); 
        
        // obtener datos por condiciones 
        si ( array_key_exists ( "where" , $ params )) { 
            foreach ( $ params [ 'where' ] como  $ key  =>  $ value ) { 
                $ this -> db -> where ( $ key , $ valor ); 
            } 
        } 
        
        if ( array_key_exists ( "order_by" , $ params)) { 
            $ this -> db -> order_by ( $ params [ 'order_by' ]); 
        } 
        
        if ( array_key_exists ( "id" , $ params )) { 
            $ this -> db -> where ( 'id' , $ params [ 'id' ]); 
            $ consulta  $ esto -> db -> get (); 
            $ result  $ query -> row_array (); 
        } else { 
            // establece el inicio y el límite 
            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' ]); 
            } 
            
            if ( array_key_exists ( "returnType" , $ params ) &&  $ params [ 'returnType' ] ==  'count' ) { 
                $ result  $ this -> db -> count_all_results (); 
            } else { 
                $ query  $ this -> db -> get (); 
                $ resultado  = ( $ consulta -> num_rows ()>  0 )? $ consulta -> result_array ():; 
            } 
        } 

        // devolver exagerado los datos 
        de retorno  $ resultado ; 
    } 
    
}

Ver (mensajes /)

Se utilizan dos archivos de vista, index.php y load-more-data.php.
index.php:
Inicialmente, se obtiene un número limitado de datos de publicaciones de la base de datos y se enumeran en la página web. Los datos adicionales se recuperarán a través de Ajax mientras la página se desplaza hacia abajo.
Al principio, cargue la biblioteca jQuery.
< script  src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" > </ script >
El método jQuery scroll () se utiliza para detectar el desplazamiento de la página y se inicia una solicitud de Ajax cuando el usuario se desplaza hacia abajo. La última identificación de publicación mostrada ( $lastID) se envía a través de Ajax al loadMoreData()método del controlador de publicaciones Una vez que el método de éxito Ajax devuelve más datos de publicaciones, el contenido HTML se agregará a la lista de publicaciones.
< script  type = "text / javascript" >
 $ ( document ) .ready ( function () {
     $ ( window ) .scroll ( function () {
         var LastID =  $ (' .load-more ') .attr ( 'lastID' );
         if (( $ ( window ) .scrollTop () ==  $ ( document ) .height () -  $ (ventana ) .height ()) & & (lastID ! =  0 )) {
             $ .ajax ({
                tipo: 'POST' ,
                url: '<? php echo base_url (' posts / loadMoreData '); ?> ' ,
                datos: 'id =' + lastID,
                 beforeSend : function () {
                     $ (' .load-more ') .show ();
                }
                success : function (html) {
                     $ (' .load-more '). eliminar ();
                    $ (' #postList ') .append (html);
                }
            });
        }
    });
});
</ script >
Los datos de publicaciones que pasaron del controlador de publicaciones se muestran en una lista.
< div  id = "postList" >
     <? php  if (! empty ( $ posts )) {foreach ( $ mensajes  como  $ post ) {  ?> 
        < div  class = "list-item" >
            < h2 > <? php  echo  $ post [ 'title' ]; ?> </ h2 >
            < p > <? php  echo  $ post [ 'contenido' ]; ?> </ p >
        </ div >
     <? php  ?> 
        < div  class = "load-more"  lastID = " <? php  echo  $ post [ 'id' ];  ?> "  style = "display: none;" >
            < img  src = " <? php  echo  base_url ( ' asset / images / loading.gif' );  ?> " /> Cargando más publicaciones ...
        </ div >
     <? php  } else {  ?> 
        < p > Publicaciones no disponibles. </ p >
     <? php  ?> 
</ div >
load-more-data.php:
Esta vista aparece mientras el usuario se desplaza hacia abajo. Solicitado por el Ajax y cargado por el loadMoreData()método del controlador de Mensajes.
< div  id = "postList" >
     <? php  if (! empty ( $ posts )) {foreach ( $ mensajes  como  $ post ) {  ?> 
        < div  class = "list-item" >
            < h2 > <? php  echo  $ post [ 'title' ]; ?> </ h2 >
            < p > <? php  echo  $ post [ 'contenido' ]; ?> </ p >
        </ div >
     <? php  ?> 
    <? php  if ( $ postNum  $ postLimit ) {  ?> 
        < div  class = "load-more"  lastID = " <? php  echo  $ post [ 'id' ];  ?> "  style = " display: none; " >
            < img  src = " <? php  echo  base_url ( ' asset / images / loading.gif' );  ?> " /> Cargando más publicaciones ...
        </ div >
     <? php  } else {  ?> 
        < div  class = "load-more"  lastID = "0" >
            ¡Eso es todo!
        </ div >
     <? php  ?>     
<? php  } else {  ?>     
    < div  class = "load-more"  lastID = "0" >
            ¡Eso es todo!
    </ div >    
 <? php  ?>
Cargue datos en el desplazamiento de página desde la base de datos MySQL usando jQuery Ajax PHP

Conclusión

Si desea permitir que los usuarios carguen más datos sin actualizar la página y proporcione una interfaz fácil de usar para la paginación en la aplicación CodeIgniter, el desplazamiento infinito Ajax definitivamente es una mejor opción. Los datos de carga en scroll se pueden integrar fácilmente con jQuery y Ajax. Alternativamente, la paginación Ajax se puede usar para implementar la paginación sin actualización de página en CodeIgniter .

Acerca de: Programator

Somos Instinto Programador

0 comentarios:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Con tecnología de Blogger.