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

【问题标题】：How to sort a long data html table with javascript?如何使用 javascript 对长数据 html 表进行排序？
【发布时间】：2021-07-05 14:01:18
【问题描述】：

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

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 秒来排序。在 cmets 中如何建议我开始认为按服务器排序更好，但我不知道如何实现

【问题讨论】：

提供与您的问题相关的代码，以便人们更好地理解您的问题并提供更准确的解决方案
你是怎么排序的？你在内存中有一个包含数据的列表吗？你可以在后端对其进行排序吗？
MySql 数据库中有所有数据

标签： javascript database sorting html-table

【解决方案1】：

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

尝试设置您的项目，以便您控制数据并仅输出结果（sn-p 是一个非常简单的示例）。

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 倍）。

【讨论】：