Quick sorting tables using Javascript

In the process of working with tables, for convenience of perception, as well as quick analysis, sooner or later the question arises of displaying the sorted contents of these tables. This problem in web programming can be solved in two ways:

• Sorting on the server side using SQL or backend;
• Sorting on the client side.

The disadvantages of the first option are to reload the page for every click of the user by the sorting controls. Pros - the speed of sorting on large samples.

The disadvantages of sorting on the client side is a relatively low speed of work, directly dependent on the browser and the power of the user's computer. Pros - the lack of reloading the page, therefore, sometimes it gives a greater speed of obtaining sorted content, because in this case there is no delay between sending the request to the server and getting the result.

In this article I would like to consider sorting on the client side using JavaScript.

Take a table with columns of different data types: numeric data, time, date, and text.
')
The most appropriate method, I believe, will be to get the contents of all the cells of the table, by which you need to sort and write it into an array, and then restore the rows according to their order in the sorted array. You can use the array.sort () method for this sorting.

By default, arrays are sorted in ascending order and the content is treated as text, but you can use your handler for the array.sort method. Therefore, before using this method, you need to prepare the source data.

Numeric and text data is written to the array without change.

Time is converted to a numeric value, in my example it is minutes.

fastSortEngine.prototype.parseTime = function (tvalue) {
var ret = tvalue;
if (!tvalue) {
ret = this .nullValue;
} else {
tvalue = tvalue.split( ':' );
if (tvalue.length == 2) {
ret = parseInt(tvalue[0],10)*60 + parseInt(tvalue[1],10);
} else {
ret = this .nullValue;
}
}
return ret;
}


The date is also converted to a numeric value. I used the Date object and the getTime () method, which returns the timestamps in milliseconds.

fastSortEngine.prototype.parseDate = function (dvalue) {
var ret = dvalue;
if (!dvalue) {
ret = this .nullValue;
} else {
dvalue = dvalue.split( ' ' );
if (dvalue.length == 3) {
var d = new Date(dvalue[2], this .months[dvalue[1].toLowerCase()], dvalue[0]);
ret = d.getTime();
} else {
ret = this .nullValue;
}

}
return ret;
}


Thus, we sort the numbers, date and time as numeric data with our own handler, and sort the text with the usual call array.sort ().

Now how these arrays to compare with object of the table. Before conversion, we index all rows in the table and assign them a sequence number runiqueID. This is necessary so that when sorting data with duplicate values, our second priority is the row number. The array.sort () method sorts an array according to weights and, passing it multidimensional arrays, you can sort them by several fields. I use a three-dimensional array, where the zero element is the transformed value, the first element is the ordinal number of the string, and the second is the node of the string. The handler code is shown below.

fastSortEngine.prototype.sortNumber = function (a,b) {
var a1 = a[0] == '' ? this .nullValue : parseFloat(a[0]);
var b1 = b[0] == '' ? this .nullValue : parseFloat(b[0]);
if (a1 == b1 && a[1] < b[1] ) return -0.0000000001;
else if (a1 == b1 && a[1] > b[1] ) return 0.0000000001;
return a1 - b1;
}


After casting to the required type, save the node to the array element and call array.sort (), and if sorting is needed in the reverse order, then we also call array.reverse ().

var obj = [val,
rowObj.runiqueID,
rowObj];
dataCol.push(obj);

if ( this .colType == "text" ) dataCol.sort();
else dataCol.sort( this .sortNumber);


When the data is sorted, we can change the position of rows in the table tree already. Pass through the sorted array and call appendChild for all previously stored node rows of the table.

var l = dataCol.length;
for ( var i = 0; i<l; i++) {
this .tBody.appendChild(dataCol[i][2]);
}


This method is very fast, because when sorting, table nodes are rearranged only at the end by a successive call to appendChild.

View the working example and download the source code .

UPD: Added result caching and slightly optimized code. Also, the example now has 500 lines. Optimized version and source code .