Re-ordering the columns in a HTML Table using jquery

Question

There is a html table in this fiddle which is created as

<table width="100%" border="1" cellpadding="0" cellspacing="0">
    <tr>
        <th>Sl.No</th>
        <th>Name</th>
        <th>Dec 2013</th>
        <th>Feb 2014</th>
        <th>Jan 2014</th>
        <th>Mar 2014</th>
        <th>Nov 2013</th>
        <th>Total</th>
    </tr>
    <tr>
        <td>1</td>
        <td>foo</td>
        <td>4</td>
        <td>7</td>
        <td>3</td>
        <td>5</td>
        <td>2</td>
        <td>21</td>
    </tr>
    <tr>
        <td>2</td>
        <td>bar</td>
        <td>6</td>
        <td>1</td>
        <td>5</td>
        <td>8</td>
        <td>3</td>
        <td>23</td>
    </tr>
</table>

How to re-order the columns using jquery so that the order of the columns in new table becomes Sl.No, Name, Nov 2013, Dec 2013, Jan 2014, Feb 2014, Mar 2014, Total Also the month columns are generated dynamically by server based on date selection (From and To dates)

I suggest you use ORDER BY in the Query you use to retrieve data ! This reduces the JS load if there's any on client side ! — Magesh Kumaar
– Magesh Kumaar, Commented Apr 4, 2014 at 5:05
@undefined - Me sorted data in server side. But at client side it taking the order in alphabetical manner. ie like Dec 2013 Feb 2014 etc. — mpsbhat
– mpsbhat, Commented Apr 4, 2014 at 5:22

Ram · Accepted Answer · 2014-04-04 05:05:24Z

1

var arr = $('th').sort(function(a, b) {
   return new Date(a.innerHTML) > new Date(b.innerHTML);
}).map(function() { return this.cellIndex }).get();

$('tr').each(function() {
    $(this.cells).sort(function(a, b) {
        a = $.inArray(a.cellIndex, arr);
        b = $.inArray(b.cellIndex, arr);
        return a > b;
    }).prependTo(this);
});

http://jsfiddle.net/ZR5W7/

answered Apr 4, 2014 at 5:05

Ram

145k16 gold badges174 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Re-ordering the columns in a HTML Table using jquery

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related