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

【问题标题】：How to change the color of the sorting arrows in DataTables如何更改 DataTables 中排序箭头的颜色
【发布时间】：2017-12-04 17:43:44
【问题描述】：

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

CSS

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

谢谢

【问题讨论】：

标签： html css datatables

【解决方案1】：

我想通了。 DataTables 正在使用图像作为图标，因此我们不能只更改颜色。为此，我们需要用我们选择的颜色替换图标图像。因此，在下面的 CSS 中，我只是将 DataTables 中的图像替换为我需要的图像。

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

【讨论】：

【解决方案2】：

您无法更改数据表中排序图标的颜色，因为它们不是图标，它们是PNG 图像。您需要覆盖这些 CSS 属性。 （数据表 1.10）

升序

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

降序

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

均已禁用

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

禁用升序

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

降序禁用

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

【讨论】：

【解决方案3】：

如果您使用的是引导版本的数据表，那么添加这个 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，这会使图标变暗。

【讨论】：