Change table columns order via jQuery




When you have a table which you can’t edit, you think you can’t do anything with it. It may be a result of an outside procedure or web-service (usually it returns data in XML, but html-table also can be).

So, for example, we have a list of Borussia Dortmund players. We know id in list, Name of player, his Lastname and date of birth (Figure  1).

Figure 1. Table for change columns order

Figure 1. Table for change columns order

It’s code is:

<table border=0 cellspacing=0 cellpadding=0 class="tbl">
 <tr>
   <th>#</th>
   <th>Name</th>
   <th>Lastname</th>
   <th>Age</th>
 </tr>

 <tr>
   <td>1</td>
   <td>Roman </td>
   <td>Weidenfeller</td>
   <td>06/08/80</td>
 </tr>

 <tr>
   <td>2</td>
   <td>Neven</td>
   <td>Subotic</td>
   <td>10/12/88</td>
 </tr>
  <tr>
   <td>3</td>
   <td>Mats</td>
   <td>Hummels</td>
   <td>16/12/88</td>
 </tr>

 <tr>
   <td>4</td>
   <td></td>
   <td>Sokratis</td>
   <td>09/06/88</td>
 </tr>
</table>

 

This table is returned for us by a web service. And we want to insert in on our webpage, but we want column "Age" to be the second.

Figure 2. Table with changed columns order

Figure 2. Table with changed columns order

 

I see two ways to do it. The first is to write a parser of the text on PHP or C#, parse this text and get modified html code. For this way we need to execute a tools for parsing. May be in this case it’s not so difficult, but you don’t always have an opportunity to use this way.

The second way is (I think) much easier – using some JavaScript with jQuery. Using jQuery in nowadays sites is a common thing.  By the statistic in 2012 about 65% of sites used jQuery. I think that in 2013 this number became more.

So, we need to write a small function for changing order of table columns. We need not to forget that table has and "td", and "th" tags.

<script type="text/javascript">
jQuery.moveColumn = function (table, from, to) {
    var rows = jQuery('tr', table);
    var cols;
    rows.each(function() {
        cols = jQuery(this).children('th, td');
        cols.eq(from).detach().insertBefore(cols.eq(to));
    });
}
</script>

 

To call this function we need to write strings like this:

	var tbl = jQuery('.tbl');
	jQuery.moveColumn(tbl, 3, 1);

 

For automatic changing columns order of table you need to write:

<script type="text/javascript">
$(document).ready(function() {
	var tbl = jQuery('.tbl');
	jQuery.moveColumn(tbl, 3, 1);
});
</script>

 

For changing columns order of table on button click you need to add some extra code. Let’s insert a button on a page with id="srt" and add some code to call our function. The result is here:

<script type="text/javascript">
$(document).ready(function() {
$('#srt').click(function() {

	var tbl = jQuery('.tbl');
	jQuery.moveColumn(tbl, 3, 1);
});
});
</script>

<input type="Button" id="srt" value="columns" />

 




4 Comments »

  1. Hello,

    Do you have a live demo ?

    Thanks

    Comment by sam — April 2, 2014 @ 10:19 am

  2. This is a nice tight piece of code. Thanks!

    My new problem is my table has a rowspan on the 2nd thru 4th rows. Depending on the data I need to move column 5 to column 2. The functions above work fine on the cells of the first row but once I hit the spanned rows things stop working. Is there a way to compensate for the spanned rows?

    Your help is greatly appreciated.

    Comment by Allen — May 6, 2014 @ 7:55 pm

  3. I think you need to add ‘attr’ to get your cells from javascript. I’ll try to write this script in 2-3 days when I finish urgent tasks

    Comment by admin — May 7, 2014 @ 7:20 pm

  4. alert(“ready”);
    $(document).ready(function() {
    $(‘#srt’).click(function() {
    var tbl = jQuery(‘.tbl’);
    alert(“before move”);
    jQuery.moveColumn(tbl, 3, 1);
    jQuery.moveColumn = function (table, from, to) {
    var rows = jQuery(‘tr’, table);
    var cols;
    rows.each(function() {
    cols = jQuery(this).children(‘th, td’);
    cols.eq(from).detach().insertBefore(cols.eq(to));
    });
    }
    alert(“after move”);
    });
    });
    alert(“moveColumn”);

    i tried this not works only “ready ” alert comin??

    Comment by javac — June 20, 2014 @ 6:11 am

RSS feed for comments on this post. TrackBack URL

Leave a comment





MarkiMarta.com. Notes of web-specialist
Since 2009
18+