jQuery - 对HTML表进行排序

我见过很多关于排序的帖子，但没有一篇回答什么是典型的场景。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 + "]")); 
}

有没有做到这一点更快的方法？

来源

2013-07-02 duckmike

也许我错过了一些东西，但有没有原因你没有使用插件，如[tablesorter]（http://tablesorter.com/）;特别是[根据列表外链接的列索引排序]（http://tablesorter.com/docs/example-trigger-sort.html）似乎是做你想做的事情 – ChrisW

或者你试过[datatables]（http ：//datatables.net/）？它支持按列，分页，搜索和许多其他事物进行排序。 –

@ChrisW - 我不知道tablesorter具有基于表外链接进行排序的功能。 – duckmike

您找到要排序的列，对其进行排序并重新填充表的方法是正确的。但你如何做，看起来效率不高。你可以做几件事来加速

避免重建jquery对象。例如，您在许多地方都有$(this)。将其缓存在局部变量中。
而不是直接操纵dom。考虑将数据存储在2D数组中，该数组直接映射到dom表。我认为这将是最大的改进。您可以根据需要对2D数组进行排序，然后重新填充dom表。

考虑为每个表格行赋予一个基于其单元格/行的unique-id。这样的二维数组可以绘制出更容易

再回到你的代码，代码段，这部分

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 + "]")); 
}

可你刚才的$("[id$=...tr")结果保存到一个变量之前为循环，以便jQuery不必在每次迭代中查找它？你也可以自己编制缓存数据索引？

来源

2013-07-02 15:28:11 dchhetri

这看起来好像会起作用，但它没有将行放入正确的索引中。 – duckmike

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

来源

2013-07-02 20:27:09 duckmike

jQuery - 对HTML表进行排序

回答

相关问题