如何更改DataTables中排序箭头的颜色

Question

我正在使用DataTables，并且需要将默认的（紫色）排序箭头的颜色更改为其他颜色。 我正在尝试的代码会更改整个标题行的颜色，而我只需要更改图标的颜色。 是否有其他类可用，因为下面的代码对我没有帮助。

CSS

table.dataTable thead .sorting, 
table.dataTable thead .sorting_asc, 
table.dataTable thead .sorting_desc {
   color : yellow;
}

谢谢

- user8207635

Answer 1

我想通了。 DataTables 使用图片作为图标，因此我们不能直接在运行时更改其颜色。为了实现这一点，我们需要用我们选择的颜色替换图标图片。因此，在下面的CSS中，我只需将DataTables中的图像替换为我所需的图像即可。

table.dataTable thead .sorting_asc {
background-image: url("../images/integration/upArrow.gif");
}

- user8207635

Answer 2

由于Datatables中的排序图标不是图标而是PNG图像，因此您无法更改其颜色。您需要覆盖这些CSS属性。（DataTables 1.10）

• Ascending
  

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

• Descending

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

• Both Disabled
  

  table.dataTable thead .sorting {
      background-image: url("/YourImageFolder/sort_both.png")
  }
  

• Ascending Disabled
  

  table.dataTable thead .sorting_asc_disabled {
      background-image: url("/YourImageFolder/sort_asc_disabled.png")
  }
  

• Descending Disabled
  

  table.dataTable thead .sorting_desc_disabled {
      background-image: url("/YourImageFolder/sort_desc_disabled.png")
  }
  

- Manish Thomas

Answer 3

如果您正在使用DataTable的Bootstrap版本，那么添加这个CSS代码将达到您需要的效果。

table.dataTable thead .sorting:after, 
table.dataTable thead .sorting_asc:after, 
table.dataTable thead .sorting_desc:after {
  color : yellow;
  opacity: 0.6 !important;
}

根据您的需要更改颜色和不透明度。默认不透明度为0.2，使图标变暗。

- Avnish Tiwary