Question

将可点击的上传/上/下图标添加到tablesorter表的每个可排序列的标题的最小解决方案是什么，例如https://web.archive.org/web/20170112030141/http://jsfiddle.net/fu12ye88/（pic）？

我发现的所有解决方案都需要相对较大的附加库，例如https://web.archive.org/web/20170112030034/http://jsfiddle.net/Mottie/abkNM/325/

Answer 1

如果你转到the docs，你会发现很多方法来自定义你的排序表。

我从给定的示例（https://mottie.github.io/tablesorter/）中取出了css并将其中的一部分应用到你的小提琴和the result is exactly what you want：

.tablesorter-default .header,
.tablesorter-default .tablesorter-header {
  background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
  padding: 4px 20px 4px 4px;
  background-repeat: no-repeat;
  background-position: center right;
}

.tablesorter-default thead .headerSortUp,
.tablesorter-default thead .tablesorter-headerAsc,
.tablesorter-default thead .tablesorter-headerSortUp {
  background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
}

.tablesorter-default thead .headerSortDown,
.tablesorter-default thead .tablesorter-headerDesc,
.tablesorter-default thead .tablesorter-headerSortDown {
  background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
}

将updown / up / down图标添加到tablesorter表

1 个答案: