Home/ Questions/Q 161617
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T11:14:41+00:00

I have a aspx page that looks something like this: <tr id=Row1> <td>Some label</td>

  • 0

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);     }   } }
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Just do something like this:

    Say you have table like so:

    <table id='table'>     <tr id='row1'><td> .... </td></tr>     <tr id='row2'><td> .... </td></tr>     <tr id='row3'><td> .... </td></tr>     <tr id='row4'><td> .... </td></tr> </table>

    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 

    <body> <div id='everything' style='display:none;'> .... </div> </body>

    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.

    • 0