Breaking

Post Top Ad

Your Ad Spot

domingo, 10 de marzo de 2019

Paginación de Ajax con búsqueda y filtro en CodeIgniter

En el tutorial anterior de CodeIgniter, hemos mostrado el proceso de integración de paginación ajax en CodeIgniter . Antes de comenzar, le recomendamos que lea nuestro tutorial de paginación Ajax CodeIgniter anterior. Esa guía le ayudará a comprender el concepto básico de paginación ajax en CodeIgniter.
En este tutorial de CodeIgniter, extenderemos la funcionalidad de paginación Ajax con búsqueda y filtro. Las funciones de búsqueda y filtrado se utilizan comúnmente en cada lista de datos. Aquí le mostraremos cómo implementar la búsqueda en vivo y filtrar en la lista con Ajax Pagination en CodeIgniter . En nuestro script de ejemplo, buscaremos los datos de las publicaciones de la base de datos y los mostraremos en la lista. Además, la paginación Ajax con funciones de búsqueda y filtro se agregará a la lista de publicaciones.
Antes de comenzar, eche un vistazo a las carpetas y la estructura de archivos de CodeIgniter Ajax Pagination con Search.
codeigniter-ajax-pagination-tutorial-files-structure-codexworld

Creación de tablas de base de datos

En este script de ejemplo, buscaremos los datos de las publicaciones de la base de datos. El siguiente SQL crea una poststabla 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 Paginas del Ajax

La Ajax_paginationbiblioteca ayuda a generar enlaces de paginación y obtener los datos sin actualizar la página utilizando jQuery y Ajax. Esta biblioteca ( Ajax_pagination.php) debe colocarse en el application/libraries/directorio.
<? 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         ''; 
    var  $ total_rows       '' ; 
    var  $ per_page         10 ; 
    var  $ num_links        =   2 ; 
    var  $ cur_page         =   0 ; 
    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;' ; 
    var  $ last_tag_close   '' ; 
    var  $ cur_tag_open     '& nbsp; <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  $ num_tag_close    '' ; 
    var  $ target           '' ; 
    var  $ anchor_class     '' ;
verdadera ; 
    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' "Clase de paginación inicializada" ); 
    } 

    / ** 
     * 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  '"' ; 
        } 
    } 

    / ** 
     * Generar 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 -> segment ( $ 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.' ); 
        } 

        if (!  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 ; 
        $ this -> cur_page  floor (( $ 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 dígitos de los enlaces con 
        $ start  = (( $ this -> cur_page  $ this -> num_links )>  0 )? $ this -> cur_page  - ( $ this -> num_links  1 ):  1 ; 
        $ end    = (( $ $ -> 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 
        if ( $ this -> show_count ) { 
            $ curr_offset  $ CI -> uri -> segment ( $ 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  . =  $ this -> 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 $ esto -> 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  . =  $ this -> 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 ; 
                } 
            } 
        } 

        // Representa el enlace "siguiente" 
        si ( $ 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. 
        $ output  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}, antes de 
                Enviar : function () { 
                    $ (' <? php  echo  $ this -> loading ?> ') .show (); 
                }, 
                success: function (data) { 
                    $ (' -> cargando ?> ') .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>' ; 
    } 
}

Controlador (Posts.php)

El controlador de Mensajes contiene de 3 funciones __construct()index()ajaxPaginationData()
__construct()- El modelo de publicación y la biblioteca Ajax_pagination se cargan en esta función. Además, el límite de datos por página se establece en $ this-> perPage variable. 
index()- Los datos de las publicaciones se obtienen utilizando el modelo de publicación y pasan a la vista. La biblioteca de paginación se configura e inicia para mostrar los enlaces de paginación. 
ajaxPaginationData()- Me gusta la función index () ajaxPaginationData () haciendo lo mismo. Pero este método se carga a través de Ajax haciendo clic en los enlaces 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  2 ; 
    } 
    
í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 ; 
        $ config [ 'link_func' ] =  'searchFilter' ; 
        $ this -> ajax_pagination -> initialize ( $ config ); 
        
        // obtener los datos de las publicaciones 
        $ data [ 'posts' ] =  $ this -> post -> getRows (array ( 'limit' => $ this -> perPage )); 
        
        // cargar la vista 
        $ esto -> cargar -> ver ( 'publicaciones / índice' $ datos); 
    } 
    
    function  ajaxPaginationData () { 
        $ conditions  = array (); 
        
        // número de desplazamiento de cálculo 
        $ page  $ this -> input -> post ( 'page' ); 
        if (! $ page ) { 
            $ offset  0 ; 
        } else { 
            $ offset  $ page ; 
        } 
        
        // establecer condiciones para la búsqueda 
        $ keywords  $ this -> input -> post ( 'keywords' ); 
        $ sortBy  $ esto-> entrada -> publicación ( 'sortBy' ); 
        if (! empty ( $ keywords )) { 
            $ conditions [ 'search' ] [ 'keywords' ] =  $ keywords ; 
        } 
        if (! empty ( $ sortBy )) { 
            $ conditions [ 'search' ] [ 'sortBy' ] =  $ sortBy ; 
        } 
        
        // el total de filas cuenta 
        $ totalRec  count ( $ this -> post -> getRows ( $ conditions ));
        
        // configuración de paginación 
        $ config [ 'target' ] =  '#postList' ; 
        $ config [ 'base_url' ] =  base_url (). 'posts / ajaxPaginationData' ; 
        $ config [ 'total_rows' ] =  $ totalRec ; 
        $ config [ 'per_page' ] =  $ this -> perPage ; 
        $ config [ 'link_func' ] =  'searchFilter' ; 
        $ this -> ajax_pagination -> initialize ( $ config );
        
        // establece inicio y límite 
        $ condiciones [ 'inicio' ] =  $ compensación ; 
        $ conditions [ 'limit' ] =  $ this -> perPage ; 
        
        // obtener datos de publicaciones 
        $ datos [ 'publicaciones' ] =  $ esto -> publicar -> getRows ( $ condiciones ); 
        
        // carga la vista 
        $ this -> load -> view ( 'posts / ajax-pagination-data' $ data false ); 
    } 
}
Si observa en la configuración de paginación, se especifica una función (searchFilter) en link_funcEsta función definida por el usuario se llamará en cada enlace de paginación, lo que ayuda a pasar la búsqueda y la solicitud de filtro.

Modelo (Post.php)

El modelo de publicación se utiliza para obtener los datos de las publicaciones de la base de datos y devuelve los datos según las condiciones aprobadas por la $paramsmatriz.
<? php  if (!  defined ( 'BASEPATH' )) exit ( 'No se permite el acceso directo al script' ); 
clase de  mensaje  se extiende  CI_Model { 
    / * 
     * Obtener filas de los postes de la tabla 
     * / 
    función  GetRows ( $ params  = array ()) { 
        $ this -> db -> seleccionar ( '*' ); 
        $ this -> db -> from ( 'posts' ); 
        // filtrar los datos por palabras clave buscadas 
        si (! vacío ( $ params [ 'buscar' ] ['keywords' ])) { 
            $ this -> db -> like ( 'title' , $ params [ 'search' ] [ 'keywords' ]); 
        } 
        // ordenar los datos por orden ascendente o descendente 
        si (! empty ( $ params [ 'search' ] [ 'sortBy' ])) { 
            $ this -> db -> order_by ( 'title' , $ params [ 'search' ] [ 'sortBy' ]); 
        } else { 
            $ this -> db ->'id' , 'desc' ); 
        } 
        // establece inicio y límite 
        si ( array_key_exists ( "start" , $ params ) &&  array_key_exists ( "limit" , $ params )) { 
            $ this -> db -> limit ( $ params [ 'limit' ], $ params [ 'inicio' ]); 
        } elseif (! array_key_exists ( "start" , $ params ) &&  array_key_exists ( "limit" ,
            $ this -> db -> limit ( $ params [ 'limit' ]); 
        } 
        // obtener registros 
        $ consulta  $ esto -> db -> get (); 
        // devolver retorno de datos recuperados 
        ( $ consulta -> num_rows ()>  0 )? $ consulta -> result_array (): FALSE ; 
    } 

}

Ver (mensajes /)

Se utilizan dos archivos de vista, index.phpajax-pagination-data.php
index.php:
jQuery se usa para la búsqueda y la paginación de Ajax, por lo que la biblioteca de jQuery debe cargarse primero.
< script  src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" > </ script >
En los enlaces de paginación, haga clic en la searchFilter()función de JavaScript está cargada. Esta función obtiene los valores del campo de búsqueda y del filtro desplegable y los envía al ajaxPaginationData()controlador de Mensajes a través de Ajax. Una vez que se recibe la respuesta, los datos de las publicaciones respectivas se muestran en la lista de publicaciones.
< script >
 función  searchFilter (page_num) {
    page_num = page_num? page_num: 0 ;
    palabras clave var =  $ (' #keywords ') .val ();
    var sortBy =  $ (' #sortBy ') .val ();
    $ .ajax ({
        tipo: 'POST' ,
        url: ' <? php  echo  base_url (); ?> posts / ajaxPaginationData / ' + page_num,
        data: 'page =' + page_num + '& keywords =' + keywords + '& sortBy =' + sortBy,
         beforeSend : function () {
             $ (' .loading ') .show ();
        }
        success : function (html) {
             $ (' #postList ') .html (html);
            $ (' .loading ') .fadeOut ( "slow" );
        }
    });
}
</ script >
En la carga posterior al controlador, se enumeran algunas entradas especificadas con entradas de búsqueda y filtro desplegable. Para mostrar el enlace de paginación, la create_links()función se usa desde la biblioteca de paginación $this->ajax_pagination->create_links()). El div de carga se utiliza para mostrar la imagen del cargador en la carga posterior.
< div  class = "container" >
    < h1 > Paginación Ajax con búsqueda en CodeIgniter </ h1 >
    < div  class = "row" >
        < div  class = "post-search-panel" >
            < input  type = "text"  id = "keywords"  placeholder = "Escriba las palabras clave para filtrar las publicaciones"  onkeyup = "searchFilter ()" />
            < select  id = "sortBy"  onchange = "searchFilter ()" >
                < opción  valor = "" > Ordenar por </ opción >
                < opción  valor = "asc" > Ascendente </ opción >
                < opción  valor = "desc" > Descendente </ opción >
            </ seleccionar >
        </ div >
        < 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:
Cuando se hace clic en los enlaces de paginación, esta vista se carga y muestra solo los datos de las publicaciones con 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; 
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