Inicio JavaScript Filtrar filas en una tabla

Filtrar filas en una tabla

Jueves, 31-03-2011 17:43 - Leer comentarios - Comentar

Vamos a ver un ejemplo en el que los datos de una tabla se filtran según lo que se vaya escribiendo en un cuadro de texto. Pulsando en la celda del encabezado se puede seleccionar la columna que se va a filtar.
El código del formulario y de la tabla es el que os pongo a continuación.
He utilizado botones en los encabezados para que se puedan pulsar también con el teclado, así son accesibles a los que no dispongan de ratón
Texto plano










 



















García LópezJosé55123678




Benito del RíoPedro43198265





Gomez PozoJosua55512905




Benitez SánchezAndrés44592718




Rosales RosalesAntonio4318742
También podeis ver el código JavaScript para seleccionar la columna y filtrar las filas:
Texto plano
var colum=0; // columna por la que se filtrará
var valor; // value del botón que se ha pulsado

function selecciona(obj,num) {
  t = document.getElementById('tab');
  filas = t.getElementsByTagName('tr');
  // Deseleccionar columna anterior
  for (i=1; ele=filas[i]; i++) 
    ele.getElementsByTagName('td')[colum].className='';
  // Seleccionar columna actual
  colum=num;
  for (i=1; ele=filas[i]; i++)
    ele.getElementsByTagName('td')[colum].className='celdasel';
  // Cambiar botón por cuadro de texto
  valor = obj.value;
  celda = obj.parentNode;
  celda.removeChild(obj);
  txt = document.createElement('input');
  celda.appendChild(txt);
  txt.focus();
  txt.onblur = function() {ponerBoton(this,num)};
  txt.onkeyup = function() {filtra(this.value)};
  // Desactivar los demás botones
  for (i=0; ele=t.getElementsByTagName('input')[i]; i++)
    if (ele.type == 'button') ele.disabled=true;
}

function ponerBoton(obj,num) {
  celda = obj.parentNode;
  celda.removeChild(obj);
  boton = document.createElement('input');
  boton.type = 'button';
  boton.value = valor;
  boton.onclick = function() {selecciona(this,num)}
  boton.onkeypress = function() {selecciona(this,num)}
  celda.appendChild(boton);
  // Activar botones
  for (i=0; ele=t.getElementsByTagName('input')[i]; i++)
    ele.disabled=false;
}

function filtra(txt) {
  t = document.getElementById('tab');
  filas = t.getElementsByTagName('tr');
  for (i=1; ele=filas[i]; i++) {
    texto = ele.getElementsByTagName('td')[colum].innerHTML.toUpperCase();
    for (j=0; ra=document.forms[0].rad[j]; j++) // Comprobar radio seleccionado
      if (ra.checked) num = j;
      
    if (num==0) posi = (texto.indexOf(txt.toUpperCase()) == 0);
    else if (num==1) posi = (texto.lastIndexOf(txt.toUpperCase()) == texto.length-txt.length);
    else posi = (texto.indexOf(txt.toUpperCase()) != -1);
    ele.style.display = (posi) ? '' : 'none';
  } 
}

Tags

filtrar, filas, tabla, javascript

Comentarios

Santiago - Lunes, 18-08-2014 21:26

Gracias Miguel! No te imaginas lo útil que me resulto este post.
Saludos.


Miguel - Lunes, 18-08-2014 19:08

Hola Santiago, en primer lugar lo siento , las vacaciones son muy duras (jeje), lo que quieres hacer es bien facil de retocar en este script,
1º paso - cambiar estas lineas
'
if (num==0) posi = (texto.indexOf(txt.toUpperCase()) == 0);
else if (num==1) posi = (texto.lastIndexOf(txt.toUpperCase()) == texto.length-txt.length);
else posi = (texto.indexOf(txt.toUpperCase()) != -1);
'
por esta otra
'
posi = (texto.indexOf(txt.toUpperCase()) != -1);
'
2º paso - ahora ya puedes eliminar los botones de radio de opcion de elegir tipo , siempre buscara por 'contiene'.

Gracias por visitar la web


Santiago - Domingo, 10-08-2014 23:10

Hola, muy buen post. Como se podría hacer que no haya botones de opción de elegir el tipo de filtrado (Principio, Final y Contiene) y que siempre sea contiene "Contiene". Al intentar hacerlo me djó de funcionar el filtrado.

gracias y saludos!


Rosie - Martes, 08-11-2011 13:12

Didn't know the forum rules allowed such birlliant posts.


No se permiten comentarios en este momento.