How to classify a table from A to Z?

Question

I have an HTML table that brings information from the database.

I wonder if there is any way to sort from A to Z and vice versa this data by clicking on the column name in the table?

These data are not fixed, they are dynamic.

Table:

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

Answer 1

I like the plugin tablesorter, and if you need more details or wanted to do something specific just give a tip in the documentation.

Simple and easy and you don’t need to reinvent the wheel, see working:

$('.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>

SOURCE

Answer 2

You can use my plugin easyTable

It comes with sorting by columns you need, search filter in specific columns or in all.

To use it is necessary to have jQuery in the project, the link has the form of use and demonstration.

Now if you just want the simple ordering. you can use this snippet in pure javascript:

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>

By default it sorts all tables, why pick by tagname selector, but you can set it by class or id.