How to sort html table columns using PHP jQuery and Ajax

Whenever we use html table to show data in columns we often need some type of data sorting feature. Because sorting save lot of time to find desirable information. Sorting can be either in ascending order or in descending order. In this tutorial I am going to show you how to sort HTML table columns using PHP jQuery and Ajax.

Also read: How to Upload CSV and Save in Mysql database using PHP

Steps involved in PHP Sort html table columns:

  • Create mysql database connection
  • Get records from mysql database
  • Display all those records in html table
  • When click on any column heading then we use jquery ajax function and sort that column accordingly.

Setting Database: (config.php)

Fetch records and display in html table columns: (index.php)

In the above php and html code I have fetch records from users table and display all the records in respective column in html table. I used first row of table as column heading and all the heading have same class but different id with same order (asc). I will use table heading id for ordering purpose.

jQuery Ajax function for sorting table columns:

When I click on any column heading I will get its id in getNextSortOrder variable and I split that id into two variables. splitIDName has just heading name which i am using just for placeholder. splitOrder holds the current order type. getColumnName holds the column value. $.ajax is a jquery ajax function which will send and receive data from get_order_data.php and remove the previous table records and put new table records.

PHP file for Sorting:

This file gets post data. $columnName is using 2 functions first is strtolower and second is str_replace. Strtolower function converts $_POST['column'] value into lower and and str_replace function replace the blank space with underscore.

Also read:How to Create Simple Contact Form using Ajax, jQuery, Php and Mysql

 

Author: Ahsan Zameer

I am a web developer and love to search new stuff on web. Trying different approaches and ideas to make web developing more interesting and enjoyable.