Sorting the Table by clicking Header with AJAX

With sorting the list it is easier for the user to locate items in a sorted list than unsorted. It rearranges the data in specific order (ascending or descending).

You can either use PHP or AJAX to get the sorted data.

I am using AJAX to sort the list in this tutorial.

In the demonstration, I am displaying the employee’s list and attach click event on the table column header. Whenever header gets clicked then send an AJAX request with column name to sort with.

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, to define 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.

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

Sending AJAX request when table header column gets clicked where pass column name and sort order. On the successful callback update table list with response and update sort order value in the hidden field (<input type='hidden' id='sort'>).

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 how you can sort table content based on column header clicked. For sorting, I have used AJAX and update table list on successfully callback.

You can check my earlier post where I showed how you can sort pagination with PHP on header click.

Related Post

Spread the love

Be First to Comment

Leave a Reply

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