examples - Filtrado de filas de tablas usando Jquery

jquery pdf

Question

Encontré una secuencia de comandos de Jquery que realiza el filtrado de tablas en función del campo de entrada. Básicamente, este script toma el filtro, divide cada palabra y filtra las filas de la tabla con cada palabra. Así que al final tendrás una lista de filas que tienen todas las palabras en el campo de entrada.

http://www.marceble.com/2010/02/simple-jquery-table-row-filter/

var data = this.value.split(" ");

$.each(data, function(i, v){
     jo = jo.filter("*:contains(''"+v+"'')");
});

Ahora, lo que necesito es que, en lugar de filtrar filas, contenga cada una de las palabras en el campo de entrada. Quiero filtrar todas las filas que contienen al menos una de las palabras en el campo de entrada.

Una forma que he intentado es tomar cada lista filtrada en una matriz ...

  var rows = new Array();

 $.each(data, function(i, v){
     rows[i] = jo.filter("*:contains(''"+v+"'')");
 });

En esta etapa, tengo que hacer una UNIÓN de todas las filas en la matriz de "filas" y mostrarlas. Estoy perdido en cómo hacer eso exactamente.

El script anterior está en acción: http://marceble.com/2010/jqueryfilter/index.html?TB_iframe=true&width=720&height=540

Si escribo "cat six" en el filtro, quiero mostrar tres filas.

Answer 1

Basado en la respuesta de @ CanalDoMestre. Agregué soporte para el filtro en blanco, arreglé un error tipográfico e impidí ocultar las filas para poder ver los encabezados de las columnas.

    $("#filterby").on(''keyup'', function() {
        if (this.value.length < 1) {
            $("#list tr").css("display", "");
        } else {
            $("#list tbody tr:not(:contains(''"+this.value+"''))").css("display", "none");
            $("#list tbody tr:contains(''"+this.value+"'')").css("display", "");
        }
    });

Answer 2

Echa un vistazo a este jsfiddle .

La idea es filtrar las filas con la función que recorrerá las palabras.

jo.filter(function (i, v) {
    var $t = $(this);
    for (var d = 0; d < data.length; ++d) {
        if ($t.is(":contains(''" + data[d] + "'')")) {
            return true;
        }
    }
    return false;
})
//show the rows that match.
.show();

EDITAR: Tenga en cuenta que no se puede lograr un filtro que no if ($t.text().toUpperCase().indexOf(data[d]) > -1) mayúsculas y minúsculas utilizando :contains() selector :contains() , pero afortunadamente hay una función de text() , por lo que la cadena de filtro debe estar en mayúsculas y la condición debe cambiar a if ($t.text().toUpperCase().indexOf(data[d]) > -1) . Mira este jsfiddle .

Answer 3

Escogí la respuesta de @nrodic (gracias, por cierto), pero tiene varios inconvenientes:

1) Si tiene filas que contienen "cat", "dog", "mouse", "cat dog", "cat dog mouse" (cada una en una fila separada), entonces cuando busque explícitamente "cat dog mouse", usted '' Se mostrarán las filas "gato", "perro", "ratón", "perro gato", "ratón perro gato".

2) .toLowerCase () no se implementó, es decir, cuando ingresa una cadena en minúscula, no se mostrarán las filas con el texto en mayúscula correspondiente.

Así que se me ocurrió una bifurcación del código de @nrodic, donde

var data = this.value; //plain text, not an array

y

jo.filter(function (i, v) {
    var $t = $(this);
    var stringsFromRowNodes = $t.children("td:nth-child(n)")
    .text().toLowerCase();
    var searchText = data.toLowerCase();
    if (stringsFromRowNodes.contains(searchText)) {
        return true;
        }
    return false;
})
//show the rows that match.
.show();

Aquí va el código completo: http://jsfiddle.net/jumasheff/081qyf3s/

Answer 4

No hay necesidad de construir una matriz. Puede dirigirse directamente al DOM.

Tratar :

rows.hide();
$.each(data, function(i, v){
    rows.filter(":contains(''" + v + "'')").show();
});

DEMO

EDITAR

Para descubrir las filas que califican sin mostrarlas inmediatamente, luego pásalas a una función:

$("#searchInput").keyup(function() {
    var rows = $("#fbody").find("tr").hide();
    var data = this.value.split(" ");
    var _rows = $();//an empty jQuery collection
    $.each(data, function(i, v) {
        _rows.add(rows.filter(":contains(''" + v + "'')");
    });
    myFunction(_rows);
});

DEMO ACTUALIZADA

Answer 5

Tengo una función muy simple:

function busca(busca){
    $("#listagem tr:not(contains(''"+busca+"''))").css("display", "none");
    $("#listagem tr:contains(''"+busca+"'')").css("display", "");
}

Answer 6

Utilicé la solución de Beetroot-Betroot, pero en lugar de usar contiene, usé contiene CN, lo que hace que sea insensible a mayúsculas y minúsculas.

$.extend($.expr[":"], {
"containsNC": function(elem, i, match, array) {
return (elem.textContent || elem.innerText ||
"").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
}
});

Answer 7

nrodic tiene una respuesta increíble, y solo quería darte una pequeña actualización para hacerte saber que con una pequeña función extra puedes extender el contenido de metido para que sea insensible al caso:

$.expr[":"].contains = $.expr.createPseudo(function(arg) {
    return function( elem ) {
        return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});

Answer 8

tr: not (: contiene (.... trabaja para mi

function busca(busca){
    $("#listagem tr:not(:contains(''"+busca+"''))").css("display", "none");
    $("#listagem tr:contains(''"+busca+"'')").css("display", "");
}