tablesorter 不显示图标或删除图标

Question

我已经在我的 gridview 中实现了 tablesorter() 并将它放到某些列无法排序的地方。但是，我无法在排序时显示升序和降序图标，也无法让默认图标不显示在无法排序的列上。我有以下 css

    .tablesorter .tablesorter-header.sorter-false {
        background-image: url();
    }
    .tablesorter th.headerSortUp {       
        background-image: url(../images/small_asc.gif);  
        background-position: right center;  
        background-repeat:no-repeat;   
    }  
    .tablesorter th.headerSortDown {       
        background-image: url(../images/small_desc.gif);     
        background-position: right center;  
        background-repeat:no-repeat;   
    }

Answer 1

Original tablesorter

当使用原始的 table 排序器 (v2.0.5) 时，"sorter-false" 永远不会应用于 header。 header class 名称已删除 (demo)。

如果您没有使用包含的主题，请确保 cssAsc、cssDesc 和 cssHeader 设置为与正在使用的 classes 匹配（分别为 "headerSortUp"、"headerSortDown" 和 "header"；这是默认设置）。

并且不要忘记定义 header css:

th.header { 
    background-image: url(../img/small.gif); 
    cursor: pointer; 
    font-weight: bold; 
    background-repeat: no-repeat; 
    background-position: center left; 
    padding-left: 20px; 
    border-right: 1px solid #dad9c7; 
    margin-left: -1px; 
}

Fork of tablesorter

如果您使用的是我的 tablesorter 分支，则会向 table 元素添加一个整体主题 class 名称。如果不定义主题名称，则默认为 "tablesorter-default".

header class 名称有不同的默认值，"sorter-false" class 应用于 header 是 non-sorting。

$('table').tablesorter({
  cssAsc    : '', // tablesorter-headerAsc
  cssDesc   : '', // tablesorter-headerDesc
  cssHeader : '', // tablesorter-header
  cssNone   : ''  // tablesorter-headerUnSorted
});

默认值为空，因为它们允许为每个排序状态添加附加 classes。 "tablesorter-headerAsc"、"tablesorter-headerDesc"、"tablesorter-header" 和 "tablesorter-headerUnSorted" 的 class 名称分别始终应用。

这导致禁用 header 获得以下 class 名称：

<th class="sorter-false tablesorter-header tablesorter-headerUnSorted"></th>

所以这意味着您可以使用以下 css（使用编码图像）：

.tablesorter-header {
    background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
    background-position: center right;
    background-repeat: no-repeat;
    cursor: pointer;
    white-space: normal;
    padding: 4px 20px 4px 4px;
}
.tablesorter-headerAsc {
    background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
}
.tablesorter-headerDesc {
    background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
}
.tablesorter .sorter-false {
    background-image: none;
    cursor: default;
    padding: 4px;
}

tablesorter 不显示图标或删除图标

tablesorter not showing icons or removing icons

css

tablesorter

gridview-sorting

Original tablesorter

Fork of tablesorter