如何更改jQuery DataTable排序图标颜色

Question

jQuery datatables排序图标不正确，因此如何更改排序图标的颜色，我想将颜色更改为black

Answer 1

您在数据表中提到的排序图标不是图标。它是图像，ASC Image和DESC Image。因此，您无法改变颜色。但是我们可以通过您选择的另一个选择替换图像（带有所需颜色的相似图像）。

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>