Foros del Web - Ver Mensaje Individual

Naahuel · #4 (**permalink**) 10/04/2012, 12:25

Te hice un código de ejemplo como para que estudiemos el asunto.
Probá este código:

Código HTML:

Ver original<!doctype html>
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            //############################################
            //llenar la tabla, ignorar esta parte
            //############################################
            var s_html = '';
            var i_num_elems = 1000;
            var i_rnd;
            for(i=0; i<i_num_elems; i++){
                i_rnd = Math.floor(Math.random()*1111);
                s_html += '<tr><td>'+ i_rnd  +'</td><td>'+ (i_rnd/2) +'</td><td>'+ (i_rnd/3) +'</td></tr>';
            }
            $('table tbody').html(s_html);
            
            //############################################
            //Obtener la tabla y otros elementos
            //############################################
            var $tabla          = $('table.filtrar');
            var $tabla_row  = $tabla.find('tbody tr');
            
            //############################################
            // Filtrado
            //############################################
            var $inp_filtro = $('input.filtro');        //obtener el elemento que filtra
            var s_val = '';
            var $self, $padre;
            $inp_filtro.keyup(function(){               //filtrar la tabla al escribir
                s_val = $(this).val();
                $tabla_row.show().filter(':not(:contains("'+ s_val +'"))').hide();
            }); 
        });
    </script>
    <title>Filtro de tabla</title>
</head>
<body>
    <p><label>Filtro: </label><input type="text" class="filtro" /></p>
    <table class="filtrar" border="1">
        <thead>
            <tr>
                <th>Encabezado 1</th>
                <th>Encabezado 2</th>
                <th>Encabezado 3</th>
            </tr>
        </thead>
        <tbody>
            <!--tabla vacia, llenada con valores arbitrarios-->
        </tbody>
    </table>
</body>
</html>

Cambiá la variable i_num_elems para agregar o quitar filas. Creo que es bastante rápido. Lo probé con 2000 filas y la demora que tiene es relativamente pequeña.

Observá que no recorremos el DOM continuamente ni tampoco usamos ciclos (al menos no en nuestro código, pero los sí en los métodos de jQuery). Solamente usamos .filter() para filtrar la colección de filas que guardamos en la memoria en la variable $tabla_row.