Nesse post iremos ver como ordenar colunas de tabelas usando Bootstrap de modo que ao clicarmos em um título/cabeçalho da tabela ocorra seja ordenada em ordem alfabética ou numérica.
É importância inserir a função de ordenação de colunas em tabelas ao clicar nos títulos das colunas pois facilita a visualização e organização dos dados, permitindo que os usuários classifiquem as informações de acordo com suas preferências. Isso melhora a usabilidade e a experiência do usuário ao interagir com as tabelas. O melhor de tudo isso é que Bootstrap facilita muito o passo a passo para chegarmos lá, pois faz acontecer com poucas linhas.
O post Estilos para Tabelas no Bootstrap anterior fala de modo básico como estilizar as tabelas com Bootstrap, mas aqui iremos etilizá-las e inserir as ações de ordenação de colunas.
Para ver todos os posts sobre Bootstrap clique aqui.
Bootstrap table
Iremos usar o plugin Bootstrap table para alcançarmos o objetivo.
O que é esse tal de Bootstrap table? Segundo o site oficial, é uma tabela estendida para integração com alguns dos frameworks CSS mais utilizados. Ele Suporta Bootstrap, UI Semântica, Bulma, Material Design, Foundation.
Inserindo Links CDN
Já temos um post falando o que é CDN, mas, basicamente, é um:
CDN significa Content Delivery Network e são servidores localizados em algum local seguro que contém cópias de conteúdo estático (como imagens, arquivos CSS e JavaScript) de um site.
Em resumo, CDN é uma maneira onde conseguimos usar um recurso(ou framework em nosso caso) apenas colocando o link desse recurso em nossa página web. Não precisamos baixar o recurso(ou framework) pra nosso computador.
Vamos trabalhar usando esses links da internet(ou CDN). Esses links são: JQuery, CSS, JavaScript, Bootstrap e o do plugin da Bootstrap table.
O link do JQuery deve vir primeiro, depois Bootstrap.js e depois o do plugin plugins JavaScript.
CSS: Copie e cole a linha abaixo em dentro de <head> do HTML antes de todas as outras folhas de estilo para carregar nosso CSS.
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.22.1/dist/bootstrap-table.min.css">
JQUERY: Essa linha deve ser colada dentro da seção <head> do HTML e depois da CSS:
<script src="//code.jquery.com/jquery.js"></script>
JavaScript(ou JS apenas): Coloque a linha abaixo perto do final da sua página, logo antes da tag de fechamento </body>.
<script src="https://unpkg.com/bootstrap-table@1.22.1/dist/bootstrap-table.min.js"></script>
Obs.: para mim, só funcionou corretamente quando coloquei essa linha duas vezes, antes da tag <head> e também antes da </body>.
RESULTADO:
Ficará assim os links postos em nossa página:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Exemplo com Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="//code.jquery.com/jquery.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.22.1/dist/bootstrap-table.min.css">
</head>
<body>
<script src="https://unpkg.com/bootstrap-table@1.22.1/dist/bootstrap-table.min.js"></script>
</body>
</html>
Tabela de Exemplo
Geralmente, os valores da tabela serão trazidos pelo banco de dados. Aqui, criaremos uma trabela simples, apenas para servir de aprendizado.
Dentro da tag <table> colocamos data-toggle=”table”
<table data-toggle="table" >
Dentro da tag <th> da nossa tabela, colocamos as marcações class=”data-field=”Nome” data-sortable=”true”
<th class="data-field="Nome" data-sortable="true">Nome</th>
Com essas duas linhas estaremos transformando o cabeçalho da coluna “nome” em um botão que ao clicar ordenará a coluna.
Se quiser deixar outras colunas ordenáveis basta acrescentar data-field.. e data-sortable… dentro da tag <th>
Veja o resultado final do meu teste:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Exemplo com Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="//code.jquery.com/jquery.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.22.1/dist/bootstrap-table.min.css">
</head>
<body>
<div class="container m-4 col-sm ">
<table data-toggle="table" >
<thead>
<tr>
<th class="data-field="Nome" data-sortable="true">Nome</th>
<th>Endereço</th>
<th>Telefone</th>
<th>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>João da Silva</td>
<td>Rua das Flores, 123</td>
<td>(11) 9999-9999</td>
<td>joao.silva@example.com</td>
</tr>
<tr>
<td>Maria do Carmo</td>
<td>Avenida Paulista, 456</td>
<td>(11) 8888-8888</td>
<td>maria.carmo@example.com</td>
</tr>
<tr>
<td>José Pereira</td>
<td>Rua da Liberdade, 789</td>
<td>(11) 7777-7777</td>
<td>jose.pereira@example.com</td>
</tr>
<tr>
<td>Ana Paula</td>
<td>Avenida Rebouças, 1011</td>
<td>(11) 6666-6666</td>
<td>ana.paula@example.com</td>
</tr>
<tr>
<td>Pedro Santos</td>
<td>Rua Augusta, 1234</td>
<td>(11) 5555-5555</td>
<td>pedro.santos@example.com</td>
</tr>
</tbody>
</table>
</div>
<script src="https://unpkg.com/bootstrap-table@1.22.1/dist/bootstrap-table.min.js"></script>
</body>
</html>
Poderíamos colocar mais opções para melhorar aparência e layout, ficando assim:
...
<table data-toggle="table" data-classes="table table-hover table-condensed" data-striped="true" data-sort-name="Nome"data-sort-order="desc" >
<thead>
<tr>
<th class="col-xs-1" data-field="Nome" data-sortable="true">Nome</th>
...
Agora, quando clicamos em cima de “Nome” essa coluna será ordenada.
Outras opções do Bootstrap que podemos usar na tabela
Posso citar algumas opções que podemos usar:
- data-sort-order=”desc” para defiir o comportamento inicial da ordem
- data-formatter=”runningFormatter” para acrescentar uma contagem ao final da tabela. Crie uma nova <th> e coloque essa opção dentro
- data-pagination=”true” coloque dentro de <table> para mostrar paginação.
- data-select-item-name=”myRadioName” adicione dentro de <th> e <td>
- data-click-to-select=”true” essa opção é similar á de cima, mas nos permite selecionar mais de uma opção.