Question

我已经将tablesorter（）实现到我的gridview中，并将其放到某些列无法排序的位置。但是，我无法在排序时显示升序和降序图标，也无法在无法排序的列上显示默认图标。我有以下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

使用原始tablesorter（v2.0.5）时，"sorter-false"永远不会应用于标题。 header类名称已删除（demo）。

如果您没有使用所包含的主题，请确保将cssAsc，cssDesc和cssHeader设置为与所使用的类匹配（"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的fork，则会将整个主题类名添加到table元素中。如果您没有定义主题名称，则默认为＆＃34; tablesorter-default＆＃34;。

标题类名称具有不同的默认值，"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;
}

tablesorter没有显示图标或删除图标

1 个答案:

Original tablesorter

Fork of tablesorter