JQuery/Javascript Reordering rows

Question

I have a aspx page that looks something like this:

  Some label
  Some complex control
         


        

Answer 1

Just do something like this:

Say you have table like so:

    
 .... 
    
 .... 
    
 .... 
    
 .... 

And an array with the new order like this:

NewOrder[1] = 3;
NewOrder[2] = 4;
NewOrder[3] = 2;

Then, do some something like this (not tested, so you may need to tweak the code, but this is the idea):

for ( i=1; i<=NewOrder.length; i++ ) {
    $('#row'+i).appendTo( '#table' );
}

This way, they are moved to the end of the table in order.

So you will have 3 moved to the end, then 4 behind it, then 2 behind that, etc. After they have ALL been appended to the end of the table, the first one will become the first row, and the rest will be in the correct order behind it.

Edit:

Make the table style='display:none;' and then do $('#table').show(); at startup.

Edit Again: You could do a div around the entire body content, like

....

So that the entire page will be hidden (just blank white) for the fraction of a second it takes to load and order the table.

Then you would use:

$(function(){
    $('#everything').show();
}

To show the entire page all at once as soon as the DOM is ready. It will take a fraction of a second longer for the page to load, but it will all load at once, so there won't be any flash of missing tables, etc. As long as EVERYTHING is in #everything, it will just look like the page loaded - should be transparent to the viewer.