jQuery tablesorter, numbered sorted columns

Question

How do I numerate sorted columns?
If I click column "Date" need to numerate it 1, next click "Client" need to numerate it 2

This is my thead:

<thead>
<tr>
    <th>Quotation No</th>
    <th>Date</th>
    <th>Client</th>
    <th>Manager</th>
    <th>Total amount</th>
    <th>Order</th>
</tr>
</thead>

Example http://i58.tinypic.com/2lszc0n.jpg

Answer 1

If you are using my fork of tablesorter, you can use the following code (demo):

$(function () {
    $('table')
        .on('sortEnd', function(){
            var i,
                c = this.config,
                list = c.sortList;
            // clear indexes
            c.$headers.find('.index').text('');
            for (i = 0; i < list.length; i++) {
                c.$headers.eq( list[i][0] ).find('.index').text( i+1 );
            }
        })
        .tablesorter({
            theme: 'blue',
            headerTemplate: '{content}{icon}<span class="index"></span>',
            widgets: ['zebra']
        });
});

The result isn't exactly like you have in the example screenshot, but you can achieve it with a bit of css modification.

If you are using the original tablesorter, you can add the <span class="index"></span> to each header manually.