JQuery/Javascript Reordering rows

Question

I have a aspx page that looks something like this:

<tr id="Row1">
  <td>Some label</td>
  <td>Some complex control</td>
</tr>
<tr id="Row2">
  <td>Some label</td>
  <td>Some complex control</td>
</tr>
<tr id="Row3">
  <td>Some label</td>
  <td>Some complex control</td>
</tr>

As soon as the page is loaded, I would want to reorder these rows based on the user's previously selected order (stored in a database)

How would I use JQuery/JS to accomplish this?

EDIT:

I have run into a performance issue with the appendTo code. It takes 400ms for a table of 10 rows which is really unacceptable. Can anyone help me tweak it for performance?

function RearrangeTable(csvOrder, tableId)
{
  var arrCSVOrder = csvOrder.split(','); 

  //No need to rearrange if array length is 1
  if (arrCSVOrder.length > 1)
  {
    for (var i = 0; i < arrCSVOrder.length; i++)
    {
      $('#' + tableId).find('[fieldname = ' + arrCSVOrder[i] + ']').eq(0).parents('tr').eq(0).appendTo('#' + tableId);
    }
  }
}

Answer 1

Why not order the rows on the server side? If you are going to reorder them with JQuery as soon as the page is loaded then it will be more efficient to do this job in server code, especially if the user's selected order is stored in a database.

Answer 2

Try the jQuery tablesorter plugin.

When the document loads you can sort the table by specifying the column index to sort on (and it allows sorting by multiple columns):

$(document).ready(function() 
    { 
        $("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} ); 
    } 
);