CSS, HTML, Java Script, JQuery, sorting

How to sort HTML Table Columns in ascending and descending by JQuery and JAVA Script and show sorting image

2 Comments

Below example is for sorting HTML table on ascending and descending order after click on header name. Based on sorting will display ascending and descending images.

Source Code

Copy your ascending and descending images on images folder and change path according to you project configuration.


Sort Table

var order;
function sortTable(col)
{
	changeSortHeaderImage(col);
	//get list of all rows of table content except header
	var rows=$('#employeeTbl tbody tr').get();

	rows.sort(function(a,b){
	var A= $(a).children('td').eq(col).text().toUpperCase();
	var B= $(b).children('td').eq(col).text().toUpperCase();
	//sort in ascending order
	if(order=="asc")
		{
	return (A <b> B) ? 1 : 0);
		}
	//sort in descnding order
	if(order=="desc")
		{
	return (B <a> A) ? 1 : 0);
		}
	});
	//iterate each row of table for changing order
	$.each(rows, function(index, row) {
	    $('#employeeTbl').children('tbody').append(row);
	  });
}
//Change image for column sorting
function changeSortHeaderImage(col)
{	

	var imgArr= document.getElementById("employeeTbl").getElementsByTagName('input');
    var altAtr;
    for (i = 0; i &lt; imgArr.length; i++) {

            altAtr=imgArr[i].getAttribute(&quot;alt&quot;);

              if(i==col &amp;&amp; &quot;asc&quot; == altAtr)
                 {
                    imgArr[i].setAttribute(&quot;src&quot;, &quot;images/desc.png&quot;);
                    imgArr[i].setAttribute(&quot;alt&quot;, &quot;desc&quot;);
                    order=&quot;desc&quot;;
                  }
           else if (i==col &amp;&amp; (&quot;nosort&quot; == altAtr ||  &quot;desc&quot; == altAtr))
                 {
                 imgArr[i].setAttribute(&quot;src&quot;, &quot;images/asc.png&quot;);
                 imgArr[i].setAttribute(&quot;alt&quot;, &quot;asc&quot;);
                 order=&quot;asc&quot;;
                 }
           else
                 {
                 imgArr[i].setAttribute(&quot;src&quot;, &quot;images/nosort.png&quot;);
                 imgArr[i].setAttribute(&quot;alt&quot;, &quot;nosort&quot;);
                 }
           }

}</a></b></pre>
&nbsp;
<table id="employeeTbl">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>Designation</th>
<th>Salary</th>
</tr>
<tr>
<td>1</td>
<td>Saurabh Gupta</td>
<td>34</td>
<td>Sr Lead</td>
<td>50000</td>
</tr>
<tr>
<td>2</td>
<td>Gaurav Gupta</td>
<td>30</td>
<td>Software Engineer</td>
<td>40000</td>
</tr>
<tr>
<td>3</td>
<td>Ranjith Kumar</td>
<td>45</td>
<td>Manager</td>
<td>60000</td>
</tr>
<tr>
<td>4</td>
<td>Sakshi Mehta</td>
<td>25</td>
<td>Trainee</td>
<td>25000</td>
</tr>
<tr>
<td>5</td>
<td>Arun Roi</td>
<td>35</td>
<td>Tester</td>
<td>28000</td>
</tr>
<tr>
<td>6</td>
<td>Nitin Verma</td>
<td>40</td>
<td>SEO</td>
<td>55000</td>
</tr>
</thead>
</table>
<pre><b><a>

Initial Table Without Soring

HTML Table Sort column by Jquery Intial
Initial Employee Detail Table Without Sorting

Sort in Ascending Order for Column Designation

HTML Table Sort columns by Jquery Ascending
Employee Table  with Ascending Order soring for column  Designation

Sort in Descending Order for column Designation

HTML Table Sort columns by Jquery descending
Employee Table  with Desscending Order soring for column  Designation

 Summary

In above example. I try to cover below topics.

  • How to create HTML Table with column header and rows column content.
  • Apply JQuery and Java Script for sorting ascending and descending order on click each columns.
  • On click Change columns header sorting images by Java Script.
  • How to apply CSS on table column headers and background image.

2 thoughts on “How to sort HTML Table Columns in ascending and descending by JQuery and JAVA Script and show sorting image”


  1. Nice tutorial Sourabh. Can this be made possible without header images in tables? Is it possible by Instead of images just clicking on the header text will change the sort order?


    1. Images are just for visualization currently which column is sorted in ascending and descending order.
      If your requirement is to remove images from header you can comment out line changeSortHeaderImage(col); in java script and from html you can remove input tags for images in tags.