Ajuda na programação, respostas a perguntas / Jquery / Como alterar a cor do ícone de ordenação de dados do Jquery - jquery, datatables

Como alterar a cor do ícone de ordenação de dados do Jquery - jquery, datatables

Ícone de ordenação de dados de jQuery não está bem visível, Então, como alterar a cor do ícone de classificação, eu quero mudar a cor para preto

Respostas:

3 para resposta № 1

O ícone de classificação que você mencionou nos Datatables não é um ícone. É uma imagem, imagem asc e desc imagem. Por isso você não pode mudar a cor. Mas podemos substituir a imagem por outra de sua escolha (imagem semelhante com a cor desejada).

A imagem é colocada no th por css

Para classificar asceding

table.dataTable thead .sorting_asc {
background-image: url(../images/sort_asc.png);
}

Para classificar descendente

table.dataTable thead .sorting_desc {
background-image: url(../images/sort_desc.png);
}

Você pode sobrescreva esta regra pelo seu CSS personalizado.

#YourTableID thead .sorting_asc {
background-image: url(../yourImage.png);
}

mesmo vale para desc imagem .. Espero que isso ajude

Aqui está um exemplo de trabalho

$(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>