jquery - 如何更改Jquery数据表排序图标颜色

Question

Jquery Datatables排序图标不正确可见，那么如何更改排序图标的颜色，我想将颜色更改为黑色

Answer 1

您在数据表中提到的排序图标不是一个图标。它是一个图像，asc image和 desc image 。因此您无法更改颜色。但我们可以用您选择的其他图像替换该图像(具有您所需颜色的类似图像)。

图片通过css设置到第

升序排序

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);
    }

同样适用于描述图像..希望这有帮助

<小时/>

这是一个工作示例

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