Learning jQuery

HTML tables are useful for displaying data in a tabular format. Tables tend to look elegant and clean. However, HTML tables are even more useful when data is sorted in columns in an ascending or descending order. In this post, we’ll learn how to sort an HTML table using jQuery without using any jQuery plugins. Though, there are plenty of jQuery plugins available which can perform the same task, but as a best practice if things can be achieved via plain jQuery code, you should avoid using jQuery plugins.

HTML Markup

First of all, create a standard HTML table on the page. For the demo, our table has 3 columns: Name, Age, Country and some random data. Our goal is to make these columns clickable and then sort the table data accordingly.

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Maria Anders</td>
    <td>30</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Francisco Chang</td>
    <td>24</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Roland Mendel</td>
    <td>100</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Helen Bennett</td>
    <td>28</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Yoshi Tannamuri</td>
    <td>35</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Giovanni Rovelli</td>
    <td>46</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>Narendra Sharma</td>
    <td>56</td>
    <td>India</td>
  </tr>
  <tr>
    <td>Alex Smith</td>
    <td>59</td>
    <td>USA</td>
  </tr>
</table>

CSS

The following CSS classes are used to style the tables:

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}
td,th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}
tr:nth-child(even) {
  background-color: #dddddd;
}

Now, the HTML table will look like this,

Let’s add the CSS classes required for highlighting the clicked column, adding up or down symbols, indicating the sorting order and a CSS class to highlight columns on mouse over event:

.focus {
  background-color: #ff00ff;
  color: #fff;
  cursor: pointer;
  font-weight: bold;
}
.selected {
  background-color: #ff00ff;
  color: #fff;
  font-weight: bold;
}
.asc:after {  content: "\25B2"; }
.desc:after { content: "\25BC"; }

jQuery Code

To sort the HTML table, the solution would be to get the complete table data in an array and then perform the sort operation on the array based on the clicked column and considering the sort order.

Below is the complete jQuery code:

$(document).ready(function() {
  $('th').each(function(col) {
    $(this).hover(
    function() { $(this).addClass('focus'); },
    function() { $(this).removeClass('focus'); }
  );
    $(this).click(function() {
      if ($(this).is('.asc')) {
        $(this).removeClass('asc');
        $(this).addClass('desc selected');
        sortOrder = -1;
      }
      else {
        $(this).addClass('asc selected');
        $(this).removeClass('desc');
        sortOrder = 1;
      }
      $(this).siblings().removeClass('asc selected');
      $(this).siblings().removeClass('desc selected');
      var arrData = $('table').find('tbody >tr:has(td)').get();
      arrData.sort(function(a, b) {
        var val1 = $(a).children('td').eq(col).text().toUpperCase();
        var val2 = $(b).children('td').eq(col).text().toUpperCase();
        if($.isNumeric(val1) && $.isNumeric(val2))
        return sortOrder == 1 ? val1-val2 : val2-val1;
        else
           return (val1 < val2) ? -sortOrder : (val1 > val2) ? sortOrder : 0;
      });
      $.each(arrData, function(index, row) {
        $('tbody').append(row);
      });
    });
  });
});

The following is the outline of the jQuery solution.

First, check each table heading to see if it is hovered over. If any of the table headings are hovered over, then add .focus CSS class to it to highlight it. When the mouse is moved away from the heading column, remove the focus CSS class, which brings the column heading back to the initial style. This is done by attaching the hover event to column headings, to toggle the .focus CSS class.

Since the column heading has to be clickable, attach a click event to each column heading. In the click event, first check for the current sort order. If the column heading is clicked for the first time, the table must be sorted in ascending order by that column, and if the column is clicked again, the table must be sorted in descending order by that column. We defined 2 CSS classes: asc and desc. These classes are responsible for adding up/down arrows to the column headings and also tell us about the current sorting order.

Inside the click event, check if the column heading has asc class applied to it. If yes, then remove it and assign desc class. Along with this, apply the selected CSS class, which highlights the column on the UI. We also set the value -1 to the sortOrder variable. This sortOrder variable will be used while sorting in descending order. If the current sort order value is descending, then add asc CSS class and remove desc class. Also, set sortOrder value to 1.

Once we've sorted the column, remove the asc and desc classes from all the column headings except the selected one. Create an array variable arrData to store the complete table data. Here, exclude the header row and get data only for TD elements using jQuery get(). The get()returns an array of all of the elements.

Now, on the array variable arrData, call the sort function to sort items inside the array. The default implementation of the sort() method sorts the values as strings in alphabetical and ascending order. Since we want to sort on descending order also, the default implementation will not work.  The default implementation also fails to accurately sort the numerical values. The sort function takes an optional parameter: a compare function. We can leverage this parameter to fix all of the above problems.  If we define a comparison function, then a pair of values from the array will be repeatedly sent to the function until all the elements of the array are processed. In the comparison function we then write a statement considering the pair of values passed to it so that the function returns any of the following three values: <0, =0, or >0.

• When the function returns the value <0, the second value (of the pair of array values sent to the function) is larger than the first value and hence must be pushed down the sorting order.
• When the function returns the value >0, the first value is larger than the second value, so it must be pushed down the sorting order.
• When the function returns the value =0, it means there is no need to change the sorting order since the two values are same.

When this sort function is complete, the arrData array will have all the rows sorted by the selected column and value assigned to the sortOrder variable for ascending/descending order. Finally, the sorted rows from the arrData array are retrieved and appended to the tbody element of the table for display.

If you want to play around with the code yourself, check out the demo example on jsFiddle!

Conclusion

To sum it up, this post provides an easy jQuery solution that enables sorting on the HTML table columns in ascending and descending order. The solution also takes care of issues with the default implementation of sort() function on an array. The best thing about this is, it is achieved without using any jQuery plugins (which are an overhead).