Home / Questions / 196233
Accepted
Jheyman Mejia
Asked: 2020-09-13 13:44:10 +0800 CST 2020-09-13 13:44:10 +0800 CST

Filter search of a table within accordion

  • 772

I'm creating a lookup box that filters data from multiple tables, the filter works fine so far.

The point is that I need to "wrap" each table into an accordion. The rows of each table can reach thousands, hence the need to use accordions so as not to affect the UI.

I am using the attribute data-parentso that one accordion will close if another one is opened.

Here's my problem : The search box works only on the currently visible accordion table.

If I include the search box inside each accordion it works, but that's not the point.

I share my code, is there something that I am not taking into account?

Thank you so much.

P.S:

I took the example from these two W3Schools tutorials: here and here

<!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>

javascript

1 Answers

  1. Best Answer

    Since I didn't get an answer, I'm sharing the solution I came to in the end:

    First I added an ID to each table instead of using the same one for all of them and I took the attribute as a reference for the script data-nameinstead of the aforementioned ID's.

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

    Then to make the filter work on all tables, I started the always expanded accordions with the option for the user to be able to expand or hide them as desired:

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

    applying contentto the css:

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

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

    And the 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>

    This way I get the search filter applied to all the tables inside the expanded accordions :)

    • 3