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

Posted 2023-05-07

【中文标题】如何更改 DataTables 中排序箭头的颜色

【英文标题】：How to change the color of the sorting arrows in 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;

谢谢

【参考方案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，这会使图标变暗。