web-dev-qa-db-fra.com

Sorte de tableau HTML

Donc, fondamentalement, je lance 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 mes utilisateurs . Nom ----- Adresse ---- Vendeur

Vous obtenez le Gist. Et maintenant, je veux laisser l’utilisateur trier le tableau html par un vendeur, par exemple. Comment pourrais-je le faire facilement en utilisant un menu déroulant? C’est ce que j’ai jusqu’à présent ... Je ne sais pas vraiment comment dire au menu de trier le tableau html.

<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>
</div>

Toute aide est grandement appréciée.

htmlsorting
12
h3tr1ck

Vérifiez si vous pouvez aller avec l’un des plugins JQuery mentionnés ci-dessous. Tout simplement génial et offre un large éventail d'options pour travailler, et moins de difficultés à intégrer. :)

http://tablesorter.com/docs/ - Trieur de tables. 
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 de table qui appelle un script côté serveur pour appeler le tri.

31
verisimilitude

Une autre approche pour trier le tableau HTML. (basé sur W3.JS HTML Sort)

<script src="https://www.w3schools.com/lib/w3.js"></script>
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />
<p>Click the <strong>table headers</strong> to sort the table accordingly:</p>

<table id="usersTable" class="w3-table-all">
  <tr>
    <th onclick="w3.sortHTML('#usersTable', '.item', 'td:nth-child(1)')" style="cursor:pointer">Name</th>
    <th onclick="w3.sortHTML('#usersTable', '.item', 'td:nth-child(2)')" style="cursor:pointer">Address</th>
    <th onclick="w3.sortHTML('#usersTable', '.item', 'td:nth-child(3)')" style="cursor:pointer">Sales Person</th>
  </tr>

  <tr class="item">
    <td>user:2911002</td>
    <td>UK</td>
    <td>Melissa</td>
  </tr>
  <tr class="item">
    <td>user:2201002</td>
    <td>France</td>
    <td>Justin</td>
  </tr>
  <tr class="item">
    <td>user:2901092</td>
    <td>San Francisco</td>
    <td>Judy</td>
  </tr>
  <tr class="item">
    <td>user:2801002</td>
    <td>Canada</td>
    <td>Skipper</td>
  </tr>
  <tr class="item">
    <td>user:2901009</td>
    <td>Christchurch</td>
    <td>Alex</td>
  </tr>

</table>

0
Yi-Ting Liu

Juste une autre option utilisant un plugin jquery, breedjs : Si vous placez les données dans un objet js, vous pouvez faire comme si:

var data = {
    people: [
        {name: 'a', address: 'c', salesperson: 'b'},
        {name: 'b', address: 'b', salesperson: 'a'},
        {name: 'c', address: 'a', salesperson: 'c'},
    ]
};

breed.run({
    scope: 'people',
    input: data
});

HTML:

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Address</th>
            <th>Sales Person</th>
        </tr>
    </thead>
    <tbody>
        <tr b-scope="people" b-loop="person in people">
            <td b-sort="name">{{person.name}}</td>
            <td b-sort="address">{{person.address}}</td>
            <td b-sort="salesperson">{{person.salesperson}}</td>
        </tr>
    </tbody>
</table>

Maintenant, chaque fois que vous voulez trier par vendeur, appelez-le:

breed.sort({
    scope: 'people',
    selector: 'salesperson'
});

Si vous souhaitez trier lorsque vous cliquez sur <th>, procédez comme suit:

$("th").click(function(){
    breed.sort({
        scope: 'people',
        selector: $(this).attr('sort')
    });
});

Et modifiez ceci en HTML:

<th sort='name'>Name</th>
<th sort='address'>Address</th>
<th sort='salesperson'>Sales Person</th>

Exemple de travail sur le violon

0
João Paulo