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

Question

我在为数据库编码排序代码时遇到问题。由于数据很少，所以没有问题，但现在我必须对大约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的隐藏单元格。我从一个bubblesort开始，然后改变了这个，因为我认为它可以更好地工作，但它仍然可以持续20秒进行排序。如何在评论中建议我开始认为按服务器排序更好，但我不知道如何实现

Answer 1

我不认为这是排序问题。创建了一个带有时间日志的片段，这样您就可以看到一个5000项长的列表的排序问题不大。

试着设置你的项目，这样你就可以控制数据&只输出结果(这个片段就是一个非常简单的例子(。

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