Skip to main content

Paginacion y filtrado de tablas con javascript

Hace unas semanas mientras desarrollaba una aplicación web, en la cual necesitaba mostrar tablas ,y por la cantidad de registros tenia que mostrarlos paginados , del lado del servidor usaba CodeIgniter  y aunque este framework tiene un librería para paginas datos , no tiene una para filtrarlos o realizar búsquedas,por eso empecé a buscar una hecha para poder usarla.

Dentro de las que puede encontrar la mejor fue DataTable esta librería además de paginar datos  permite hacer funciones de auto completado para filtrar resultados, ordenamiento,cargado dinámico a través de AJAX entre mas funcionalidades gracias a que tiene una API para que puedas extenderla para lo que se ocurra.

Veremos ahora como usarla con la configuración inicial, lo primero que debemos hacer es abrir nuestro editor de texto preferido y creamos un nuevo archivo con la estructura básica HTML5 .

Después descargargamos Jquery ya que DataTable depende de esta.Tenemos dos  formas de usar Jquery descargandolo a  nuestra computadora o cargándolo remotamente.

Ahora descargamos DataTable, al igual que Jquery podemos descargarlo o mandar a cargar usando el CDN.

Ahora solo nos faltan los datos que queremos paginar para esto copia el siguiente código y ponlo dentro del tag body de nuestro ducumento.

solo falta inicializar el plug in de la siguiente manera , crearemos otro archivo llamado table.js, y dentro de este pondremos lo siguiente.

Nuestro archivo HTML quedaría de la siguiente manera.

Y si abrimos en   nuestro navegador el archivo podras ver algo como esto(click en la imágen para verla en grande).

demo data tableLes dejo el link para que descarguen los archivos.

DESCARGAR ARCHIVOS

Comentarios Facebook

Rodrigo Gómez

Desarrollador web en Mirrorservices.com desde hace 5 años.

13 thoughts on “Paginacion y filtrado de tablas con javascript

  1. Cordial saludo,

    Gracias por el tutorial pero realmente funciona ? he intentado realizarlo con una tabla con datos desde MySQL pero no funciona podrias indicarme si esto difiera en la busca de datatable del Ajax?

    Gracias

    1. Hola que tal, John , Yo lo he implementado con ajax y me funciona al cien,y no difiere en nada si usas MYSQL ya que este plug in es del lado del cliente.
      Espero que sea de ayuda mi respuesta. Gracias por leer mis articulos, Saludos Cordiales.

  2. Hola, estoy trabajando con datatables hace poco y estoy paginando información en un modal, hasta ahí todo bien pero agrego un botón «Elegir» para llevar esa información de la fila a la pagina principal y solo me funciona correctamente en la primera pestaña del paginado.
    ¿ A alguien le paso lo mismo ? seria genial que compartan su experiencia.

    1. Amm claro! en relación a los que talvez tengan problemas por que están consultando los datos con AJAX y cargandolos con js en la tabla, simple, despues de construir la tabla con js a partir de la consulta realizada, ejecutan de último la función dataTable de esta librería.

      así:

      $.ajax({
      url:'urlRequest', //Url del servicio que nos dará el objeto JSON o lo q esten generando.
      type:'POST',
      success: function(data){
      var response = JSON.parse(data);
      //Construllen lal tabla... no se por ejemplo.
      var content = "";
      $.each(response, function(i,valor){
      content += ""+valor+"";
      }); //Fin construcción tabla.
      $('#tabla').append(content); //Se agrega el contenido a la tabla.
      //Y una vez construida la tabla aplican los cambios que realiza la librería.
      $('#tabla').dataTable();
      }
      })

      1. Hola amigo, si me pudiese ayudar te agradeciese bastante, al cargar la lista de personas el dataTable no les reconoce, estoy trabajando con Ajax.

        function lista_personal()
        {
        $.ajax({
        url: «../conexion/conexion_persona.php»,
        type: «POST»,
        async: false,
        cache: false,
        data:
        {
        lista_personal: 1
        },
        success: function (re)
        {
        $(‘#lista_personal’).html(re);
        //hice esto como lo explicaste y no funciona, nose si le debo cambiar otra cosa
        $(‘#lista_personal’).dataTable();
        }
        });
        }

  3. Hola Israel y felicitaciones por tu página.

    Quisiera que me ayudes con un problema al paginar en codeigniter 3. Te explico lo que estoy haciendo:
    En el controlador:
    public function ver_paginacion($data,$url,$tabla,$condicion,$page,$seg,$num_link,$orden){
    $desde = ($this->uri->segment($seg)) ? $this->uri->segment($seg) : 0;
    $config[‘base_url’]=$url;
    $config[‘total_rows’]=$this->index_model->filas_total_table($tabla,$condicion);
    $config[‘per_page’]=$page;
    $config[‘num_links’]=$num_link;
    $config[‘use_page_numbers’] = TRUE;
    $config[‘page_query_string’] = TRUE;
    $config[‘uri_segment’] =$seg;
    $config[‘full_tag_open’] = »;
    $config[‘full_tag_close’] = »;
    $config[‘num_tag_open’] = »;
    $config[‘num_tag_close’] = »;
    $config[‘cur_tag_open’] = ‘‘;
    $config[‘cur_tag_close’] = ‘
    ‘;
    $config[‘prev_tag_open’] = »;
    $config[‘prev_tag_close’] = »;
    $config[‘next_tag_open’] = »;
    $config[‘next_tag_close’] = »;
    $config[‘first_link’] = ‘«’;
    $config[‘prev_link’] = ‘‹’;
    $config[‘last_link’] = ‘»’;
    $config[‘next_link’] = ‘›’;
    $config[‘first_tag_open’] = »;
    $config[‘first_tag_close’] = »;
    $config[‘last_tag_open’] = »;
    $config[‘last_tag_close’] = »;
    echo $desde.’-‘.$config[‘total_rows’];
    $this->pagination->initialize($config);
    return $this->index_model->total_paginados_table($tabla,$condicion,$config[‘per_page’],$desde,$orden);
    }
    En el modelo:

    function filas_total_table($table,$condicion){
    $consulta = $this->db->get_where($table, $condicion);
    return $consulta->num_rows();
    }
    function total_paginados_table($table,$condicion,$por_pagina,$segmento,$orden){
    $this->db->limit($por_pagina,$segmento);
    $this->db->order_by($orden);
    $consulta = $this->db->get_where($table, $condicion);
    return $consulta->result();
    }

    El problema es:
    URL: localhost/autos/lista
    Auto 1
    Auto 2
    Auto 3

    < 1 2 3 >
    URL: localhost/autos/lista/2
    Auto 2
    Auto 3
    Auto 4

    <1 2 3 >
    URL: localhost/autos/lista/3
    Auto 3
    Auto 4
    Auto 5

    <1 2 3 >

    Espero que haya explicado bien y que me puedas ayudar. Muchas gracias Israel.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *