CODEWITHSUNDEEP
htmlcssdatatables
user8207635
user8207635

Reputation:

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.

Upvotes: 6

Views: 13752

Answers (4)

Cyrille37
Cyrille37

Reputation: 1

With datatables (I'm using v 2.1.8) you can change color with CSS :

/* order arrows default */
table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-order::before,
table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-order::after,
table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order::before,
table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order::after,
table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order::before,
table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order::after,
table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order::before,
table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order::after,
table.dataTable thead>tr>td.dt-orderable-asc span.dt-column-order::before,
table.dataTable thead>tr>td.dt-orderable-asc span.dt-column-order::after,
table.dataTable thead>tr>td.dt-orderable-desc span.dt-column-order::before,
table.dataTable thead>tr>td.dt-orderable-desc span.dt-column-order::after,
table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order::before,
table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order::after,
table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order::before,
table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order::after {
    color: red;
}

Upvotes: 0

Avnish Tiwary
Avnish Tiwary

Reputation: 2276

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.

Upvotes: -1

Manish Thomas
Manish Thomas

Reputation: 199

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

Upvotes: 3

user8207635
user8207635

Reputation:

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

Upvotes: 7

Related Questions