HTML-Tabelle sortieren

Question

Also im Grunde bin ich eine Mysql-Abfrage, die Daten aus meiner Datenbank holt und zeigt es in einem leicht zu lesen Layout für meine Benutzer.

Name-----Address----Sales Person

Sie verstehen das Wesentliche. Und nun möchte ich, dass der Benutzer die Html-Tabelle nach, sagen wir, Vertriebsmitarbeitern sortiert. Wie kann ich das einfach mit einem Dropdown-Menü machen?

<div class='menu'>
  <ul>
    <li><a href='#'><span>Sales Person</span></a>
      <ul>
        <li><a href='#'><span>Melissa</span></a></li>
        <li><a href='#'><span>Justin</span></a></li>
        <li><a href='#'><span>Judy</span></a></li>
        <li><a href='#'><span>Skipper</span></a></li>
        <li><a href='#'><span>Alex</span></a></li>
      </ul>
    </li>
  </ul>
</div>

Answer 1

Eine einfachere Herangehensweise, die ich für eine einfache HTML-Tabelle gefunden habe, besteht darin, dieses Snippit bei der Definition Ihrer Tabellen-Tags für jede Ihrer Spalten einzufügen, wobei #datatable-basic die ID Ihres Tabellen-Tags ist und das n-te Kind Ihre Spalten darstellt:

 onclick="w3.sortHTML('#datatable-basic', '.item', 'td:nth-child(1)')

Ein vollständiges th-Tag würde also wie folgt aussehen:

<th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7"
                      onclick="w3.sortHTML('#datatable-basic', '.item', 'td:nth-child(4)')" >Date</th>

Dann braucht jedes Ihrer Zeilen-Tags eine Elementklasse wie diese, wenn Sie Flask verwenden, wie ich es tat

<tbody>
<tr class="item" > row text here</tr>
</tbody>

Dann müssen Sie dieses Skript in Ihre Vorlage einfügen:

<script src="https://www.w3schools.com/lib/w3.js"></script>

Ein vollständiges Arbeitsbeispiel in einem Codepen finden Sie hier: https://codepen.io/acity7/pen/QWmqgQR

Dies funktioniert auf der Grundlage von Code aus https://www.w3schools.com/w3js/w3js_sort.asp für eine sehr einfache Implementierung, um eine Tabelle zu sortieren, ohne eine Datenbank oder ausgefeiltere JS-Pakete wie Fancytable.js zu verwenden, die dynamisch nach Spalten sortiert werden können.

Bonusfunktion - so können Sie eine dynamische Sortierung einfach hinzufügen.

Fügen Sie im Body-Tag Ihrer Tabelle eine id wie id="table" ein:

<tbody id="table">
</tbody>

Fügen Sie diese Skripte in Ihre Kopfzeile ein:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script>
  $("#search").on("keyup", function() {
  var value = $(this).val().toLowerCase();
  $("#table tr").filter(function() {
    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
  });
});
  </script>

Und fügen Sie eine Suchleiste mit der id="search" hinzu, um die tr-Tags zu durchsuchen und sie direkt in Ihrer Tabelle zu filtern:

<input id="search" type="text" class="form-control"  placeholder="Search for name and email......">

Answer 2

Flexbox-basierte Tabellen können mit der Flexbox-Eigenschaft "order" leicht sortiert werden.

Hier ist ein Beispiel:

function sortTable() {
  let table = document.querySelector("#table")
  let children = [...table.children]
  let sortedArr = children.map(e => e.innerText).sort((a, b) => a.localeCompare(b));

  children.forEach(child => {
    child.style.order = sortedArr.indexOf(child.innerText)
  })
}

document.querySelector("#sort").addEventListener("click", sortTable)

#table {
  display: flex;
  flex-direction: column
}

<div id="table">
  <div>Melissa</div>
  <div>Justin</div>
  <div>Judy</div>
  <div>Skipper</div>
  <div>Alex</div>
</div>
<button id="sort"> sort </button>

Erläuterung

En sortTable Funktion extrahiert die Daten der Tabelle in ein Array, das dann in alphabetischer Reihenfolge sortiert wird. Danach durchlaufen wir die Tabellenelemente und weisen die CSS-Eigenschaft order gleich dem Index der Daten eines Elements in unserem sortierten Array.