3

Estoy creando un cuadro de búsqueda que filtra los datos de varias tablas, el filtro funciona bien hasta ahí.

La cuestión es que necesito "meter" cada tabla dentro de un acordeón. Las filas de cada tabla pueden llegar a miles, de ahí la necesidad de usar acordeones para no afectar el UI.

Estoy usando el atributo data-parent para que un acordeón se cierre si se abre otro.

Aquí va mi problema: El cuadro de búsqueda funciona únicamente en la tabla del acordeón que se encuentra visible en el momento.

Si incluyo el cuadro de búsqueda dentro de cada acordeón funciona, pero ese no es el objetivo.

Comparto mi código, hay algo que no esté tomando en cuenta?

Muchas Gracias.

PD:

El ejemplo lo tomé de estos dos tutoriales de W3Schools: aquí y aquí

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>

<style>
* {
  box-sizing: border-box;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  font-size: 18px;
}

#myTable th, #myTable td {
  text-align: left;
  padding: 12px;
}

#myTable tr {
  border-bottom: 1px solid #ddd;
}

#myTable tr.header, #myTable tr:hover {
  background-color: #f1f1f1;
}
</style>

<body>

<div class="container">
  <h2>Filtrar datos de tabla dentro de acordeones</h2>
  <br>
  
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">  


  <div id="accordion">
    <div class="card">
      <div class="card-header">
        <a class="card-link" data-toggle="collapse" href="#collapseOne">
          Collapsible Group Item #1
        </a>
      </div>
      <div id="collapseOne" class="collapse show" data-parent="#accordion">
        <div class="card-body">
         
         <table id="myTable" data-name="mytable" >
  <tr class="header">
    <th style="width:60%;">Name</th>
    <th style="width:40%;">Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>North/South</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Paris specialites</td>
    <td>France</td>
  </tr>
</table>
         
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
        Collapsible Group Item #2
      </a>
      </div>
      <div id="collapseTwo" class="collapse" data-parent="#accordion">
        <div class="card-body">
          
          <table id="myTable" data-name="mytable" >
  <tr class="header">
    <th style="width:60%;">Name</th>
    <th style="width:40%;">Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>North/South</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Paris specialites</td>
    <td>France</td>
  </tr>
</table>
          
          </div>
      </div>
    </div>
  
  <script>

    var accent_map = {'á':'a', 'é':'e', 'è':'e', 'í':'i','ó':'o','ú':'u','Á':'a', 'É':'e', 'è':'e', 'Í':'i','Ó':'o','Ú':'u'};
function accent_fold (s) {
if (!s) { return ''; }
var ret = '';
for (var i = 0; i < s.length; i++) {
  ret += accent_map[s.charAt(i)] || s.charAt(i);
}
return ret;
};


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

1 respuesta 1

3

Debido a que no obtuve respuesta, comparto la solución a la que llegué al final:


Primero agregué un ID a cada tabla en lugar de usar el mismo para todas y tomé como referencia para el script el atributo data-name en lugar de los ID's ya mencionados.

<table id="myTable1" data-name="mytable"> ... </table>
<table id="myTable2" data-name="mytable"> ... </table>

Luego para que el filtro funcionara en todas las tablas, inicio los acordeones siempre expandidos con la opción para el usuario de poder expandirlos u ocultarlos según desee:

<div class="accordion-option">
<a href="javascript:void(0)" class="toggle-accordion active" accordion-id="#accordion"></a>

aplicando content al css:

.accordion-option .toggle-accordion:before {
  content: "+ Expandir / Ocultar";
  }

.accordion-option .toggle-accordion.active:before {
  content: "- Expandir / Ocultar";
  }

Y el script:

<script>
    $(document).ready(function() {

  $(".toggle-accordion").on("click", function() {
    var accordionId = $(this).attr("accordion-id"),
      numPanelOpen = $(accordionId + ' .collapse.in').length;

    $(this).toggleClass("active");

    if (numPanelOpen == 0) {
      openAllPanels(accordionId);
    } else {
      closeAllPanels(accordionId);
    }
  })

  openAllPanels = function(aId) {
    console.log("setAllPanelOpen");
    $(aId + ' .panel-collapse:not(".in")').collapse('show');
  }
  closeAllPanels = function(aId) {
    console.log("setAllPanelclose");
    $(aId + ' .panel-collapse.in').collapse('hide');
  }

});
    </script>

De este modo logro que el filtro de búsqueda se aplique a todas las tablas dentro de los acordeones expandidos :)

Tu Respuesta

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

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