将排序箭头添加到<th>表格分拣机

Question

我正在尝试像tableorter插件一样向我的表添加双箭头(向上和向下).

这是我的小提琴.出于某种原因,甚至没有一个箭头显示在jsfiddle中,但它可以在我的原始表格上运行.

我试过这个:

$("table th").addClass("headerSortUp");
$("table th").addClass("headerSortDown");

但它没有用.知道怎么做吗？

Answer 1

没有图像的最佳解决方案,纯CSS.只是把类名headerSortDown和headerSortUp上td或th行光标将出现.

table td,
table th {
  border: 1px solid silver;
}

.headerSortDown:after,
.headerSortUp:after {
  content: ' ';
  position: relative;
  left: 2px;
  border: 8px solid transparent;
}

.headerSortDown:after {
  top: 10px;
  border-top-color: silver;
}

.headerSortUp:after {
  bottom: 15px;
  border-bottom-color: silver;
}

.headerSortDown,
.headerSortUp {
  padding-right: 10px;
}

<table>
  <thead>
    <tr>
      <th class="headerSortDown">ID</th>
      <th class="headerSortUp">Username</th>
      <th>Fullname</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John</td>
      <td>John Doe</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jenny</td>
      <td>Jenny Smith</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Tom</td>
      <td>Tom Doe</td>
    </tr>
  </tbody>
</table>

另请查看我的JSFiddle:http://jsfiddle.net/rTXXz/以获取一个工作示例.

更新:固定为铬

Answer 2

问题在于你的.headerSortUp背景。我已将其更改为以下内容：

background: url(http://tablesorter.com/themes/blue/bg.gif) no-repeat 99%;

jsFiddle 与绝对 bg