Sentido Web

Laboratorio: filtrado de tablas

17:30 H (CET)| Temas: AI/Usabilidad · Javascript · Laboratorio

Leyendo una de las entradas de Usolab, en la que habla de colocar filtros en las tablas: Icono para el control "filtrar", no he podido resistirme a llevar a cabo tan buena idea.

En el ejemplo voy a seleccionar una tabla, y modificarla para admitir ordenación por columnas, filtrado mediante expresiones regulares y distinción de filas alternas. Además de incluir un icono en el filtro que indica el estado de filtrado.

Lo primero que debemos hacer es seleccionar la tabla en cuestión y tratarla, modificando la cabecera (th) incluyendo un enlace para poder ejecutar la acción de ordenar, un icono que indica qué columna está ordenada y en qué sentido y una caja de texto para indicar el filtrado.

La caja de texto tiene la particularidad de mostrar un icono que indica el estado del filtro, cuanto más lleno esté de "líquido", más mostrará. Para lo cual usamos una imagen como fondo de la caja de texto e iremos moviendo verticalmente para mostrar los distintos estados.

El siguiente paso es reordenar la tabla, para ello usaremos la función sort para modificar arrays, cuando se pulse en una columna se llamará al método de ordenación y redibujaremos la tabla (mediante DOM).

La parte más importante se la lleva la caja de texto, cuando pulsamos una tecla en cualquiera de las cajas, comprobaremos que filas se deben mostrar, para ello tendrán que cumplir la expresión regular que se indica en la caja de texto de cada columna.

Para redibujar la tabla, crearemos una nueva mediante DOM y luego sustituiremos la anterior por la nueva. Es curioso, por decir algo y no soltar un par de malas palabras ya que estuve bastante tiempo intentando ver por qué no funcionaba, que en IE cuando sustituyo nodos mediante replaceChild no funciona correctamente, el contenido se sustituye pero no se llega a dibujar y para solucionar este "problemilla", tengo que modificar el innerHTML añadiéndole una capa vacía (<div></div>).

Aquí os dejo el código:

  // Almaceno los datos de la tabla que leo, la primera posicion indica si se debe mostrar o no, y la segunda posicion contiene los datos de la fila
  var datos = new Array();
  // Almaceno la cabecera de la tabla
  var cabecera = new Array();
  // Columna seleccionada para ordenar
  var seleccionado = 0;
  // Si el orden es ascendente/descendente en cada columna
  var orden = new Array(true, true, true);
  // El contenido de cada uno de los filtros
  var filtros = new Array("", "", "");
  // Indice del filtro actual
  var filtrado = 0;
  
  // Lee la tabla y guarda los datos y modifica la cabecera para incluir el orden y el filtro
  function transformar() {
  // Obtengo la tabla
    var tabla = document.getElementById("tabla");
    
  // Almaceno y modifico la cabecera, añadiendo el orden y el filtro
  var cab = tabla.rows[0];
    for (var i=0; i<cab.cells.length; i++) {
    cabecera[i] = cab.cells[i].innerHTML;
    cab.cells[i].innerHTML = (i != seleccionado) ?
      '<a href="javascript:ordenar('+i+')">'+cab.cells[i].innerHTML+'<img src="ord-no.gif" alt="NO" /></a>' :
      (orden[i]? '<a href="javascript:ordenar('+i+')">'+cab.cells[i].innerHTML+'<img src="ord-des.gif" alt="DES" /></a>' :
                 '<a href="javascript:ordenar('+i+')">'+cab.cells[i].innerHTML+'<img src="ord-asc.gif" alt="ASC" /></a>');
    cab.cells[i].innerHTML += '<br /><input type="text" id="filtro'+i+'" class="filtro" maxlength="10" onkeyup="filtro(event, '+i+')" value="'+filtros[i]+'" autocomplete="off"/>';
  }
    
  // Guardo los datos de la tabla y marco filas alternas
    for (var i=1; i<tabla.rows.length; i++) {
      if (i%2 == 0) {
        tabla.rows[i].className = "par";
    }
    var aux = new Array();
    for (var j=0; j<tabla.rows[i].cells.length; j++) {
      aux[j] = tabla.rows[i].cells[j].innerHTML;
    }
    datos[datos.length] = new Array(true, aux);
    }
  }
  
  // Funcion que ordena las filas segun la columna que se haya pulsado
  function organizar(a, b) {
    var signo = orden[seleccionado]? 1:-1;
    return (a[1][seleccionado] > b[1][seleccionado]) ? signo : -signo;
  }
  
  
  // Ordena y dibuja la tabla
  function ordenar(i) {
    var tabla = document.getElementById("tabla");
  
  // si es la misma col se cambia el sentido
  if (seleccionado == i) {
    orden[seleccionado] = !orden[seleccionado];
  } else {
    orden[seleccionado] = true;
    seleccionado = i;
  }
  
  // Se ordena la tabla y se dibuja
  datos.sort(organizar);
  dibujarTabla();
  }  
  
  
  // Filtra las filas segun el contenidos de los filtros de cada columna
  function filtro(evt, pos) {
  for (var i=0; i<datos.length; i++) {
    datos[i][0] = true;
    for (var j=0; j<datos[i][1].length; j++) {
      var txt = document.getElementById("filtro"+j).value;
      filtros[j] = txt;
      if (txt != "") {
        // Puede fallar si se usa una expresion regular incompleta
        try {
          datos[i][0] &= eval('datos[i][1][j].match(/'+txt+'/i) != null');
        } catch (error) {}
      }
    }
  }

  filtrado = pos;
  // dibujo la tabla
  dibujarTabla();
  // Selecciono la caja de texto del filtro actual
  var obj = document.getElementById("filtro"+filtrado);
  obj.focus();
  // Coloco el cursor al final de texto
  if (obj.createTextRange) {
    var r = obj.createTextRange();
    r.moveStart("character", obj.value.length+1);
    r.moveEnd("character", obj.value.length+1);
    r.select();
  } else if (obj.setSelectionRange) {
    obj.setSelectionRange(obj.value.length+1, obj.value.length+1);
  }

  }
  
  // Dibuja la tabla
  function dibujarTabla() {
    var _tabla = document.getElementById("tabla");
  
  // Me creo una copia de la tabla
  var tabla = document.createElement("TABLE");
  tabla.id = "tabla";
  tabla.border = "0";
  tabla.setAttribute("cellspacing","0");
  tabla.setAttribute("cellpadding", "2");
  
  // Creamos los THs
  var tr = document.createElement("TR");
  for (var i=0; i<cabecera.length; i++) {
    var th = document.createElement("TH");
    th.innerHTML = ((i != seleccionado) ?
      '<a href="javascript:ordenar('+i+')">'+cabecera[i]+ '<img src="ord-no.gif" alt="NO" /></a>' :
      (orden[i]? '<a href="javascript:ordenar('+i+')">'+cabecera[i]+ '<img src="ord-des.gif" alt="DES" /></a>' :
                 '<a href="javascript:ordenar('+i+')">'+cabecera[i]+ '<img src="ord-asc.gif" alt="ASC" /></a>'));
    th.innerHTML += '<br /><input type="text" id="filtro'+i+'" class="filtro" maxlength="10" onkeyup="filtro(event, '+i+')" value="'+filtros[i]+'" autocomplete="off"/>';
    tr.appendChild(th);
  }
  tabla.appendChild(tr);

  // Creamos los TRs
  var cont = 0;
  for (var i=0; i<datos.length; i++) {
    if (datos[i][0]) {
      var tr = document.createElement("TR");
      tr.className = (cont%2==0)? "":"par";
      cont++;
      for (var j=0; j<datos[i][1].length; j++) {
        var td = document.createElement("TD");
        td.innerHTML = datos[i][1][j];
        tr.appendChild(td);
      }
      tabla.appendChild(tr);
    }
  }
  
  // Reemplazo la tabla actual por la nueva
  var padre = _tabla.parentNode;
  padre.replaceChild(tabla, _tabla);

  // ¿¿PERO QUE ES ESTO?? SI NO LO HAGO NO FUNCIONA EN EL INTERNET EXPLORER
  padre.innerHTML=padre.innerHTML+"<div></div>";
  
  // Situo el fondo del filtro para saber en que estado está
  for (var i=0; i<filtros.length; i++) {
    var obj = document.getElementById("filtro"+i);
    if (filtros[i].length > 3) {
      obj.style.backgroundPosition = "88px -45px";
    } else {
      obj.style.backgroundPosition = "88px -"+(filtros[i].length*15)+"px";
    }
  }
  
  
  }

Demo

Código

Relacionados

• Filtra las imágenes con desnudos que suban a tu web (Martes, 03 Oct 2006)
• Laboratorio: borrar filas de una tabla en Javascript (Martes, 19 Sep 2006)