paginar - tablas dinamicas html javascript

Cómo realizar una búsqueda en tiempo real y filtrar en una tabla HTML

Question

Estuve buscando en Google y buscando Stack Overflow por un tiempo, pero no puedo evitar este problema.

Tengo una tabla HTML estándar, que contiene, por ejemplo, fruta. Al igual que:

<table>
   <tr>
      <td>Apple</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Grapes</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Orange</td>
      <td>Orange</td>
   </tr>
</table>

Sobre esto tengo un cuadro de texto, que me gustaría buscar en la tabla a medida que el usuario escribe. Entonces, si escriben Gre por ejemplo, la fila naranja de la tabla desaparece, dejando la manzana y las uvas. Si continuaban y escribían Green Gr la fila de Apple desaparecería, dejando solo las uvas. Espero que esto esté claro.

Y, si el usuario eliminara parte o la totalidad de su consulta del cuadro de texto, me gustaría que reapareciesen todas las filas que ahora coinciden con la consulta.

Si bien sé cómo eliminar una fila de la tabla en jQuery, tengo poca idea sobre cómo hacer la búsqueda y eliminar las filas de forma selectiva en función de esto. ¿Hay una solución simple para esto? ¿O un plugin?

Si alguien pudiera señalarme en la dirección correcta, sería genial.

Gracias.

Answer 1

Solución pura de Javascript:

Funciona para TODAS las columnas y no distingue entre mayúsculas y minúsculas:

function search_table(){
  // Declare variables 
  var input, filter, table, tr, td, i;
  input = document.getElementById("search_field_input");
  filter = input.value.toUpperCase();
  table = document.getElementById("table_id");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don''t match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td") ; 
    for(j=0 ; j<td.length ; j++)
    {
      let tdata = td[j] ;
      if (tdata) {
        if (tdata.innerHTML.toUpperCase().indexOf(filter) > -1) {
          tr[i].style.display = "";
          break ; 
        } else {
          tr[i].style.display = "none";
        }
      } 
    }
  }
}

Answer 2

¡Gracias @dfsq por el código tan útil!

He hecho algunos ajustes y tal vez otros también les gusten. Me aseguré de que puedas buscar varias palabras sin tener una coincidencia estricta.

Filas de ejemplo:

• Manzanas y peras
• Manzanas y Plátanos
• Manzanas y naranjas
• ...

Podría buscar ''ap pe'' y reconocería la primera fila
Podría buscar ''banana apple'' y reconocería la segunda fila

Demostración: http://jsfiddle.net/JeroenSormani/xhpkfwgd/1/

var $rows = $(''#table tr'');
$(''#search'').keyup(function() {
  var val = $.trim($(this).val()).replace(/ +/g, '' '').toLowerCase().split('' '');

  $rows.hide().filter(function() {
    var text = $(this).text().replace(//s+/g, '' '').toLowerCase();
    var matchesSearch = true;
    $(val).each(function(index, value) {
      matchesSearch = (!matchesSearch) ? false : ~text.indexOf(value);
    });
    return matchesSearch;
  }).show();
});

Answer 3

Aquí está la mejor solución para buscar dentro de la tabla HTML mientras cubre toda la tabla , (todos td, tr en la tabla), javascript puro y lo más breve posible:

<input id=''myInput'' onkeyup=''searchTable()'' type=''text''>

<table id=''myTable''>
   <tr>
      <td>Apple</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Grapes</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Orange</td>
      <td>Orange</td>
   </tr>
</table>

<script>
function searchTable() {
    var input, filter, found, table, tr, td, i, j;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    table = document.getElementById("myTable");
    tr = table.getElementsByTagName("tr");
    for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td");
        for (j = 0; j < td.length; j++) {
            if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
                found = true;
            }
        }
        if (found) {
            tr[i].style.display = "";
            found = false;
        } else {
            tr[i].style.display = "none";
        }
    }
}
</script>

Answer 4

Creé estos ejemplos.

indexOf simple de búsqueda

var $rows = $(''#table tr'');
$(''#search'').keyup(function() {
    var val = $.trim($(this).val()).replace(/ +/g, '' '').toLowerCase();

    $rows.show().filter(function() {
        var text = $(this).text().replace(//s+/g, '' '').toLowerCase();
        return !~text.indexOf(val);
    }).hide();
});

Demostración : http://jsfiddle.net/7BUmG/2/

Búsqueda de expresiones regulares

Una funcionalidad más avanzada que usa expresiones regulares le permitirá buscar palabras en cualquier orden en la fila. Funcionará igual si escribe apple green o green apple :

var $rows = $(''#table tr'');
$(''#search'').keyup(function() {

    var val = ''^(?=.*//b'' + $.trim($(this).val()).split(//s+/).join(''//b)(?=.*//b'') + '').*$'',
        reg = RegExp(val, ''i''),
        text;

    $rows.show().filter(function() {
        text = $(this).text().replace(//s+/g, '' '');
        return !reg.test(text);
    }).hide();
});

Demostración : http://jsfiddle.net/dfsq/7BUmG/1133/

Rebote

Cuando implemente el filtrado de tablas con búsquedas en varias filas y columnas, es muy importante que considere el rendimiento y la velocidad / optimización de búsqueda. Simplemente diciendo que no debe ejecutar la función de búsqueda con cada pulsación de tecla, no es necesario. Para evitar que el filtrado se ejecute con demasiada frecuencia, debe evitar rebotarlo. El ejemplo del código anterior se convertirá en:

$(''#search'').keyup(debounce(function() {
    var val = $.trim($(this).val()).replace(/ +/g, '' '').toLowerCase();
    // etc...
}, 300));

Puede elegir cualquier implementación de rebote, por ejemplo desde Lodash _.debounce , o puede usar algo muy simple como el que uso en las próximas demostraciones (rebote desde here ): http://jsfiddle.net/7BUmG/6230/ y http://jsfiddle.net/7BUmG/6231/ .

Answer 5

Encontré la respuesta de dfsq sus comentarios extremadamente útiles. Hice algunas modificaciones menores aplicables a mí (y lo estoy publicando aquí, en caso de que sea de alguna utilidad para otros).

1. Usar class como ganchos, en lugar de elementos de tabla tr
2. Búsqueda / comparación de texto dentro de una class secundaria mientras se muestra / oculta el elemento primario
3. Haciéndolo más eficiente almacenando los elementos de texto $rows en una matriz solo una vez (y evitando $rows.length veces el cálculo)

var $rows = $(''.wrapper'');
var rowsTextArray = [];

var i = 0;
$.each($rows, function() {
  rowsTextArray[i] = $(this).find(''.fruit'').text().replace(//s+/g, '' '').toLowerCase();
  i++;
});

$(''#search'').keyup(function() {
  var val = $.trim($(this).val()).replace(/ +/g, '' '').toLowerCase();
  $rows.show().filter(function(index) {
    return (rowsTextArray[index].indexOf(val) === -1);
  }).hide();
});

span {
  margin-right: 0.2em;
}

<input type="text" id="search" placeholder="type to search" />

<div class="wrapper"><span class="number">one</span><span class="fruit">apple</span></div>
<div class="wrapper"><span class="number">two</span><span class="fruit">banana</span></div>
<div class="wrapper"><span class="number">three</span><span class="fruit">cherry</span></div>
<div class="wrapper"><span class="number">four</span><span class="fruit">date</span></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 6

puedes usar Javascript nativo como este

<script>
function myFunction() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
}
</script>

Answer 7

tengo un plugin jquery para esto. Utiliza jquery-ui también. Puedes ver un ejemplo aquí http://jsfiddle.net/tugrulorhan/fd8KB/1/

$("#searchContainer").gridSearch({
            primaryAction: "search",
            scrollDuration: 0,
            searchBarAtBottom: false,
            customScrollHeight: -35,
            visible: {
                before: true,
                next: true,
                filter: true,
                unfilter: true
            },
            textVisible: {
                before: true,
                next: true,
                filter: true,
                unfilter: true
            },
            minCount: 2
        });

Answer 8

El complemento Datatable JS es también una buena alternativa para accomedate la función de búsqueda para la tabla html

var table = $(''#example'').DataTable();

// #myInput is a <input type="text"> element
$(''#myInput'').on( ''keyup'', function () {
    table.search( this.value ).draw();
} );

https://datatables.net/examples/basic_init/zero_configuration.html