Problema con filtros

Lanix_0 · #1 (**permalink**) 10/04/2012, 09:47

Hola foreros tengo hoy esta duda con jquery,

Miren este código lo que pretende es ocultar aquellas filas que en la columna N no contengan un valor especifico, para ser más claro quiero hacer filtros en una tabla y este es la función que lo hace

Donde ind es la variable de índice de la colimna y o es el objeto que contiene el valor a buscar o mejor dicho filtrar.

Código Javascript:

Ver original$.filterUp = function(ind,o){
    var a = $('#content_table > table tr:gt(0):not(.optionfilter)'),
    b = o.html(),
    c = a.length,
    d = '';
    if(b=='...'){
        $('#content_table > table tr').removeClass('optionfilter')
        $('#toolbar-left').positionToolBar();
        return false;
    }
    
    for(i=1;i<=$('#content_table > table tr:gt(0)').length;i++){
        d = $('#content_table > table tr:eq('+i+') > td:eq('+ind+')').html();
        if(d!=b){
            $('#content_table > table tr:eq('+i+')').addClass('optionfilter');
        }
    }
    $('#toolbar-left').positionToolBar();
};

Bueno si hace el procesos y si filtra pero hay un problema que alenta mucho la maquina puesto que hay un ciclo for, que si hay 1500 registros va a cada registro a hacer la comparación.

Entonces lo que eh trato de hacer es con los selectores de jquery pero aun asi no me queda y es la ayuda que ando buscando, como puedo hacer mas rápido el filtrado si tuviese +1000 de registros.

creo que el selector deberia de ser algo asi

Código Javascript:

Ver original$('#content_table > table tr:gt(0):not(\':contains("'+b+'")\')').addClass('optionfilter');

gracias

Naahuel · #2 (**permalink**) 10/04/2012, 11:00

1ro: Existe ya un plugin que hace eso. Lo he usado muchas veces y es rápido:
http://www.picnet.com.au/picnet-table-filter.html

2do: Relativo a tu problema. Tu error es un grave error de absolutamente el 100% de las personas que inician en jQuery sin saber JavaScript (me incluyo). Uno se cansa de ver códigos así:

Código Javascript:

Ver original$('#selector').metodo_1();
$('#selector').metodo_3();
$('#selector').metodo_4();
$('#selector').metodo_5();
$('#selector').metodo_6();

O en tu caso:

Código Javascript:

Ver originalfor (..){
    $('#selector').metodo();
}

La función $() recibe un selector CSS como parámetro. jQuery usa un parser especial para recorrer el DOM buscando y recolectando los elementos que coinciden con el selector. Si llamás a la función $() en cada ciclo, pues claro que te va a andar lento. Más todavía con selectores tan complejos.

Solución:

Código Javascript:

Ver originalvar elemento = $('#selector');
for (..){
    elemento.metodo();
}

Hay muchas formas de hacer tu código funcionar con jQuery y que sea eficiente. La regla 1 es no obtener los elementos que necesitamos 1000000 veces.

-edit-

Analizando mejor tu código, veo que si es necesario usar un selector en cada ciclo. Sin embargo probablemente exista una forma mejor, como almacenar la tabla completa en la memoria y analizarla desde ahí usando .filter() en lugar de recorrer el DOM millones de veces.

Lanix_0 · #3 (**permalink**) 10/04/2012, 11:21

Si creo que mando llamar muchas veces lo mismo y estar comparando, pero suena bien lo de almacenar en memoria pero el detalle es como y que procesos se llevaran cuando este ahi, y pues si habia visto plugins que lo hacen pero ninguno me convencio como para agregarlo en mi pagina, por eso mejor me dispuse hacer uno y creo que el que me recomiendas se acerca a lo que necesito, y pero como aria eso de almacenar en memoria y trabajr desde ahi la tabla

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.