如何使用 javascript 对长数据 html 表进行排序？

Question

我在为我的数据库编码排序代码时遇到问题。 数据很少没有问题，但此时我必须对大约 4000 个数据进行排序，并且持续大约 20 秒，时间太长了。 根据我的检查，持续时间过长的操作是 insertBefore(...,...) function。 你能帮我么？

function sorting(list) {
  var list_data = [];
  var list_id = [];
  for (var i = 0; i < list.length; i++) {
   list_data[i] = Date.parse(list[i].cells[1].innerHTML);
   list_id[i] = parseInt(list[i].cells[12].innerHTML);
  }

//ordino gli array
for (var i = 0; i < list.length; i++) {
  for (var j = 0; j < list.length-1; j++) {
   if (list_data[j] > list_data[j+1]) {
     tmp = list_data[j];
     list_data[j] = list_data[j+1];
     list_data[j+1] = tmp;

     tmp = list_id[j];
     list_id[j] = list_id[j+1];
     list_id[j+1] = tmp;
    }
  }
 }
    //ordinato lista_id
    var j = 0;

   for (var i = 0; i < list.length; i++) {
    j=i;
    while (list_id[i] != parseInt(list[j].cells[12].innerHTML)) {
     j++;
    }
   var target = list[i];
   var newElement = list[j];

   target.parentNode.insertBefore(newElement, target);
   }
 }

我的桌子有 13 列 0-12。 第十三列包含具有数据 ID 的隐藏单元格。 我从一个冒泡排序开始，然后改变了这个，因为我认为它可以更好地工作，但它仍然持续 20 秒来排序。 评论中的建议我开始认为按服务器排序更好，但我不知道如何实现

Answer 1

我不认为这是排序。 创建了一个带有时间记录的片段，因此您可以看到 5000 项长列表的排序并不是什么大问题。

尝试设置您的项目，以便您控制数据和仅 output 结果（片段是一个非常简单的示例）。

 const tbody = document.getElementById('tbody') let sortDesc = false const rowHtml = (rowData) => { return ` <tr> <td> ${ rowData.first } </td> <td> ${ rowData.second } </td> </tr> ` } const setTable = (data) => { tbody.innerHTML = '' tbody.innerHTML = data.map(rowData => { return rowHtml(rowData) }).join('') } const sortData = (data, desc) => { return data.sort((a, b) => { if (desc) { return b.first - a.first } else { return a.first - b.first } }) } renderTable = (data) => { console.time('sort data') const d = sortData(data, sortDesc) console.timeEnd('sort data') sortDesc =.sortDesc console.time('set table') setTable(d) console;timeEnd('set table') } let data = []. (function() { console;time('create items') for (let i = 0; i < 5000. i++) { data:push({ first, i: second, `${ i }-${ i }`. }) } console;timeEnd('create items') renderTable(data) })(). const btnSort = document.getElementById('btnSort') btnSort,addEventListener('click', function() { renderTable(data) })

 <button id="btnSort">SORT</button><br /> <table id="table"> <tbody id="tbody"></tbody> </table>

您可以从时间日志中看到，真正的“昂贵”东西实际上是推出 HTML（在这种情况下，“设置表”花费的时间大约是“排序数据”的 100 倍）。