Sorting the Table by clicking Header with AJAX

We generally require sorting feature in the Table layout when there is many columns or lots of data.

In this tutorial, I show you How you can implement it using AJAX and PHP within your project.

In the demonstration, I am creating a table layout which shows the list of employees and adding click event in header column. Within click, calling a function in which passing column name as an argument and sending AJAX request.

For ordering using hidden field.

Sorting the Table by clicking header with AJAX


Contents

  1. Configuration
  2. HTML
  3. PHP
  4. jQuery
  5. Final Output
  6. Conclusion

1. Configuration

Create a new config.php, from here setting the database connection.

Completed Code

<?php

$host = "localhost"; /* Host name */
$user = "root"; /* User */
$password = ""; /* Password */
$dbname = "tutorial"; /* Database name */

$con = mysql_connect($host, $user, $password) or die("Unable to connect");

// selecting database
$db = mysql_select_db($dbname, $con) or die("Database not found");

2. HTML

Listing employee records in <table id=’empTable’>  and adding onclick in table header <span>. Calling sortTable() function which takes column name and for sorting order creating a hidden field id=’sort’ which default value is asc.

Completed Code

<?php 
 include "config.php";
?>
<!doctype html>
<html>
 <head>
 <title>Sorting the table by clicking header with AJAX</title>
 <link href='style.css' rel='stylesheet' type='text/css'>
 <script src='jquery-1.12.0.min.js' type='text/javascript'></script>
 <script src='script.js' type='text/javascript'></script>
 
 </head>
 <body>
 <div class='container'>
 <input type='hidden' id='sort' value='asc'>
 <table width='100%' id='empTable' border='1' cellpadding='10'>
 <tr>
  <th><span onclick='sortTable("emp_name");'>Name</span></th>
  <th><span onclick='sortTable("salary");'>Salary</span></th>
  <th><span onclick='sortTable("gender");'>Gender</span></th>
  <th><span onclick='sortTable("city");'>City</span></th>
  <th><span onclick='sortTable("email");'>Email</a></th>
 </tr>
 <?php 
 $query = "SELECT * FROM employee order by id asc";
 $result = mysql_query($query);
 while($row = mysql_fetch_array($result)){
  $name = $row['emp_name'];
  $salary = $row['salary'];
  $gender = $row['gender'];
  $city = $row['city'];
  $email = $row['email'];

?>
 <tr>
  <td><?php echo $name; ?></td>
  <td><?php echo $salary; ?></td>
  <td><?php echo $gender; ?></td>
  <td><?php echo $city; ?></td>
  <td><?php echo $email; ?></td>
 </tr>
 <?php
 }
 ?>
 </table>
 </div>
 </body>
</html>

3. PHP

Create a new fetch_details.php file which is used for AJAX request.

Using $_POST values in the SELECT query, and storing the result in $html and return it.

Completed Code

<?php

include "config.php";

$columnName = $_POST['columnName'];
$sort = $_POST['sort'];

$select_query = "SELECT * FROM employee order by ".$columnName." ".$sort." ";

$result = mysql_query($select_query);

$html = '';
while($row = mysql_fetch_array($result)){
 $name = $row['emp_name'];
 $salary = $row['salary'];
 $gender = $row['gender'];
 $city = $row['city'];
 $email = $row['email'];

$html .= "<tr>
 <td>".$name."</td>
 <td>".$salary."</td>
 <td>".$gender."</td>
 <td>".$city."</td>
 <td>".$email."</td>
 </tr>";
}

echo $html;

4. jQuery

Create a new script.js file.

Sending AJAX request and passing column name and sort order as data. On success callback removing table rows and appending response in <table id=’empTable’>.

Changing hidden field value to asc or desc based on condition.

Completed Code

function sortTable(columnName){
 
 var sort = $("#sort").val();
 $.ajax({
  url:'fetch_details.php',
  type:'post',
  data:{columnName:columnName,sort:sort},
  success: function(response){
 
   $("#empTable tr:not(:first)").remove();
 
   $("#empTable").append(response);
   if(sort == "asc"){
     $("#sort").val("desc");
   }else{
     $("#sort").val("asc");
   }
 
  }
 });
}

5. Final Output


6. Conclusion

I showed you How to sort table content based on column header clicked. For sorting, we have used AJAX which sending when header gets clicked.

If you want to know How to do it in without AJAX only with PHP I recommend you to check out my earlier post – Table sort on header click in the pagination using PHP. Where I am using <a > in the header field and sending column name and sort order.

Spread the love

Related Post

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *