Beruf Name Ort Land  Tel.
Arzt Willi Kassel Hessen 0561/74400
Nutte Lisa Dortmund NRW 0231/876789
Bergmann Heinz Dortmund NRW 0231/347698
Nutte Anna Bochum NRW 02212/23456
Arzt Hugo Freiburg Baden 0765/23456
Nutte Gina Kassel Hessen 0561/12345
Fotograf Bernd Gummersbach NRW 02261/803750
Fotograf Michel Herdecke NRW 02330/2013
Buchhalter Felix Düsseldorf NRW 0211/171819

Achtung!

die css-Klasse der Tabelle muss exakt übernommen werden, sonst funktioniert das nicht.

Zusätzlich darf man nicht vergessen, den css-code, der in dem Divi-Layoutmodul steht, einzusetzen.

Mustertabelle, mit css-Klasse, das ist die Tabelle von oben.

<table class="table table-hover table-bordered results" style="border-collapse: collapse; width: 100%; height: 240px;" border="1">
<tbody>
<tr style="height: 24px;">
<td style="width: 25%; height: 24px;"><span style="color: #ff0000;"><strong>Beruf</strong></span></td>
<td style="width: 25%; height: 24px;"><span style="color: #ff0000;"><strong>Name</strong></span></td>
<td style="width: 25%; height: 24px;"><span style="color: #ff0000;"><strong>Ort</strong></span></td>
<td style="width: 12.5%; height: 24px;"><span style="color: #ff0000;"><strong>Land</strong></span></td>
<td style="width: 12.5%;"><span style="color: #ff0000;"><strong> Tel.</strong></span></td>
</tr>
<tr style="height: 24px;">
<td style="width: 25%; height: 24px;">Arzt</td>
<td style="width: 25%; height: 24px;">Willi</td>
<td style="width: 25%; height: 24px;">Kassel</td>
<td style="width: 12.5%; height: 24px;">Hessen</td>
<td style="width: 12.5%;">0561/74400</td>
</tr>
<tr style="height: 24px;">
<td style="width: 25%; height: 24px;">Nutte</td>
<td style="width: 25%; height: 24px;">Lisa</td>
<td style="width: 25%; height: 24px;">Dortmund</td>
<td style="width: 12.5%; height: 24px;">NRW</td>
<td style="width: 12.5%;">0231/876789</td>
</tr>
<tr style="height: 24px;">
<td style="width: 25%; height: 24px;">Bergmann</td>
<td style="width: 25%; height: 24px;">Heinz</td>
<td style="width: 25%; height: 24px;">Dortmund</td>
<td style="width: 12.5%; height: 24px;">NRW</td>
<td style="width: 12.5%;">0231/347698</td>
</tr>
<tr style="height: 24px;">
<td style="width: 25%; height: 24px;">Nutte</td>
<td style="width: 25%; height: 24px;">Anna</td>
<td style="width: 25%; height: 24px;">Bochum</td>
<td style="width: 12.5%; height: 24px;">NRW</td>
<td style="width: 12.5%;">02212/23456</td>
</tr>
<tr style="height: 24px;">
<td style="width: 25%; height: 24px;">Arzt</td>
<td style="width: 25%; height: 24px;">Hugo</td>
<td style="width: 25%; height: 24px;">Freiburg</td>
<td style="width: 12.5%; height: 24px;">Baden</td>
<td style="width: 12.5%;">0765/23456</td>
</tr>
<tr style="height: 24px;">
<td style="width: 25%; height: 24px;">Nutte</td>
<td style="width: 25%; height: 24px;">Gina</td>
<td style="width: 25%; height: 24px;">Kassel</td>
<td style="width: 12.5%; height: 24px;">Hessen</td>
<td style="width: 12.5%;">0561/12345</td>
</tr>
<tr style="height: 24px;">
<td style="width: 25%; height: 24px;">Fotograf</td>
<td style="width: 25%; height: 24px;">Bernd</td>
<td style="width: 25%; height: 24px;">Gummersbach</td>
<td style="width: 12.5%; height: 24px;">NRW</td>
<td style="width: 12.5%;">02261/803750</td>
</tr>
<tr style="height: 24px;">
<td style="width: 25%; height: 24px;">Fotograf</td>
<td style="width: 25%; height: 24px;">Michel</td>
<td style="width: 25%; height: 24px;">Herdecke</td>
<td style="width: 12.5%; height: 24px;">NRW</td>
<td style="width: 12.5%;">02330/2013</td>
</tr>
<tr style="height: 24px;">
<td style="width: 25%; height: 24px;">Buchhalter</td>
<td style="width: 25%; height: 24px;">Felix</td>
<td style="width: 25%; height: 24px;">Düsseldorf</td>
<td style="width: 12.5%; height: 24px;">NRW</td>
<td style="width: 12.5%;">0211/171819</td>
</tr>
</tbody>
</table>

Das ist der css-Code aus dem DIVI-Layout

.results tr[visible='false'],
.no-result{
  display:none;
}

.results tr[visible='true']{
  display:table-row;
}

.counter{
  color:#666666;
  font-size:24px;
  padding-top:20px;
}
.table{
  font-size:24px;
}
.search{
  font-size:24px;
}

Das ist das JS für die Seite

<script>$(document).ready(function() {
  $(".search").keyup(function () {
    var searchTerm = $(".search").val();
    var listItem = $('.results tbody').children('tr');
    var searchSplit = searchTerm.replace(/ /g, "'):containsi('")
    
  $.extend($.expr[':'], {'containsi': function(elem, i, match, array){
        return (elem.textContent || elem.innerText || '').toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
    }
  });
    
  $(".results tbody tr").not(":containsi('" + searchSplit + "')").each(function(e){
    $(this).attr('visible','false');
  });

  $(".results tbody tr:containsi('" + searchSplit + "')").each(function(e){
    $(this).attr('visible','true');
  });

  var jobCount = $('.results tbody tr[visible="true"]').length;
    $('.counter').text(jobCount + ' Treffer');

  if(jobCount == '0') {$('.no-result').show();}
    else {$('.no-result').hide();}
		  });
});</script>

So sieht die Anordnung der Divi-Module dann aus.
DSGVO Cookie Consent mit Real Cookie Banner