Javascript jQuery-对HTML表进行排序

我看过很多关于排序的帖子，但是没有一篇能够回答典型的情况

我尝试使用jQuery对HTML表进行排序，其中我单击以对列进行排序的链接不存在于正在排序的表中。我“伪造”一个表格标题以适应滚动表格的要求

我现在做的是-

• 加载一个数组，该数组包含需要修改的列中的值 与行id一起选择
• 根据这些值对该数组进行排序
• 根据排序数组中的索引将行插入HTML表

正如预期的那样，这需要近10秒才能在本地运行

代码示例-

var sortArr = new Array();

$('tr td.' + name).each(function () {
    ResidentID = $(this).parent().attr("ResidentID");
    BID = $(this).parent().attr("BRecordID");

    if ($(this).find('select').length > 0) { //ddls
        columnText = $(this).find('select option:selected').text();
        sortArr.push({ residentId: ResidentID, bID: BID, text: columnText });
    }
    else if ($(this).find('input').length > 0) {//Textbox or checkboxes
        columnText = $(this).find('input').val();
        sortArr.push({ residentId: ResidentID, bID: BID, text: columnText });
    }
});

if (sortDirection == 'ascending') {
    colHeader.attr('sortorder', 'descending')
    sortArr = sortArr.sort(function (v, t) {
        return v.text.localeCompare(t.text);
    });
}
else {
    colHeader.attr('sortorder', 'ascending')
    sortArr = sortArr.sort(function (v, t) {
        return t.text.localeCompare(v.text);
    });
}

for (var i = 0; i < sortArr.length; i++) {
    $("[id$=fixedDataTable] > tbody > tr").eq(i).after($("[id$=trFixedDataRow_" + sortArr[i].residentId + "]"));

    $("[id$=residentDetailDataTable] > tbody > tr").eq(i).after($("[id$=trResScrollDataRow_" + sortArr[i].residentId + "]"));

    $("[id$=bDetailDataTable] > tbody > tr").eq(i).after($("[id$=trBScrollDataRow_" + sortArr[i].bmrID + "]"));
}

var sortArr=new Array（）；
$（'tr td.'+name）.each（函数（）{
ResidentID=$（this.parent（）.attr（“ResidentID”）；
BID=$（this.parent（）.attr（“brecordd”）；
if（$（this）.find（'select'）.length>0）{//ddls
columnText=$（this）.find（'select option:selected'）.text（）；
push（{residentId:residentId，bID:bID，text:columnText}）；
}
else if（$（this）.find（'input'）.length>0）{//Textbox或复选框
columnText=$（this.find（'input'）.val（）；
push（{residentId:residentId，bID:bID，text:columnText}）；
}
});
if（sortDirection==“升序”）{
colHeader.attr（'sortorder'，'descending'）
sortArr=sortArr.sort（函数（v，t）{
返回v.text.localeCompare（t.text）；
});
}
否则{
colHeader.attr（'sortorder'，'singressing'）
sortArr=sortArr.sort（函数（v，t）{
返回t.text.localeCompare（v.text）；
});
}
for（var i=0；itbody>tr”）.eq（i）.之后（$（“[id$=trFixedDataRow\uuu3”+sortArr[i].residentId+”））；
$（“[id$=residentDetailDataTable]>tbody>tr”）.eq（i）.after（$”（“[id$=trResScrollDataRow_u“+Sortar[i].residentId+”）））；
$（“[id$=bDetailDataTable]>tbody>tr”）.eq（i）.after（$（“[id$=trBScrollDataRow_u”+sortArr[i].bmrID+“]）；
}

---

有没有更快的方法来实现这一点？

您查找要排序的列、对其排序并重新填充表的方法是正确的。但你这样做似乎效率低下。你可以做一些事情来加快速度

避免重构jquery对象。例如，在许多地方都有

$（this）

。将其缓存在局部变量中

而不是直接操作dom。考虑将数据放在二维数组中，它直接映射到DOM表。我认为这将是最大的进步。您可以根据需要对2D数组进行排序，然后重新填充dom表

考虑根据每个表行的单元格/行为其指定唯一的id。这样，2D阵列可以更容易地映射出来

回到您的代码，对于代码片段的这一部分

for (var i = 0; i < sortArr.length; i++) {
    $("[id$=fixedDataTable] > tbody > tr").eq(i).after($("[id$=trFixedDataRow_" +     sortArr[i].residentId + "]"));

    $("[id$=residentDetailDataTable] > tbody > tr").eq(i).after($("    [id$=trResScrollDataRow_" + sortArr[i].residentId + "]"));

    $("[id$=bDetailDataTable] > tbody > tr").eq(i).after($("[id$=trBScrollDataRow_" + sortArr[i].bmrID + "]"));
}

for（变量i=0；itbody>tr”）.eq（i）.之后（$（“[id$=trFixedDataRow\uuu3”+sortArr[i].residentId+”））；
$（“[id$=residentDetailDataTable]>tbody>tr”）.eq（i）.after（$”（“[id$=trResScrollDataRow_u“+Sortar[i].residentId+”）））；
$（“[id$=bDetailDataTable]>tbody>tr”）.eq（i）.after（$（“[id$=trBScrollDataRow_u”+sortArr[i].bmrID+“]）；
}

---

您能保存

$（“[id$=…tr”）的结果吗

在for循环之前放入一个变量，这样jquery就不必在每次迭代中都查找它了？而且您可以自己为缓存数据编制索引？

坚持这种排序方式似乎是唯一的方法。

也许我遗漏了一些东西，但是您没有使用插件的原因是什么；特别是，请参见ms做您想做的事情您试过了吗？它支持按列排序、分页、搜索和许多其他功能。@ChrisW-我不知道tablesorter具有基于表外链接排序的功能。@ChrisW-另外，我正在基于在3个表中的任何一个表外单击，对行中具有相应ID的3个表进行排序。Cl在第一个表的第3列上单击会生成一个我在其他两个表中使用的有序id列表。这似乎是可行的，但它并没有将行放入正确的索引中。