tablesorter不显示图标或删除图标

Ethel Patrick 发表于 Dev

埃塞尔·帕特里克（Ethel Patrick）

我已经在我的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;   
    }

莫蒂

原始表分类器

使用原始表排序程序（v2.0.5）时"sorter-false"，永远不会将a应用于标题。在header类名被删除（演示）。

如果不使用附带的主题，那么请确保cssAsc，cssDesc并且cssHeader设置为匹配所使用的类（"headerSortUp"，"headerSortDown"并"header"分别;这是默认设置）。

并且不要忘记定义headercss：

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; 
}

餐桌分叉

如果您使用的是我的tablesorter分支，则将整个主题类名称添加到table元素。如果未定义主题名称，则默认为“ tablesorter-default”。

标头类名称具有不同的默认值，并且"sorter-false"该类适用于未排序的标头。

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

默认值是空的，因为它们允许为每个排序状态添加其他类。的类名"tablesorter-headerAsc"，"tablesorter-headerDesc"，"tablesorter-header"和"tablesorter-headerUnSorted"分别总是应用。

这导致禁用的标头获得以下类名称：

<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;
}