Tutorial :JQuery/Javascript Reordering rows


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?


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


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.


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.


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.


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


Check the jQuery TableSorter Plugin, it's very powerful it detects the underlying datatypes of the columns, and you can sort your table columns programmatically:

$("#yourTable").tablesorter( {sortList: [[0,0]]} );    // This will sort "yourTable" using   // the first column, ascending [columnIndex, 0=ASC or 1 = DESC]  


Keep in mind reording client-side leaves yourself open to issues in three ways.

  1. If the client computer is slow this reordering may be visible no matter what you do.
  2. The larger the table of data gets the slower this action will be and the more visible the reordering would be.
  3. Client could have JS disabled, which would break your reordering.

Although it seems you want to do this client-side to save yourself some headaches now on the server-side programming, in the long run investing some time on this now to get it server-side will avoid these troubles.

If you're having issues getting the server-side code to work right with your custom controls post it and we'll help you out.


Working example. Simply iterate through a list containing the new order (which, presumably you read from the DB), building the new table. Then set the table html() to the new table html.

<html>  <head>      <script type="text/javascript"      src="http://code.jquery.com/jquery-latest.min.js"></script>      <script>  jQuery.fn.outer = function(){    return $( $('<div></div>').html(this.clone()) ).html();  }  $(function(){      newtbl = "";      neworder = [2,3,1];      for(i=0;i<neworder.length;i++){          newtbl += $("#Row"+neworder[i]).outer();      }      $("#tbl").html("<table id=\"tbl\">" + newtbl + "</table>")  });  </script>         </head>  <body>  <table id="tbl">  <tr id="Row1">    <td>label 1</td>    <td>Some complex control</td>  </tr>  <tr id="Row2">    <td>label 2</td>    <td>Some complex control</td>  </tr>  <tr id="Row3">    <td>label 3</td>    <td>Some complex control</td>  </tr>  </table>  </body>  </html>  


If the last sorting done by the user is stored as a list containing the row id, you could do this:

loop through list from db {      $("#"+rowId).appendTo("#tableId")  }  

This way, the rows will be taken out of their current location and replaced inside the table in the order they are stored in the database.


EDIT appendTo method works. However, in the short delay of rearranging the rows on the client side, I see the rows in their original order for about half a second before the reordering is complete. This UI behavior is more prominent since the page does not use postbacks. Any workaround for this?

Set display:none on the table with css. The when the document ready event fires use the appendTo method. The do show on the table. You can set another style tag with display:block on the table inside <noscript> in case js is disabled.

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »