How to change the color of the sorting arrows in DataTables

问题

I am using DataTables and I need to change the color of the sorting arrows from the default(purplish) to something else. Code that I am trying is changing the entire header row color while I need just the icons. Is there any other class because the below code is not helping me.

CSS

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

Thanks

回答1:

I figured it out. DataTables is using images for the icons so we cannot just change the color on fly. In order to do that we need to replace the icon images with the color of our choice. So in the below CSS, I simply replace the image from the DataTables with the one I needed.

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

回答2:

You cannot change the colour of the sort icons in Datatables because those are not icons they are PNG images. You need to override those CSS properties. (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")
}

回答3:

If you are using bootstrap version of datatable then adding this css will do the needful

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

change color and opacity as per your need. Default opacity is 0.2 that makes the icon dull.

来源：https://stackoverflow.com/questions/44851964/how-to-change-the-color-of-the-sorting-arrows-in-datatables

标签

html

css

datatables