Beda Beda - 1 month ago 5
HTML Question

How to make table columns sortable

How do I sort the columns in the following table after clicking on the column headers. I would like Product Name and Price to ASCEND and DESCEND. I'm still a beginner in the PHP so please don't judge :) any help appreciated

<table style="width:50%" id="table1" align="center">
<tr>
<th>Product Name</a></th>
<th>Price</th>
<th>Image</th>
<th>Quantity</th>
<th>Buy</th>
</tr>
<?php
$connection = mysqli_connect('localhost','root','','part2');
$query="SELECT * FROM products";
$result=mysqli_query($connection, $query);
while ($row=mysqli_fetch_assoc($result)){
echo "<tr>";
echo "<td>";
echo $row['ProductName'];
echo "</td>";
echo "<td>";
echo "$".$row['Price'];
echo "</td>";
echo "<td>";
echo ' <img src="./images/'.$row['Image'].'" style="width:50px;height:50px"/><br />';
echo "</td>";
echo "<td>";
echo "<form method='post' action='buy.php'>";
echo "<fieldset>";
echo "<input type='number' name='quantity' style='width:30px'/>";
echo "</fieldset>";
echo "</form>";
echo "</td>";
echo "<td>";
echo '<a href="buy.php?id='. $row['ProductID'].'">Buy</a>';
echo "</td>";
echo "</tr>";
}
?>
</table>

Answer

Have a look at Datatables here. Its a JQuery plugin that does exactly what you need and more.

The link provided explains everything you need to do to make them work and provides a working demo on the site to play with and decide if its right for you.

I'll give you a quick guide to how to use it.

HTML

Include a reference to the Datatables JS file hosted on the content delivery network (CDN) between your head tags

<head> 
  <script src="cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
</head>

There is also an css file you can include used like this

<head> 
  <script src="cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
  <link  href="cdn.datatables.net/1.10.4/css/jquery.dataTables.min.css">
</head>

One final task, include JQuery in your site, a Javascript framework which reduces the amount of code required to perform tasks and allows for the use of pre-made third party plugins that are for the most freely available. Again you can use a CDN hosted copy of the JQuery framework.

<head> 
  <script src="cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>       // datatable javascript
  <link  href="cdn.datatables.net/1.10.4/css/jquery.dataTables.min.css">              // datatables css
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>  //jquery
</head>

Create a js file with the extension .js so for example myJSFile.js and include a reference in your header like you have done before, if placed inside a parent folder dont forget the path.

<head> 
  <script src="cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>       // datatable javascript
  <link  href="cdn.datatables.net/1.10.4/css/jquery.dataTables.min.css">              // datatables css
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>  //jquery
  <script type="text/javascript" src="myJSFile.js"></script>
</head>

JQuery

Here is the easiest part, to make your regular table a datatable, simply use its class/id as the selector for the javascript

$(document).ready(function()
{
    $('#Table1').DataTable();
});

The .ready() function determines when your script will execute, i.e. when DOM heirarchy has been created.

Comments