使用 Tablesorter 禁用 table header 中的 up/down 图标，而不是隐藏它

Question

以下是 table 使用 Tablesorter.js 对内容进行排序的图像。当我们点击 table header 时，它会进行相应的排序，但同时只会显示当前排序顺序的图标。另一个将从视图中隐藏。

我需要的是，只禁用不活动的图标，即如果排序是降序和 vice-versa.

，则禁用向上箭头

谢谢。

Answer 1

你可以这样做。在您的 css 中添加两个 classes

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);
}

将 background-image 替换为您要显示的图像，即禁用向上箭头和 vice-versa.

的向上和向下箭头

现在在你的 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 将分别添加 'up' 和 'down' class。

Documentation

它将完成 you.In 我的 jsfiddle 的工作，你可以看到 classes 正在添加排序。

Fiddle.

使用 Tablesorter 禁用 table header 中的 up/down 图标，而不是隐藏它

Disable up/down icon from table header using Tablesorter, instead of hiding it

jquery

tablesorter

html-table