Ordenação da tabela HTML

então, basicamente, estou executando uma consulta mysql que obtém dados da minha base de dados e exibe-o em um layout fácil de ler para os meus usuários. Nome---- - Endereço - - - - Vendedor

Já percebeste. E agora eu quero deixar o usuário classificar a tabela html por digamos pessoa de vendas. Como é que eu faria isso facilmente usando uma ementa? Isto é o que tenho até agora....Só não sei como dizer ao menu para classificar a tabela 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>
Qualquer ajuda é muito apreciada.

Author: Brian Tompsett - 汤莱恩, 2012-05-21
Source

3 answers

Verifique se você pode ir com qualquer um dos plugins JQuery abaixo mencionados. Simplesmente impressionante e fornecer uma ampla gama de opções para trabalhar, e menos dores para integrar. :)

Http://tablesorter.com/docs-Classificador De Mesa.
https://github.com/paulopmx/Flexigrid - Flexgrid
http://datatables.net/index - tabelas de Dados.
https://github.com/tonytomov/jqGrid

Se não, você precisa ter um link para os cabeçalhos da tabela que chama um programa do lado do servidor para invocar o tipo.

 30
Author: verisimilitude, 2015-11-20 20:36:19

Apenas outra opção usando um plugin jquery, breedjs : Se você colocar os dados em um objeto js, você pode fazer exatamente assim: 

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>
Agora, sempre que quiser Ordenar por um vendedor, basta chamá-lo: 
breed.sort({
    scope: 'people',
    selector: 'salesperson'
});

Se quiser ordenar ao clicar em <th>, faça isto: 

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

E modificar isto no HTML: 

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

Exemplo de trabalho em violino

 0
Author: João Paulo, 2016-04-03 02:15:10

Outra abordagem para classificar a tabela HTML. (com base em 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
Author: Yi-Ting Liu, 2018-08-02 08:02:26