Question

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

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图像也一样。希望这有帮助

这是一个工作示例

＆＃13;

$(document).ready(function() {
  $('#example').dataTable();
});

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: