代码之家 › 专栏 › 技术社区 › Val

如何从TableSorter插件获取当前排序顺序?

tablesorter jquery-plugins jquery

10

Val · 技术社区 · 16 年前

我刚刚开始使用ChristianBach优秀的TableSorter插件,我需要获得一个列当前的排序方向。我有几个专栏:

身份证件
名字
类别

ID和名称设置为不可排序,使用

headers:    { 0: {sorter: false}, 1: {sorter: false} }

我在name上添加了一个单击处理程序,以便它在category列上触发sort事件。使用示例“ Sort table using a link outside the table “,我可以让名称头触发类别排序——但很难编码为朝一个方向排序。

我如何才能让它看到分类列当前排序的当前方向,并按相反的方向排序?(我可以处理翻转值;因为排序顺序是0或1,所以我可以对值执行异或运算以得到相反的结果,比如 var sort; sort ^= sort; --我的问题是如何得到当前值。

下面是当前在“名称”列上设置单击处理程序的代码:

$("#nameCol").click(function() {
    var sorting = [[2, 0]];     /* sort 3rd col (Category) descending */
    $("#SearchResults").trigger("sorton", [sorting] );  /* SearchResults is the ID of the sortable table */
    return false;               /* cancel default link action on a#nameCol */
});

谢谢!

4 回复 | 直到 8 年前

1

2dvisio 12 年前

表标题都应调用相同的Click事件:

$('th').click(function() {
     handleHeaderClick(this);
});

然后单击处理程序应添加/删除适用的类。

function handleHeaderClick(hdr) {
    if ($(hdr).hasClass('headerSortDown') == true) {
        $(hdr).removeClass('headerSortDown');
        $(hdr).addClass('headerSortUp');
    } else if ($(hdr).hasClass('headerSortUp') == true) {
        $(hdr).removeClass('headerSortUp');
        $(hdr).addClass('headerSortDown');
    } else {
        $('th', myTable).removeClass('headerSortUp headerSortDown');
        $(hdr).addClass('headerSortDown');
    }
    doSomething();
};

我希望这有帮助。

2

23

Brendan Nee Joel 8 年前

你可以使用内置的 sortEnd 获取SortOrder的事件,如下所述: https://stackoverflow.com/a/4150187/363155

$('#yourtableId').on('sortEnd', function(event) {
    // Prints the current sort order to the console
    console.log(event.target.config.sortList);
});

3

9

e-motiv 12 年前

您还可以在外部、任何其他地方(例如,在您的函数中,从Ajax开始,…)捕获它,并且仅在需要时捕获,而不是每次单击时捕获,这样的开销会稍微少一些:

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

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

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

不过,记住在正确的范围内声明第一行。

4

3

Rochelle C 14 年前

我编写了一个函数来保存当前的排序顺序。这帮助我走出了一个桌子是从零开始重建的局面。

function SaveSortOrder(tablename) {
//returns an array of a tablesorter sort order
var hdrorder = new Array();
var hdrs = $("#" + tablename + " th");
var arrayindex = 0;
hdrs.each(function (index) {
    if ($(this).hasClass('headerSortDown')) {
        hdrorder[arrayindex] = [index, 0];
        arrayindex++;
    }
    else if ($(this).hasClass('headerSortUp')) {
        hdrorder[arrayindex] = [index, 1];
        arrayindex++;
    }       
});

return hdrorder;
}