Question

我正在尝试将分拣机图像应用于表格分类器表，如下所示。但样式不适用。使用下面的js文件

https://github.com/Mottie/tablesorter

默认情况下，主题正在应用，因此我的表设计正在发生变化。我不希望图像分类器主题的图像我将应用自定义CSS。请检查以下代码分拣机图像是否适用于我的分拣机。

<style type="text/css">
.tablesorter thead tr .header {
    background-image: url('/Public/images/sorter/bg.gif');  
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
}
.tablesorter thead tr .headerSortUp {
    background-image: url('/Public/images/sorter/asc.gif'); 
}
.tablesorter thead tr .headerSortDown {
    background-image: url('/Public/images/sorter/desc.gif'); 
}
 </style>
<script type="text/javascript">
    $('#requestheader').tablesorter({
       /* theme: 'blue',*/
        sortList: [
            [1, 0]
        ],
        widgets: ['zebra', 'columns']
    });
 </script>

 <table class="tablesorter" id="requestheader"> 
                <thead>
                   <th></th>
                  <th></th>
                </thead>
                <tbody>
                </tbody>
</table>

请告诉我如何将分拣机图像应用到桌面上？让我知道如何将css应用到我的桌子上？

Answer 1

尝试将jQuery代码包装在 DOM ready 处理程序中：

$(function() {
    $('#requestheader').tablesorter({
       /* theme: 'blue',*/
        sortList: [
            [1, 0]
        ],
        widgets: ['zebra', 'columns']
    });
});

Answer 2

最新版本的tablesorter使用原始版本中的不同类名。尝试使用以下css：

.tablesorter thead tr .header {
    background-image: url('/Public/images/sorter/bg.gif');  
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
}
.tablesorter thead tr .headerSortAsc {
    background-image: url('/Public/images/sorter/asc.gif'); 
}
.tablesorter thead tr .headerSortDesc {
    background-image: url('/Public/images/sorter/desc.gif'); 
}

如果您想更改实际的班级名称，请修改cssAsc和cssDesc option。

表分拣机图像不适用于tablesorter.js？

2 个答案: