Sorting table from database through PHP

Question

I need to sort my table from database by clicking on the header where is Price to sort it from Low to High and if I click again then sort High to Low. I am missing how to include this in php. I tried this solution but for some reason it is not working. Feel free repair this solution or offer something else

I am using PDO method

<?php
   include 'inc/header.php';
   $cars = $db->prepare("SELECT name, price FROM cars");
   $cars->execute();
   $cars = $cars->fetchAll(PDO::FETCH_ASSOC);
?>

Here is HTML:

<table>
   <thead>
     <tr>
       <th>Name</th>
       <th>
         <a href="?orderBy=price">Price</a>
       </th>
     </tr>
   </thead>
   <tbody>
     <?php  foreach($cars as $car):     ?>
      <tr>
       <td>
           <?php echo $car['name'];?>
       </td>
       <td>
          <?php echo $car['price'];?>€
       </td>
      </tr>
    <?php endforeach;?>
  </tbody>
</table>

<?php
  $orderBy = array('price');    
  $order = 'type';
  if (isset($_GET['orderBy']) && in_array($_GET['orderBy'], $orderBy)) {
     $order = $_GET['orderBy'];
  }
  $query = 'SELECT * FROM cars ORDER BY '.$order;
)
?>

Answer 1

Just use Jquery DataTables , add an ID to your table then initialize Data Tables, it will allow you to sort your data by any column you want. Super easy to use and also it add cool features, such as pagination in your table for it not to be too long if you have many results. also options to export your table to pdf and other types easy.

<?php
include 'inc/header.php';
$cars = $db->prepare("SELECT name, price FROM cars");
$cars->execute();
$cars = $cars->fetchAll(PDO::FETCH_ASSOC);
 ?>

<!-- include dataTables from the cdn -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.css">

<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.js"></script>


 <table id="dataTable">
   <thead>
     <tr>
       <th>Name</th>
       <th>
         <a href="?orderBy=price">Price</a>
       </th>
     </tr>
   </thead>
     <tbody>
       <?php  foreach($cars as $car):     ?>
      <tr>
       <td>
           <?php echo $car['name'];?>
       </td>
       <td>
          <?php echo $car['price'];?>€
       </td>
      </tr>
      <?php endforeach;?>
   </tbody>
 </table>
<script type="text/javascript">
    $(document).ready(function() {
    $('#dataTable').DataTable();
} );
</script>

DataTable Results :

Your results will look like.

As you can see in the image you can easily sort by anything, with less hustle.

Answer 2

use table sorter plugin

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
   <script src="http://tablesorter.com/__jquery.tablesorter.min.js"></script> 
$(document).ready(function() 
{ 
    $("#myTable").tablesorter(); 
} 
); 
<table id="myTable" >
 <thead>
 <tr>
   <th>Name</th>
   <th>
     <a href="?orderBy=price">Price</a>  //u can give the table heading
   </th>
 </tr>
</thead>
 <tbody>
   <?php  foreach($cars as $car):     ?>
  <tr>
   <td>
       <?php echo $car['name'];?>
   </td>
   <td>
      <?php echo $car['price'];?>€
   </td>
  </tr>
  <?php endforeach;?>
 </tbody>
</table>

u can achieve table sorter by jquery in easiest way