How to change the color of the sorting arrows in DataTables

Admin 1
Viewed 9481

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

datatables css html
3 Answers

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")
}
user_57468920

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.

user_23393560
Related