使用Tablesorter禁用表头中的向上/向下图标，而不是隐藏它

Question

以下是使用Tablesorter.js对表进行排序的表的图像。当我们点击表头时，它会相应地排序，但同时只显示当前的排序顺序图标。另一个将隐藏在视图之外。

我需要的是，只禁用未激活的图标，即如果排序为降序则禁用向上箭头，反之亦然。

谢谢。

Answer 1

你可以这样做。在你的CSS中添加两个类

thead th.up {
    padding-right: 20px;
    background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
}
thead th.down {
    padding-right: 20px;
    background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
}

将背景图像替换为您要显示的图像，即向上和向下箭头，禁用向上箭头，反之亦然。

现在在你的js代码中。

$('table').tablesorter({

    // customize header HTML
    onRenderHeader: function(index) {
        // the span wrapper is added by default
        this.wrapInner('<span class="icons"></span>');
    },
    cssAsc: 'up',
    cssDesc: 'down',
});

cssAsc和cssDesc将添加＆＃39; up＆＃39;并且＆＃39; down＆＃39;分别是。

Documentation

它将为你完成这项工作。在我的jsfiddle中你可以看到类添加排序。

Fiddle.