El ícono de ordenación de Datos de Jquery no se ve correctamente. Entonces, cómo cambiar el color del ícono de ordenación, quiero cambiar el color a negro
Respuestas
3 para la respuesta № 1El icono de ordenación que menciona en los Datos de Datos no es un icono. Es una imagen, imagen de asc y imagen de desc. Por lo tanto no se puede cambiar el color. Pero podemos reemplazar la imagen por otra de su elección (imagen similar con su color requerido).
La imagen se establece en el th por css
Para clasificación
table.dataTable thead .sorting_asc {
background-image: url(../images/sort_asc.png);
}
Para ordenar descendente
table.dataTable thead .sorting_desc {
background-image: url(../images/sort_desc.png);
}
Usted puede sobrescribe esta regla con tu CSS personalizado.
#YourTableID thead .sorting_asc {
background-image: url(../yourImage.png);
}
Lo mismo ocurre con la imagen desc .. Espero que esto ayude
Aquí hay un ejemplo de trabajo.
$(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>