将 updown/up/down 个图标添加到 table 排序器 table

Question

将可点击的 updown/up/down 图标添加到 tablesorter table e.g. https://web.archive.org/web/20170112030141/http://jsfiddle.net/fu12ye88/ (pic) 的每个可排序列的 header 的最小解决方案是什么？

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

Answer 1

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

我从给定的示例中取出 css (https://mottie.github.io/tablesorter/) and applied some of it to your fiddle and 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 个图标添加到 table 排序器 table

Adding updown/up/down icons to tablesorter table

jquery

tablesorter