2

Tengo una tabla que tiene tres columnas y encima tengo dos filtros, la idea es que si se llena un filtro se muestren los resultados y si se llena el segundo se consulte de acuerdo a lo obtenido con el primer filtro, pero no he logrado hacer que funcione de esa forma, si alguno tiene una solución se lo agradezco.

$(document).ready(function(){
        $("#search").keyup(filtrar);
        $("#select").change(filtrar);
    })
    const filtrar = () => {
    console.log("true");
    const select = $('#select').val();
    const search = $('#search').val();
    
    let filtrar = false;
    const listFilter = [];
    if(select !== undefined && select.length > 0){
        const res = buscador("#select", 2, true);
        listFilter.push(...res);
        filtrar = true;
    }    
    if(search !== undefined && search !== ("")){
        res = buscador("#search", 0);
        listFilter.push(...res);
        filtrar = true;
    }
    
    if(filtrar){
        $.each($("#registros tbody tr"), function() { $(this).hide() });
        listFilter.forEach(function(item) { $(item).show() });
    }else{
        $.each($("#registros tbody tr"), function() { $(this).show() });
        return;
    }
}

const buscador = (selector, posicion, multiple=false, text=false) => {
    
    _this = $(selector)[0];
    list = [];
    if(multiple){
      for(let i = 0; i < $(_this).val().length; i++){

        const valor = $(_this)[0].selectedOptions[i];
        console.log($(valor).text());
        $.each($("#registros tbody tr"), function() {
          const element = $(this)[0].children[posicion];
            if($(element).text().toLowerCase().indexOf($(valor).text().toLowerCase()) !== -1){
            list.push(this);

          }

        });     

      }
    }else{
      $.each($("#registros tbody tr"), function() {
        const element = $(this)[0].children[posicion];
        const valor = text ? $(_this).text() : $(_this).val();
        if($(element).text().toLowerCase().indexOf(valor.toLowerCase()) !== -1){
          
          list.push(this);
        }
      });
    }
    return list;
    
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
</head>
<script>
    
</script>
<body>

<h2>HTML Table</h2>

<input id="search"/>
<select id="select" multiple>
    <option value="1">Germany</option>
    <option value="2">Mexico</option>
    <option value="3">Austria</option>
    <option value="4">UK</option>
    <option value="5">Canada</option>
    <option value="6">Italy</option>
</select>

<table id="registros">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

</body>
</html>

1 respuesta 1

2

Te pido disculpas pero me parecio demasiado complicado tu código. Es por esto que te propongo uno diferente.

  • Modificamos la tabla para mover los encabezados al thead y los registros al tbody
  • Modificamos la función filtrar:
    • Creamos un objeto donde vamos a guardar los filtros aplicados
    • Recorremos cada una de las filas y verificamos si cada uno de los filtros aplicados coinciden.

Ejemplo:

$(document).ready(function() {
  $("#search").keyup(filtrar);
  $("#select").change(filtrar);
})

const filtrar = () => {
  const filters = {};

  // Obtenemos los paises selecionados
  const $countries = $('#select option:selected');
  if ($countries.length > 0) {
    filters.countries = $countries.map(function() {
      return this.innerText.toLowerCase()
    }).get();
  }

  // Obtenemos el valor de search
  const $search = $('#search');
  if ($search.val() !== '') {
    filters.search = $search.val().toLowerCase();
  }

  // Si contiene filtros
  const totalFilters = Object.keys(filters).length;

  // Por cada fila
  $("#registros tr").each(function() {
    let $tr = $(this),
      $childs = $tr.children(),
      matchs = 0;

    // Si se filtro por pais
    if (filters.countries) {
      let text = $childs.get(2).innerText.toLowerCase();
      // Si detectamos alguno de los paises seleccionados
      let found = filters.countries.find(c => text == c);
      if (found !== undefined) matchs++;
    }

    // Si se filtro por empresa
    if (filters.search) {
      let text = $childs.get(0).innerText.toLowerCase();
      // Si incluye la cadena ingresada
      if (text.includes(filters.search)) matchs++;
    }

    // Si TODOS los filtros coinciden
    if (matchs == totalFilters) $tr.show();
    else $tr.hide();
  });
}
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<h2>HTML Table</h2>

<input id="search" />
<select id="select" multiple>
  <option value="1">Germany</option>
  <option value="2">Mexico</option>
  <option value="3">Austria</option>
  <option value="4">UK</option>
  <option value="5">Canada</option>
  <option value="6">Italy</option>
</select>

<table>
  <thead>
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody id="registros">
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
    </tr>
    <tr>
      <td>Ernst Handel</td>
      <td>Roland Mendel</td>
      <td>Austria</td>
    </tr>
    <tr>
      <td>Island Trading</td>
      <td>Helen Bennett</td>
      <td>UK</td>
    </tr>
    <tr>
      <td>Laughing Bacchus Winecellars</td>
      <td>Yoshi Tannamuri</td>
      <td>Canada</td>
    </tr>
    <tr>
      <td>Magazzini Alimentari Riuniti</td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
    </tr>
  </tbody>
</table>

1
  • Entiendo, sí lo hice un poco más complejo para que fuese más adaptable a cualquier pantalla, pero ya como veo que lo haces intentaré ajustarlo, te agradezco
    – DaxTter77
    el 6 abr. 2022 a las 19:55

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.