如何更改Jquery数据表排序图标的颜色 [英] How to change Jquery datatable sort icon color

问题描述

jQuery Datatables排序图标不正确可见，所以如何更改排序图标的颜色，我想将颜色更改为黑色

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

推荐答案

您在数据表中提到的排序图标不是图标..它是图像，

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

图像由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图像也一样.希望这对您有帮助

same goes for desc image.. Hope this helps

这是一个可行的例子

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

这篇关于如何更改Jquery数据表排序图标的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！