6

Tenho uma tabela HTML que traz informações do banco de dados.

Gostaria de saber se existe a algum meio de classificar de A a Z e vice e versa estes dados clicando em cima do nome da coluna na tabela?

Estes dados não são fixos, são dinâmicos.

Tabela:

<table>
  <thead>
    <tr>
      <th>ST</th>
      <th>BITRUCK</th>
      <th>Motorista</th>
      <th>Data Saída</th>
      <th>Origem</th>
    </tr>
  </thead>
  <tbody>
    <?php foreach ($controller->Lista($objProg) as $objProg) { ?>
    <tr>
      <td>
        <?php echo $objProg->getplaca(); ?></td>
      <td>
        <?php echo $objProg->getmot(); ?></td>
      <td>
        <?php echo $objProg->getorig(); ?></td>
      <td>
        <?php echo $objProg->getdest(); ?></td>
      <td>
        <?php echo $objProg->getmal(); ?></td>
    </tr>
  <?php } ?>
 </tbody>
</table>
5
  • 1
    Você queria um ordenar na coluna?
    – Marconi
    24/05/2016 às 17:13
  • Sim, consequentemente ordenando as outras. 24/05/2016 às 17:15
  • @Kevin.F, as informações da pergunta, não são suficientes para uma resposta a seu problema, poderia inserir como estes dados estão no seu HTML, e como envia do banco, se utiliza algum framework, etc. Quanto mais informações colocar melhor conseguiremos de ajudar :)
    – David
    24/05/2016 às 17:24
  • @Kevin.F postei uma resposta.
    – Marconi
    24/05/2016 às 17:28
  • @Marconi Ok, era isso só vou testar aqui. 24/05/2016 às 17:29

2 Respostas 2

10

Gosto do plugin tablesorter, e caso precise de mais detalhes ou queria fazer algo especifico basta dá uma lidinha na documentação.

Simples e fácil e você não precisa reinventar a roda, veja funcionando:

$('.tablesorter').tablesorter();
th {
   cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/tablesorter/2.17.4/js/jquery.tablesorter.min.js"></script>
<table class="tablesorter">
   <thead>
      <tr>
         <th>Cliente</th>
         <th>Nota</th>
         <th>Valor</th>
         <th>Total</th>
         <th>Data</th>
         <th>Classifica</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Jorge Silva</td>
         <td>1</td>
         <td>1.2</td>
         <td>2.58</td>
         <td>20/04/1987 11:54:00</td>
         <td>A</td>
      </tr>
      <tr>
         <td>Osvaldo Monteiro</td>
         <td>2</td>
         <td>1.3</td>
         <td>2.55</td>
         <td>20/05/2014 11:55:00</td>
         <td>X</td>
      </tr>
      <tr>
         <td>Alana Oliveira</td>
         <td>3</td>
         <td>1.99</td>
         <td>2.51</td>
         <td>20/06/1998 11:59:00</td>
         <td>Z</td>
      </tr>
      <tr>
         <td>Silveira</td>
         <td>432</td>
         <td>0.99</td>
         <td>9.51</td>
         <td>20/06/2020 22:59:00</td>
         <td>Y</td>
      </tr>
   </tbody>
</table>

FONTE

0
3

Você pode utilizar o meu plugin easyTable

Ele vem com ordenação por colunas que você precisa, filtro de pesquisa em colunas especificas ou em todas.

Para utilizar é necessário ter jQuery no projeto, no link tem a forma de utilização e demonstração.

Agora se você quiser apenas a ordenação simples. você pode utilizar esse snippet em javascript puro:

function sortTable(table, col, reverse) {
  var tb = table.tBodies[0],
    tr = Array.prototype.slice.call(tb.rows, 0),
    i;
  reverse = -((+reverse) || -1);
  tr = tr.sort(function(a, b) {
    return reverse * (a.cells[col].textContent.trim()
      .localeCompare(b.cells[col].textContent.trim())
    );
  });
  for (i = 0; i < tr.length; ++i) tb.appendChild(tr[i]);
}

function makeSortable(table) {
  var th = table.tHead,
    i;
  th && (th = th.rows[0]) && (th = th.cells);
  if (th) i = th.length;
  else return;
  while (--i >= 0)(function(i) {
    var dir = 1;
    th[i].addEventListener('click', function() {
      sortTable(table, i, (dir = 1 - dir))
    });
  }(i));
}

function makeAllSortable(parent) {
  parent = parent || document.body;
  var t = parent.getElementsByTagName('table'),
    i = t.length;
  while (--i >= 0) makeSortable(t[i]);
}

window.onload = function() {
  makeAllSortable();
};
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th>3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Por padrão ele ordena todas as tabelas, por que pega pelo seletor tagName, mas você pode defini-lo por class ou id.

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .