How to change Jquery datatable sort icon color

问题

Jquery Datatables sort icon is not properly visible, So how to change color of the sort icon, I want to change the color to black

回答1:

The sort icon which you mention in the Datatables is not a icon.. It is a image, asc image and desc image. Hence you cannot change the color. But we can replace the image by another of your choice (similar image with your required color).

The image is set into the th by css

For sort asceding

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

For sort descending

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

You can overwrite this rule by your custom CSS.

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

same goes for desc image.. Hope this helps

Here is a working example

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

来源：https://stackoverflow.com/questions/41037787/how-to-change-jquery-datatable-sort-icon-color

标签

jquery

datatables