How to sort a table from A to Z?

Question

How to sort a table from A to Z?

Navigation

#1 by (9 votes)
#2 by (3 votes)

5

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

I would like to know if there is any way to sort from A to Z and vice versa and vice versa by clicking on the name of the column in the table?

This data is not fixed, it is 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>

php jquery html5

asked by anonymous 24.05.2016 / 18:52

2 answers

3

You can use my plugin easyTable

It comes with sorting by columns you need, search filter on specific columns or 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 simple sorting. 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 by picking the tagName selector, but you can set it by class or id.

24.05.2016 / 22:10

while listing result of 4 in 4 within div Is there a way to redirect to another page when I click on a div?

score 9 · Accepted Answer

I like the tablesorter plugin , and if you need more details or would like to do something specific, you just have to get a lid on the documentation.

Simple and easy and you do not have to reinvent the wheel, see it working:

$('.tablesorter').tablesorter();

th {
   cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="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