jQuery Ajax Column Sort

Sorting MySQL column via an AJAX call will prevent us from sending the column name and column order in URL. So, it makes page URL simple. In the last article we have seen about how to sort MySQL column using PHP with page referesh.


HTML Header with AJAX Call

This HTML code contains database results with column name in table header. On clicking this header the AJAX call is sent to the server to get new results with the given sort order. The code is,

	if(!empty($result))	 { ?>
	<table class="table-content">
			  <th width="30%" onClick="orderColumn('post_title','<?php echo $postTitleNextOrder; ?>')"><span>Post Title</span></th>
			  <th width="50%" onClick="orderColumn('description','<?php echo $descriptionNextOrder; ?>')"><span>Description</span></th>          
			  <th width="20%" onClick="orderColumn('post_at','<?php echo $postAtNextOrder; ?>')"><span>Post Date</span></th>	  
			while($row = mysqli_fetch_array($result)) {
				<td><?php echo $row["post_title"]; ?></td>
				<td><?php echo $row["description"]; ?></td>
				<td><?php echo $row["post_at"]; ?></td>
<?php } ?>

jQuery AJAX Order Column Function

This jQuery script is sending an AJAX request to order_column.php by passing column_name and order. PHP code will read these AJAX request and use the post parameters to get database results in new order. This results will be send as a AJAX response.

	function orderColumn(column_name,column_order) {
			url: "order-column.php",
			type: "POST",
			success: function(data){	


This jQuery code tutorial was published on March 9, 2016.

↑ Back to Top