jQuery-对HTML表格进行排序

Question

I've seen many many posts regarding sorting, but none that answers what would seem to be a typical scenario.

I am trying to sort and HTML table using jQuery where the links I click to sort the columns don't exist within that table that is being sorted. I "fake" a table header to accommodate a scrolling table requirement.

What I do now is -

• Load an array with the values within the column that need to be selected along with the row id's
• Sort that array based on those value
• Insert the rows into the HTML table based on index from that sorted array.

As expected, this takes close to 10 seconds to run locally.

Code sample -

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

Is there a faster way to accomplish this?

Answer 1

Your approach of finding column to be sorted, sort it, and repopulate table is correct. But how you are doing that looks to be inefficient. Few things you can do to speed up

1. Avoid reconstructing jquery object. For example you have $(this) in numerous places. Cache it in a local variable.

2. Instead of directly manipulating the dom. Consider having the data in a 2D array, which directly maps out to the dom table. I think this will be the biggest improvement. You can sort the 2D array based on however you want, then just repopulate the dom table.

3. Considering giving each table row a unique-id based on its cell/row. That way the 2D array can map out more easily

   Going back to your code, for this part of the snippet

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

can you just save the result of $("[id$=...tr") into a variable before the for loop so that way jquery doesn't have to look for it in every iteration? And you can probably just index the cached data yourself?

Answer 2

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