Jump to content

Sort Table takes too long to load


Recommended Posts

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.

Link to comment
Share on other sites

  • 1 month later...

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.


// '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')




Link to comment
Share on other sites

  • 3 weeks later...

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 by Funce
Removed Advertising
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...