0

Just as the title says. I need to make a more efficient sorting algorithm in javascript than the one that is provided at w3schools.

I have an HTML table that is populated with about 1000 rows from an SQL query, and when I try to sort it, the page takes up to a minute to respond. I figure this is because this algorithm queries the page for the rows in the table at least once per row.

The code I am implementing is found at w3schools, but here it is anyway:

var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
table = document.getElementById("myTable2");
switching = true;
// Set the sorting direction to ascending:
dir = "asc"; 
/* Make a loop that will continue until
no switching has been done: */
while (switching) {
  // Start by saying: no switching is done:
  switching = false;
  rows = table.rows;
  /* Loop through all table rows (except the
  first, which contains table headers): */
  for (i = 1; i < (rows.length - 1); i++) {
    // Start by saying there should be no switching:
    shouldSwitch = false;
    /* Get the two elements you want to compare,
    one from current row and one from the next: */
    x = rows[i].getElementsByTagName("TD")[n];
    y = rows[i + 1].getElementsByTagName("TD")[n];
    /* Check if the two rows should switch place,
    based on the direction, asc or desc: */
    if (dir == "asc") {
      if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
        // If so, mark as a switch and break the loop:
        shouldSwitch = true;
        break;
      }
    } else if (dir == "desc") {
      if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
        // If so, mark as a switch and break the loop:
        shouldSwitch = true;
        break;
      }
    }
  }
  if (shouldSwitch) {
    /* If a switch has been marked, make the switch
    and mark that a switch has been done: */
    rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
    switching = true;
    // Each time a switch is done, increase this count by 1:
    switchcount ++; 
  } else {
    /* If no switching has been done AND the direction is "asc",
    set the direction to "desc" and run the while loop again. */
    if (switchcount == 0 && dir == "asc") {
      dir = "desc";
      switching = true;
    }
  }
}

Any tips on making this faster and/or more efficient?

CLARIFICATION: I am just trying to sort these rows alphabetically by ascending or descending. Querying for 1000 rows from the SQL server each time I want to re-order them is not optimal.

MARS
  • 499
  • 1
  • 9
  • 25
  • Yes, there is. Analyze any other tool that sorts HTML tables. E.g. datatables – Justinas May 21 '19 at 15:26
  • 3
    The fastest option would be to sort it outside of the html, (DB, JS etc) and then re-render the table. Multiple dom manipulations is never fast. – hawkstrider May 21 '19 at 15:26
  • @justinas Are datatables jquery or javascript? – MARS May 21 '19 at 15:29
  • 1
    @bhmahler I see. This sort renders the table at every iteration. So you think that is what is slowing it down? – MARS May 21 '19 at 15:30
  • 1
    I have seen many a performance nightmare like that before. You can use the browser performance analyzer to see the timings on all of the dom manipulations. Best bet is to sort and then re-render all at once. Least number of dom hits the better. – hawkstrider May 21 '19 at 15:31
  • 2
    Sort the data as data. Render the output only when it's done. There are tools for this already, like lodash and HTML templating. – Diodeus - James MacFarlane May 21 '19 at 15:32
  • See https://stackoverflow.com/questions/14267781/sorting-html-table-with-javascript –  May 21 '19 at 15:32
  • @bhmahler This is what I ended up doing, and it works very well! Thanks for the tip! – MARS May 21 '19 at 19:50

0 Answers0