Sorting a One-Column Table - Java Script

Now you begin the task at hand,sorting a table.The simplest case is to sort a table with just one column and, therefore, just one data type. The best way to set up a table for sorting is to create a <thead/> element for the table header rows and a <tbody/> element for the rows that contain data:

With this setup,it’s easy to distinguish between the header rows and the data rows(obviously, you don’t want to sort the header rows along with the data, so this is an important distinction).Using the table’s tBodies collection, you can get a reference to the <tbody/> element as well as to the rows it contains:

To get the value in a table cell using the DOM is a bit involved, although not necessarily difficult. Each of the <tr/> elements contained in the rows collection contains a child <td/> element. Each <td/> element has a child text node that contains the actual value to be sorted on. Figure shows this DOM hierarchy.

DOM hierarchy.

In order to retrieve the value Smith from the table defined previously, you use this code:

var sSmith = colDataRows[0].cells[0].firstChild.nodeValue;

This methodology can be used to retrieve the value contained in each row, which is order to create a comparison function for sorting.

The comparison function

The interesting thing about this comparison function is that it sorts <tr/> elements by using a value contained within the row, meaning that you must retrieve that value from within the function. After these values are retrieved, you can just use localeCompare() to compare them:

This comparison function sorts the table rows by the value in the first cell(index 0). Next, you use this comparison function with the table.

The sortTable() function

The sortTable() function does most of the heavy lifting.It accepts one argument, which is the ID of the table to sort.Naturally, this means the first step in the function must be to retrieve a DOM reference to the table as well as to locate the data rows:

The problem at this point is how to sort the rows in colDataRows.Remember, rows is a DOM collection, not an array and, therefore,it doesn’t have the sort() method.The only solution is to create an array and fill it with the <tr/> elements, sort that array, and finally place the rows in order using the DOM. So first,you iterate through the <tr/> elements and add them to an array:

This section of code creates an array called aTRs and fills it with references to the <tr/> elements.Doing this doesn’t remove the <tr/> elements from the table because you are only storing pointers, not the actual elements.

The next step is to sort the array using the compareTRs() function:

After this, all the <tr/> elements are in order in the array, but the order on the page hasn’t changed.To actually change the order on the page, you add each row back in order.The fastest way to do this is to create a document fragment and add all <tr/> elements to it in the correct order. Then, you can use appendChild() to add all the child nodes from the document fragment back into the <tbody/> element.

This code creates a document fragment and adds all the <tr/> elements to it, which effectively removes them from the table.Then, the children of the fragment are added back to the <tbody/> element. Remember, when you use appendChild() and pass it a document fragment, all the child nodes of the fragment are appended, not the fragment itself.

DOM hierarchy.

All that’s left to do is to call the function when the user clicks on the column header. You can do this in any number of ways, but the simplest is just to add the function call as the <th/> element’s onclick event handler:

Also note the style attribute has been set to cursor:pointer, which ensures that the cursor turns into the hand pointer when the user mouses over the column header. At this point, you just click on the column header to sort all the last names in alphabetical order.

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd Protection Status

Java Script Topics