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.
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.
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>
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>