Daggerdru
-
Posts
2 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by Daggerdru
-
-
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';
}
});
});
Sort Table takes too long to load
in JavaScript
Posted · Edited by Funce
Removed Advertising
I had the same type of problem, and I didn't want to take a lot of memory to sort the table so I created a function that grabs the column to be sorted from the DOM, puts it in a JavaScript Array along with the DOM row as a pointer, Sorts the Array, then rebuilds the DOM according to the pointers from the sorted Array.
Here is a link to my post.