{"id":14687,"date":"2023-11-30T13:44:55","date_gmt":"2023-11-30T16:44:55","guid":{"rendered":"https:\/\/categoriaoutros.com.br\/?p=14687"},"modified":"2023-11-30T14:34:35","modified_gmt":"2023-11-30T17:34:35","slug":"ordenar-colunas-de-tabelas-usando-bootstrap","status":"publish","type":"post","link":"https:\/\/categoriaoutros.com.br\/?p=14687","title":{"rendered":"Ordenar Colunas de Tabelas Usando Bootstrap"},"content":{"rendered":"\n

Nesse post iremos ver como ordenar colunas de tabelas usando Bootstrap de modo que ao clicarmos em um t\u00edtulo\/cabe\u00e7alho da tabela ocorra seja ordenada em ordem alfab\u00e9tica ou num\u00e9rica.<\/p>\n\n\n

\n
\"Ordenar
Ordenar Colunas de Tabelas Usando Bootstrap<\/figcaption><\/figure><\/div>\n\n\n

\u00c9 import\u00e2ncia inserir a fun\u00e7\u00e3o de ordena\u00e7\u00e3o de colunas em tabelas ao clicar nos t\u00edtulos das colunas pois facilita a visualiza\u00e7\u00e3o e organiza\u00e7\u00e3o dos dados, permitindo que os usu\u00e1rios classifiquem as informa\u00e7\u00f5es de acordo com suas prefer\u00eancias. Isso melhora a usabilidade e a experi\u00eancia do usu\u00e1rio ao interagir com as tabelas. O melhor de tudo isso \u00e9 que Bootstrap facilita muito o passo a passo para chegarmos l\u00e1, pois faz acontecer com poucas linhas.<\/p>\n\n\n\n

O post Estilos para Tabelas no Bootstrap<\/a> anterior fala de modo b\u00e1sico como estilizar as tabelas com Bootstrap, mas aqui iremos etiliz\u00e1-las e inserir as a\u00e7\u00f5es de ordena\u00e7\u00e3o de colunas.<\/p>\n\n\n\n

Para ver todos os posts sobre Bootstrap clique aqui<\/a>.<\/p>\n\n\n\n

Bootstrap table<\/h2>\n\n\n\n

Iremos usar o plugin Bootstrap table<\/a><\/strong> para alcan\u00e7armos o objetivo. <\/p>\n\n\n\n

O que \u00e9 esse tal de Bootstrap table<\/strong>? Segundo o site oficial, \u00e9 uma tabela estendida para integra\u00e7\u00e3o com alguns dos frameworks CSS mais utilizados. Ele Suporta Bootstrap, UI Sem\u00e2ntica, Bulma, Material Design, Foundation. <\/p>\n\n\n\n

<\/p>\n\n\n\n

Inserindo Links CDN <\/h2>\n\n\n\n

J\u00e1 temos um post falando o que \u00e9 CDN<\/a>, mas, basicamente, \u00e9 um:<\/p>\n\n\n\n

\n

CDN<\/strong>\u00a0significa\u00a0Content Delivery Network<\/strong>\u00a0e s\u00e3o servidores localizados em algum local seguro que cont\u00e9m c\u00f3pias de conte\u00fado est\u00e1tico (como imagens, arquivos CSS e JavaScript) de um site.<\/p>\n<\/blockquote>\n\n\n\n

Em resumo, CDN \u00e9 uma maneira onde conseguimos usar um recurso(ou framework em nosso caso) apenas colocando o link desse recurso em nossa p\u00e1gina web. N\u00e3o precisamos baixar o recurso(ou framework) pra nosso computador. <\/p>\n\n\n\n

Vamos trabalhar usando esses links da internet(ou CDN). Esses links s\u00e3o: JQuery, CSS, JavaScript, Bootstrap e o do plugin da Bootstrap table. <\/p>\n\n\n\n

O link do JQuery deve vir primeiro, depois Bootstrap.js e depois o do plugin plugins JavaScript.<\/p>\n\n\n\n

CSS<\/strong>: Copie e cole a linha abaixo em dentro de <head><\/strong> do HTML antes de todas as outras folhas de estilo para carregar nosso CSS.<\/p>\n\n\n\n

\n\n<<\/font>link<\/font> <\/font>rel<\/font>=<\/font>"stylesheet"<\/font> <\/font>href<\/font>=<\/font>"https:\/\/unpkg.com\/bootstrap-table@1.22.1\/dist\/bootstrap-table.min.css"<\/font>><\/font>\n\n<\/pre>\n\n\n\n
\n\n\n\n
JQUERY<\/strong>: Essa linha deve ser colada dentro da se\u00e7\u00e3o <head> do HTML e depois da CSS:<\/p>\n\n\n\n
<<\/font>script<\/font> <\/font>src<\/font>=<\/font>"\/\/code.jquery.com\/jquery.js"<\/font>><\/<\/font>script<\/font>><\/font><\/pre>\n\n\n\n
\n\n\n\n
JavaScript<\/strong>(ou JS apenas): Coloque a linha abaixo perto do final da sua p\u00e1gina, logo antes da tag de fechamento <\/<\/mark>body><\/strong>.<\/p>\n\n\n\n
\n\n<<\/font>script<\/font> <\/font>src<\/font>=<\/font>"https:\/\/unpkg.com\/bootstrap-table@1.22.1\/dist\/bootstrap-table.min.js"<\/font>><\/<\/font>script<\/font>><\/font>\n\n<\/pre>\n\n\n\n
Obs.: para mim, s\u00f3 funcionou corretamente quando coloquei essa linha duas vezes, antes da tag <head> e tamb\u00e9m antes da <\/body>.<\/p>\n\n\n\n
RESULTADO:<\/strong><\/p>\n\n\n\n
Ficar\u00e1 assim os links postos em nossa p\u00e1gina:<\/p>\n\n\n\n
<!DOCTYPE html><\/font>\n<<\/font>html<\/font> <\/font>lang<\/font>=<\/font>"en"<\/font>><\/font>\n<<\/font>head<\/font>><\/font>\n  <\/font><<\/font>title<\/font>><\/font>Exemplo com Bootstrap<\/font><\/<\/font>title<\/font>><\/font>\n  <\/font><<\/font>meta<\/font> <\/font>charset<\/font>=<\/font>"utf-8"<\/font>><\/font>\n  <\/font><<\/font>meta<\/font> <\/font>name<\/font>=<\/font>"viewport"<\/font> <\/font>content<\/font>=<\/font>"width=device-width, initial-scale=1"<\/font>><\/font>\n\n  <\/font><<\/font>script<\/font> <\/font>src<\/font>=<\/font>"\/\/code.jquery.com\/jquery.js"<\/font>><\/<\/font>script<\/font>><\/font>\n  <\/font><<\/font>link<\/font> <\/font>href<\/font>=<\/font>"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.2\/dist\/css\/bootstrap.min.css"<\/font> <\/font>rel<\/font>=<\/font>"stylesheet"<\/font>><\/font>\n  <\/font><<\/font>script<\/font> <\/font>src<\/font>=<\/font>"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.2\/dist\/js\/bootstrap.bundle.min.js"<\/font>><\/<\/font>script<\/font>><\/font>\n  <\/font><<\/font>link<\/font> <\/font>rel<\/font>=<\/font>"stylesheet"<\/font> <\/font>href<\/font>=<\/font>"https:\/\/unpkg.com\/bootstrap-table@1.22.1\/dist\/bootstrap-table.min.css"<\/font>><\/font>\n\n<\/<\/font>head<\/font>><\/font>\n\n\n<<\/font>body<\/font>><\/font>\n\n  <<\/font>script<\/font> <\/font>src<\/font>=<\/font>"https:\/\/unpkg.com\/bootstrap-table@1.22.1\/dist\/bootstrap-table.min.js"<\/font>><\/<\/font>script<\/font>><\/font>\n\n<\/<\/font>body<\/font>><\/font>\n        \n<\/<\/font>html<\/font>><\/font>\n<\/pre>\n\n\n\n
Tabela de Exemplo<\/h2>\n\n\n\n
Geralmente, os valores da tabela ser\u00e3o trazidos pelo banco de dados. Aqui, criaremos uma trabela simples, apenas para servir de aprendizado.<\/p>\n\n\n\n
Dentro da tag <table> colocamos data-toggle=”table”<\/strong><\/p>\n\n\n\n
<<\/font>table<\/font>  data-toggle=<\/font>"table"<\/font> ><\/font>\n<\/pre>\n\n\n\n
Dentro da tag <th> da nossa tabela, colocamos as marca\u00e7\u00f5es class=”data-field=”Nome” data-sortable=”true”<\/strong><\/p>\n\n\n\n
<<\/font>th<\/font> <\/font>class<\/font>=<\/font>"data-field="<\/font>Nome<\/font>" data-sortable="<\/font>true<\/font>">Nome<\/th><\/font><\/pre>\n\n\n\n
Com essas duas linhas estaremos transformando o cabe\u00e7alho da coluna “nome” em um bot\u00e3o que ao clicar ordenar\u00e1 a coluna.<\/p>\n\n\n\n
Se quiser deixar outras colunas orden\u00e1veis basta acrescentar data-field.. e data-sortable… dentro da tag <th><\/p>\n\n\n\n
Veja o resultado final do meu teste:<\/p>\n\n\n\n
<!DOCTYPE html><\/font>\n<<\/font>html<\/font> <\/font>lang<\/font>=<\/font>"en"<\/font>><\/font>\n<<\/font>head<\/font>><\/font>\n  <\/font><<\/font>title<\/font>><\/font>Exemplo com Bootstrap<\/font><\/<\/font>title<\/font>><\/font>\n  <\/font><<\/font>meta<\/font> <\/font>charset<\/font>=<\/font>"utf-8"<\/font>><\/font>\n  <\/font><<\/font>meta<\/font> <\/font>name<\/font>=<\/font>"viewport"<\/font> <\/font>content<\/font>=<\/font>"width=device-width, initial-scale=1"<\/font>><\/font>\n\n  <\/font><<\/font>script<\/font> <\/font>src<\/font>=<\/font>"\/\/code.jquery.com\/jquery.js"<\/font>><\/<\/font>script<\/font>><\/font>\n  <\/font><<\/font>link<\/font> <\/font>href<\/font>=<\/font>"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.2\/dist\/css\/bootstrap.min.css"<\/font> <\/font>rel<\/font>=<\/font>"stylesheet"<\/font>><\/font>\n  <\/font><<\/font>script<\/font> <\/font>src<\/font>=<\/font>"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.2\/dist\/js\/bootstrap.bundle.min.js"<\/font>><\/<\/font>script<\/font>><\/font>\n  <\/font><<\/font>link<\/font> <\/font>rel<\/font>=<\/font>"stylesheet"<\/font> <\/font>href<\/font>=<\/font>"https:\/\/unpkg.com\/bootstrap-table@1.22.1\/dist\/bootstrap-table.min.css"<\/font>><\/font>\n\n<\/<\/font>head<\/font>><\/font>\n\n\n<<\/font>body<\/font>><\/font>\n\n<<\/font>div<\/font> <\/font>class<\/font>=<\/font>"container m-4 col-sm  "<\/font>><\/font>\n\n\n        <<\/font>table<\/font>  data-toggle=<\/font>"table"<\/font> ><\/font>\n  <<\/font>thead<\/font>><\/font>\n    <<\/font>tr<\/font>><\/font>\n       <<\/font>th<\/font> <\/font>class<\/font>=<\/font>"data-field="<\/font>Nome<\/font>" data-sortable="<\/font>true<\/font>">Nome<\/th><\/font>\n    <th>Endere\u00e7o<\/th><\/font>\n      <th>Telefone<\/th><\/font>\n      <th>E-mail<\/th><\/font>\n    <\/tr><\/font>\n  <\/thead><\/font>\n  <tbody><\/font>\n    <tr><\/font>\n      <td>Jo\u00e3o da Silva<\/td><\/font>\n      <td>Rua das Flores, 123<\/td><\/font>\n      <td>(11) 9999-9999<\/td><\/font>\n      <td>joao.silva@example.com<\/td><\/font>\n    <\/tr><\/font>\n    <tr><\/font>\n      <td>Maria do Carmo<\/td><\/font>\n      <td>Avenida Paulista, 456<\/td><\/font>\n      <td>(11) 8888-8888<\/td><\/font>\n      <td>maria.carmo@example.com<\/td><\/font>\n    <\/tr><\/font>\n    <tr><\/font>\n      <td>Jos\u00e9 Pereira<\/td><\/font>\n      <td>Rua da Liberdade, 789<\/td><\/font>\n      <td>(11) 7777-7777<\/td><\/font>\n      <td>jose.pereira@example.com<\/td><\/font>\n    <\/tr><\/font>\n    <tr><\/font>\n      <td>Ana Paula<\/td><\/font>\n      <td>Avenida Rebou\u00e7as, 1011<\/td><\/font>\n      <td>(11) 6666-6666<\/td><\/font>\n      <td>ana.paula@example.com<\/td><\/font>\n    <\/tr><\/font>\n    <tr><\/font>\n      <td>Pedro Santos<\/td><\/font>\n      <td>Rua Augusta, 1234<\/td><\/font>\n      <td>(11) 5555-5555<\/td><\/font>\n      <td>pedro.santos@example.com<\/td><\/font>\n    <\/tr><\/font>\n  <\/tbody><\/font>\n<\/table><\/font>\n\n        <\/div><\/font>\n\n<script src="<\/font>https:\/\/unpkg.com\/bootstrap-table@1.22.1\/dist\/bootstrap-table.<\/font>min<\/font>.js<\/font>"><\/script><\/font>\n\n<\/body><\/font>\n\n<\/html><\/font>\n<\/pre>\n\n\n\n
Poder\u00edamos colocar mais op\u00e7\u00f5es para melhorar apar\u00eancia e layout, ficando assim:<\/p>\n\n\n\n
\n...\n<<\/font>table<\/font>  data-toggle=<\/font>"table"<\/font> data-classes=<\/font>"table table-hover table-condensed"<\/font> data-striped=<\/font>"true"<\/font> data-sort-name=<\/font>"Nome"<\/font>data-sort-order=<\/font>"desc"<\/font> ><\/font>\n  <<\/font>thead<\/font>><\/font>\n    <<\/font>tr<\/font>><\/font>\n       <<\/font>th<\/font> <\/font>class<\/font>=<\/font>"col-xs-1"<\/font> data-field=<\/font>"Nome"<\/font> data-sortable=<\/font>"true"<\/font>><\/font>Nome<\/<\/font>th<\/font>><\/font>\n...\n<\/pre>\n\n\n
\n
\"Bootstrap:
Bootstrap: Tabela com coluna orden\u00e1vel num\u00e9rico e alfabeticamente<\/figcaption><\/figure><\/div>\n\n\n
Agora, quando clicamos em cima de “Nome”<\/strong> essa coluna ser\u00e1 ordenada.<\/p>\n\n\n\n
Outras op\u00e7\u00f5es do Bootstrap que podemos usar na tabela <\/h2>\n\n\n\n
Posso citar algumas op\u00e7\u00f5es que podemos usar:<\/p>\n\n\n\n