如何使用jquery tablesorter获取单击列的名称

时间:2012-06-29 17:06:54

标签: jquery tablesorter

我正在使用jquery tablesorter插件对asp.net应用程序中的gridview进行排序。我可以捕获列索引,但似乎无法弄清楚如何获取列名。

这就是我正在做的事,有人可以帮忙吗?

var currentSort;

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

        });

提前谢谢!

这是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>

感谢你对你的回复嗤之以鼻。无论我尝试什么,我似乎无法让它工作。基本上我需要做的是在jquery tablesorter中,我需要将sortList值作为变量。它需要看起来像这样:

var currentSort;

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

    });

我需要在Session中存储currentSort并通过ajax调用检索它,然后按照上次查看的方式对网格进行排序。如果用户点击页面,对网格进行排序,离开页面然后返回我需要以与上次在页面上相同的方式对其进行排序,只要它在会话状态的范围内。

有没有人知道处理这个问题的方法?

谢谢

2 个答案:

答案 0 :(得分:2)

使用索引查找标题中的文字 - 使用保存的headerList可能更容易(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);

    });​

答案 1 :(得分:2)

你也可以在外面,其他任何地方(例如你的函数,ajax的开始......)捕获它,并且仅在需要时捕获它,而不是在每次点击时捕获它,如下所示:

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

以及在ajax更新后对其进行排序的示例:

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

请记住在正确的范围内声明第一行。