Tri des tableaux HTML

Question

Donc, fondamentalement, j'exécute une requête MySQL qui récupère les données de ma base de données et les affiche dans une présentation facile à lire pour l'utilisateur.

Nom-----Adresse----Vendeur

Vous comprenez l’essentiel. Maintenant, je veux que l'utilisateur trie le tableau HTML par vendeur. Comment puis-je le faire facilement à l’aide d’un menu déroulant ?

<code><div class='menu'>
  <ul>
    <li><a href='#'><span>Vendeur</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></code>

Answer 1

C'est une autre bibliothèque.

Les changements à apporter sont -

1. Ajouter des js de tri
   

2. Ajoutez le nom de la classe sortable au tableau.

Cliquez sur le titre du tableau pour trier le tableau en conséquence :

<script src="https://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>

<table class="sortable">
  <tr>
    <th>Name</th>
    <th>Address</th>
    <th>Sales Person</th>
  </tr>

  <tr class="item">
    <td>user:0001</td>
    <td>UK</td>
    <td>Melissa</td>
  </tr>
  <tr class="item">
    <td>user:0002</td>
    <td>France</td>
    <td>Justin</td>
  </tr>
  <tr class="item">
    <td>user:0003</td>
    <td>San Francisco</td>
    <td>Judy</td>
  </tr>
  <tr class="item">
    <td>user:0004</td>
    <td>Canada</td>
    <td>Skipper</td>
  </tr>
  <tr class="item">
    <td>user:0005</td>
    <td>Christchurch</td>
    <td>Alex</td>
  </tr>

</table>

Answer 2

Vérifiez si vous pouvez utiliser l'un des plugins JQuery mentionnés ci-dessous. Tout simplement fantastique, offre un large éventail d’options de travail et nécessite moins d’efforts à intégrer. :)

https://github.com/paulopmx/Flexigrid - Flexgrid
http://datatables.net/index - Tableaux de données.
https://github.com/tonytomov/jqGrid

Sinon, vous devez avoir un lien vers ces en-têtes qui appellent le script côté serveur pour appeler le tri.