How to sort large tables in HTML using the DOM elements and very little overhead.
I created this Javascript routine in order to sort a massive table with many rows of data that is fast as uses as little data as possible.
I just wanted to share it with the world.
I am using JQuery but anyone can figure out what I did. If's fast and efficient.
Basically I grab the column name from the heading clicked, figure out sort direction, take table DOM elements apart and put them in Javascript Array. I pad number columns so they sort as numbers. I sort the Array and rebuild the DOM using the Pointer I stored with the Sort Data.
Yes, that easy. I also remove and add back in the zebra effect.
$('#table_heading th').click(function() {
var Class = this.className.split(' ');
var tr = $('#stage_chart_info tr');
tr.removeClass('dark').removeClass('light');
var SortClass = $('#stage_chart_info .' + Class);
var SortData = Array.prototype.slice.call(SortClass);
var forsort = Array();
var Pre = '';
if (Class[2] == 'num') {
var DataMask = $(this).attr('data-mask');
var MaskLeft = Math.floor(DataMask);
var MaskRight = Math.floor((DataMask - MaskLeft) * 10);
}
for (i = 0; i < SortData.length; i++) {
var ItemArray = new Array(2);
if (Class[2] == 'txt') {
ItemArray[0] = $(SortData).text().toLowerCase(); } else { var SortNumber = NumLeft = $(SortData).text().toLowerCase(); var NumberLeft = Math.floor(SortNumber); var NumberRight = Math.floor((SortNumber - NumberLeft) * 10); ItemArray[0] = NumberLeft.toString().padStart(MaskLeft, '0'); if (MaskRight > 0) ItemArray[0] += '.' + NumberRight.toString().padEnd(MaskRight, '0'); } ItemArray[1] = i; forsort.push(ItemArray); } tr = $('#stage_chart_info tr').detach(); $('#table_heading th').removeClass('asc').removeClass('desc').addClass('both'); switch(Class[3]) { case 'both': case 'desc': $(this).removeClass('both').addClass('asc'); forsort.sort(); break; case 'asc': $(this).removeClass('both').addClass('desc'); forsort.reverse(); break; }
var Zebra = 'dark'; forsort.forEach(function(item) { $(tr[item[1]]).addClass(Zebra); $('#stage_chart_info table').append(tr[item[1]]); if (Zebra == 'dark') { Zebra = 'light' } else { Zebra = 'dark'; } }); });