Eu gostaria de saber como eu poderia ordenar a tabela, de forma de que o click captura posso ser usado para saber por qual coluna quero ordenar? poderia exemplificar essa situação?
Eu gostaria de saber como eu poderia ordenar a tabela, de forma de que o click captura posso ser usado para saber por qual coluna quero ordenar? poderia exemplificar essa situação?
Fala Felipe, tudo bem ?
Você poderia pensar em algo assim ... ter suas colunas de título com alguma forma de identificação, bem como o corpo de uma tabela. Exemplo:
<table>
<thead>
<tr>
<th class="titleColumn">Id</th>
<th class="titleColumn">Nome</th>
</tr>
</thead>
<tbody class="tableBody">
<tr>
<td>1</td>
<td>Felipe</td>
</tr>
<tr>
<td>2</td>
<td>Rafael</td>
</tr>
</tbody>
</table>
A partir daí adicionar o evento de click em cada um dos títulos de coluna. Exemplo de evento de clique que mostra no console o conteudo textual de cada elemento de th:
<script>
var columns = document.querySelectorAll('.titleColumn');
columns.forEach(c => c.addEventListener("click", (event) => {
console.log(event.target.textContent)
}))
</script>
A partir daí ao invés de imprimir a informação das th
s no console, você poderia chamar uma função que ordena passando o título da coluna selecionada.
<script>
// ordena dado um criterio
var sortBy = (criteria) => {
// aqui você seleciona as trs do tableBody
// var trs = document.querySelectorAll('.tableBody tr');
// e pode applicar qualquer algoritmo de ordenação no array de trs retornado, inclusive o proprio .sort() do Array JavaScript
// Dê uma olhada aqui https://www.w3schools.com/js/js_array_sort.asp
// apos ter o array ordenado você pode selecionar novamente o tableBody e adicionar as trs em ordem na propriedade .innerHTML do tbody
// algo como tbody.innerHTML = seu conteúdo html (trs ordenadas)
}
var columns = document.querySelectorAll('.titleColumn');
columns.forEach(c => c.addEventListener("click", (event) => {
var columnTitle = event.target.textContent;
sortBy(columnTitle);
}))
</script>
Dê uma pesquisada em ordenação. Isso se você quiser escrever totalmente essa lógica. Na prática em projetos utilizaríamos alguma lib JavaScript que já trouxesse o componente pronto, como por exemplo a lib: http://tablesorter.com/docs/
Espero ter ajudado no pensamento.
Abraço!