How can I get the name of the column clicked using jQuery tablesorter

Question

I am using the jQuery tablesorter plugin to sort a gridview in an asp.net application. I can capture the column index but can't seem to figure out how to get the column name.

This is what I'm doing:

var currentSort;

        $('#gvTickets').tablesorter({
            // sort on the last column, order asc 
            sortList: [[9, 0]]
        }).bind("sortEnd", function(sorter) {
            currentSort = sorter.target.config.sortList;

        });

Here is the html:

<div>
<table class="stretchalltable" cellspacing="0" rules="all" border="1" id="gvTickets" style="border-collapse:collapse;">
    <thead>
        <tr>
            <th scope="col" class="header" style="cursor: pointer; ">Requester</th><th scope="col" class="header" style="cursor: pointer; ">Subject</th><th scope="col" class="header" style="cursor: pointer; ">Type</th><th scope="col" class="header" style="cursor: pointer; ">Category</th><th scope="col" class="header" style="cursor: pointer; ">Priority</th><th scope="col" class="header" style="cursor: pointer; ">Status</th><th scope="col" class="header" style="cursor: pointer; ">Due</th><th scope="col" class="header" style="cursor: pointer; ">Assigned To</th><th scope="col" class="header" style="cursor: pointer; ">Created</th><th scope="col" class="header headerSortUp" style="cursor: pointer; ">Days</th>
        </tr>
    </thead><tbody>

    <tr>
            <td>JMAULDIN</td><td><a href="ticket2.aspx?action=edit&amp;ticket_id=7827">Van Order Entry Customer Contract Lookup Display</a></td><td>Project</td><td>Portal </td><td>Normal</td><td>On Hold</td><td>&nbsp;</td><td>Nathan Baker - Doozer</td><td>27-DEC-2011</td><td>133</td>
        </tr><tr style="background-color:#E6E6E6;">
            <td>RCRITTENDEN</td><td><a href="ticket2.aspx?action=edit&amp;ticket_id=8190">Cap changes</a></td><td>Project</td><td>Portal </td><td>Normal</td><td>On Hold</td><td>&nbsp;</td><td>Nathan Baker - Doozer</td><td>02-FEB-2012</td><td>106</td>
        </tr><tr style="background-color:#E6E6E6;">
            <td>JMAULDIN</td><td><a href="ticket2.aspx?action=edit&amp;ticket_id=8796">Online SRN  -- Add email SRN like print SRN</a></td><td>Project</td><td>Portal </td><td>Normal</td><td>New</td><td>&nbsp;</td><td>Nathan Baker - Doozer</td><td>15-MAR-2012</td><td>76</td>
        </tr><tr>
            <td>JMAULDIN</td><td><a href="ticket2.aspx?action=edit&amp;ticket_id=9058">SES AST field not saving correctly.</a></td><td>Project</td><td>Portal </td><td>Normal</td><td>On Hold</td><td>&nbsp;</td><td>Nathan Baker - Doozer</td><td>20-MAR-2012</td><td>73</td>
        </tr><tr>
            <td>RAVRIETT</td><td><a href="ticket2.aspx?action=edit&amp;ticket_id=9470">Copy Project Plan (ignore deleted items)</a></td><td>Support Task</td><td>Loaned Item </td><td>Normal</td><td>New</td><td>&nbsp;</td><td>Nathan Baker - Doozer</td><td>24-APR-2012</td><td>48</td>
        </tr><tr>
            <td>TCACCAM</td><td><a href="ticket2.aspx?action=edit&amp;ticket_id=9670">WEB: Contracts Administration</a></td><td>Support Task</td><td>Portal </td><td>High</td><td>New</td><td>14-MAY-2012</td><td>Nathan Baker - Doozer</td><td>14-MAY-2012</td><td>34</td>
        </tr><tr style="background-color:#E6E6E6;">
            <td>DOOZER1</td><td><a href="ticket2.aspx?action=edit&amp;ticket_id=10041">nb test</a></td><td>Project</td><td>Portal </td><td>Normal</td><td>New</td><td>13-JUN-2012</td><td>Nathan Baker - Doozer</td><td>13-JUN-2012</td><td>12</td>
        </tr></tbody>
</table>
</div>

Update

Thank you to fudgey for your replies. I can't seem to get this to work no matter what I try. Basically what I need to do is in the jquery tablesorter, I need to have the sortList value be a variable. It would need to look like this:

var currentSort;

    $('#gvTickets').tablesorter({
        // sort on the last column, order asc 
        sortList: currentSort
    }).bind("sortEnd", function(sorter) {
        currentSort = sorter.target.config.sortList;

    });

I need to store the currentSort in Session and retrieve it via an ajax call then sort the grid in the same way it was last viewed. If the user hits the page, sorts the grid, leaves the page and then returns I need it to be sorted in the same way as the last time they were on the page as long as it's within the scope of the session state.

Answer 1

Use the index to find the text from the header - it might even be easier to use the saved headerList like this (demo):

$('#gvTickets')
    .tablesorter({
        // sort on the last column, order asc 
        sortList: [[9, 0]]
    })
    .bind("sortEnd", function(event) {
        var table = event.target,
            currentSort = table.config.sortList,
            // target the first sorted column
            columnNum = currentSort[0][0],
            columnName = $(table.config.headerList[columnNum]).text();

        console.log(columnName);

    });​

Answer 2

You can also capture it outside, anywhere else (e.g. in your function, start of ajax, ..), and only when needed and not on every click, with a bit less overhead like this:

lastSortList=$("#mytable")[0].config.sortList;

And example for sorting it back after ajax update:

$("#mytable").trigger("sorton", [lastSortList]);

Remember to declare the first line in the right scope though.