有没有更快的方法来排序HTML表?

时间:2019-05-21 15:24:04

标签: javascript html sorting html-table

正如标题所述。与w3schools提供的算法相比,我需要在javascript中制定一种更有效的排序算法。

我有一个HTML表,该表中填充了来自SQL查询的约1000行,当我尝试对其进行排序时,该页面最多需要一分钟才能做出响应。我认为这是因为该算法每页至少在页面中查询表中的行一次。

我正在实现的代码位于w3schools,但无论如何这里都是这样:

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;
    }
  }
}

有什么技巧可以使它更快和/或更有效?

澄清:我只是想按升序或降序对这些行进行字母排序。每次我想对其重新排序时,从SQL Server查询1000行并不是最佳选择。

1 个答案:

答案 0 :(得分:-1)

在填充表格之前,应使用“排序依据”对数据进行排序。 https://www.w3schools.com/sql/sql_orderby.asp