javascript - TableSorter：如何更改排序箭头的位置

Question

我正在实现jquery的tablesorter。我需要更改相对于列标题的排序箭头位置。

这是我到目前为止所做的：

table.tablesorter thead tr .header {
    background-image: url(bg.gif);
    background-repeat: no-repeat;
    background-position: 80% 70%;
    cursor: pointer;
}

这适用于列，但不适用于与标题重叠或向右很远的其他列。
有没有办法让箭头始终显示在列标题旁边？

Answer 1

如果您使用默认的蓝色主题，您需要做的就是更改箭头的背景位置，然后添加左填充以将文本移开 -演示

table.tablesorter thead tr .header {
    background-position: left center;
    padding-left: 20px;
}​

Answer 2

从最新的dataTablesv.1.10.4 （2014 年 12 月 8 日）开始，他们更改了类的名称。如果您希望将排序箭头放在列标题的左侧，则应使用以下 CSS 以获得所需的结果：

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled
 {
    background-position: left center;
    padding-left: 20px;
}​

Answer 3

您可以在更改类的列名之后添加一个跨度。例如：

<tr>Column 1 <span class="sort-arrow" /></tr>

这个问题似乎很相似，并提供了类似于上面的解决方案：jquery tablesorter CSS arrow icons

Answer 4

接受的答案对我不起作用。要将排序箭头保留在表格标题文本的左侧，这很有效：

.tablesorter-header {
  display: table-cell !important;
  vertical-align: middle !important;
  background-position: left center !important;
  padding-left: 20px;
}

.tablesorter-header-inner{
  padding-left: 25px;
}