Sort Table takes too long to load

[KLu]

I'm new, please bear with me. I know only a bare minimum of html/css/javascript so I've been using the How to Sort a Table tutorial to create a 5-column table I need. And it worked great, up until I hit entries in the hundreds, and then it started slowing down whenever I clicked on the headers to sort the entries. The problem is I need over 2,300 entries on this table, at which point it takes so long to load that the webpage just stops functioning.

Is there a better way to sort a large table like this? I looked to javascript because it's the only thing I'm even vaguely familiar with that can do clickable, sortable headers, but if there's something else out there that can do the job then that's what I need to learn.

[Eric Dubru]

I am also a beginner. I had the same problem. I have developped a function and it's possible to sort a table with ~ 7 000 rows in less than 1 second.

It's the following function with a few comments.

Eric

// 'Table': table element
// 'FirstRow': first row to sort (0 if no header and first row must also be sorted)
// 'ColSort': order number of the column used to sort (0 for he first column)
// 'VMode': mode (0: alphabetical, 1: numeric)
// 'VInv': order (true: ascending, false: descending)
// Other parameters are possible (ex.: lowercase/uppercase/with case, detect not numeric values,...)

function NewSortTable(Table, FirstRow, ColSort, VMode, VInv) {
//var T0 = GiveTime()
var i, ValA, RowsDat = [], RId, Ce, Row, TabRows = Table.getElementsByTagName('TR') // Table and table rows
// Read rows data (value of the cell and id of the row)
for (i = FirstRow; i < TabRows.length; i++)
    {
    Row = TabRows; RId = Row.id; if (String(RId) == '') {RId = 'TmpSort' + String(i); Row.id = RId;}
    Ce = Row.getElementsByTagName('TD')[ColSort];
    if (VMode == 0) {ValA = Ce.innerHTML; ValA = ValA.toLowerCase();} // Alphabetical sorting - Use displayed value in lowercase
    if (VMode == 1) {ValA = Number(Ce.getAttribute('data-nv'));} // Numbers sorting - Use actual memorized value
    RowsDat.push([ValA, RId]);
    }
// Sort rows data (value and id) by value
if (VMode == 0) // Alphabetical  sorting
    {
    if (!VInv) {RowsDat.sort(function(a,b) {if (a[0] > b[0]) {return 1}; if (a[0] < b[0]) {return -1}; return 0})} // Normal order
    if (VInv)  {RowsDat.sort(function(a,b) {if (a[0] < b[0]) {return 1}; if (a[0] > b[0]) {return -1}; return 0})} // Reverse order
    }
if (VMode == 1) // Numbers sorting
    {
    if (!VInv) {RowsDat.sort(function(a,b) {return a[0] - b[0]});} // Normal order
    if (VInv)  {RowsDat.sort(function(a,b) {return b[0] - a[0]});} // Reverse order
    }
// Change the place of the rows
for (i = 0; i < RowsDat.length; i++)
    {
    RId = RowsDat[1]; Row = document.getElementById(RId); if (RId.substring(0, 7) == 'TmpSort') {Row.removeAttribute('id');}
    Table.insertBefore(Row, TabRows[FirstRow]);
    }
//alert((GiveTime() - T0) / 1000 + ' seconds')
}

 

 

 

[Daggerdru]

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.

 

Edited May 13, 2019 by Funce
Removed Advertising