如何更改排序图标颜色
如何更改排序图标颜色
提问于 2016-12-08 10:58:35
Jquery Datatables排序图标不可见，因此如何更改排序图标的颜色，我希望将颜色更改为黑色。
回答 1
Stack Overflow用户
发布于 2016-12-08 11:08:22
您在“数据表”中提到的排序图标不是图标。这是一个图像，asc图像和desc图像。因此，您不能更改颜色。但我们可以用您选择的另一个图像(类似的图像与您所需的颜色)替换。
图像由css设置为th。
因为排序上升
table.dataTable thead .sorting_asc {
background-image: url(../images/sort_asc.png);
}用于排序降序
table.dataTable thead .sorting_desc {
background-image: url(../images/sort_desc.png);
}您可以使用自定义的CSS覆盖此规则。
#YourTableID thead .sorting_asc {
background-image: url(../yourImage.png);
}对于desc图像也是如此。希望这能有所帮助
下面是一个有用的例子
$(document).ready(function() {
$('#example').dataTable();
});#example thead .sorting_asc {
background-image: url(http://www.miankoutu.com/uploadfiles/2015-9-24/2015924141740312.png);
background-size: 20px 20px;
}
#example thead .sorting_desc {
background-image: url(http://www.miankoutu.com/uploadfiles/2015-9-24/2015924141733340.png);
background-size: 20px 20px;
}
#example .sorting {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Sort_both.svg/1000px-Sort_both.svg.png);
background-size: 20px 10px;
}<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
<table cellpadding="0" cellspacing="0" border="0" class="dataTable" id="example">
<thead>
<tr>
<th>Engine</th>
<th>Browser</th>
<th>Platform</th>
<th>version</th>
<th>grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td>Win 95+</td>
<td>4</td>
<td>X</td>
</tr>
<tr>
<td>Trident</td>
<td>Internet Explorer 5.0</td>
<td>Win 95+</td>
<td>5</td>
<td>C</td>
</tr>
<tr>
<td>Trident</td>
<td>Internet Explorer 5.5</td>
<td>Win 95+</td>
<td>5.5</td>
<td>A</td>
</tr>
<tr>
<td>Trident</td>
<td>Internet Explorer 6</td>
<td>Win 98+</td>
<td>6</td>
<td>A</td>
</tr>
</tbody>
</table>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41037787
复制相关文章
相似问题
腾讯云开发者
