Sort arrows in 2.3 and later

Balkoth

A previous update changed the sort arrows from

to

Before v2.3 you could just copy the css of the previous version and get the imho way better looking side-by-side arrows back. Now with the column header changes v2.3 broke this approach. Can someone help?

allan

Hi,

What version were you using before which had the side-by-side vertical arrows? Also, is that Bootstrap styling? v4 / 5?

I've just tried it back to DataTables 2.0 and it uses the stack arrows like in 2.3.

To change the arrows you'd need to alter the CSS used for the display of the cons. I just took a look at the Bootstrap icons and there doesn't appear to be side-by-side vertical ones so perhaps it is something different you were using?

Allan

Balkoth

The up and down side-by-side arrows were at least in
https://cdn.jsdelivr.net/npm/datatables.net-bs5@1.11.5/css/dataTables.bootstrap5.css
and no longer used in
https://cdn.jsdelivr.net/npm/datatables.net-bs5@1.13.2/css/dataTables.bootstrap5.css

This is the transition period i have in my source control when i copied the css for the sorting.

allan

Thanks for the extra information. I've created this little example with 1.11.5: https://live.datatables.net/yiguteho/1/edit .

It uses styling such as for :before on the element:

right: 1em;


.dt-column-order:before {
  content: "↑" !important;
}

And :after:

right: .5em;
content: "↓";

You can target the span.dt-column-order element in 2.3 and apply content and positioning to the before/after pseudo elements to get something similar as 1.11: https://live.datatables.net/daqaruyi/1/edit .

You might wish to tweak the opacity as well.

Allan

Balkoth

Thanks for your help, got it working nearly identical as before:

table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order:before,
table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:before,
table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order:before,
table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order:before {
    top: -2px !important;
    bottom: 0 !important;
    opacity: 0.3 !important;
    content: "\2191" !important;
    line-height: 1.5em !important;
    font-size: 1em !important;
}

table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order:after,
table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:after,
table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order:after,
table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order:after {
    top: -2px !important;
    bottom: 0 !important;
    left: 0.5em !important;
    opacity: 0.3 !important;
    content: "\2193" !important;
    line-height: 1.5em !important;
    font-size: 1em !important;
}

table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:before,
table.dataTable thead > tr > th.dt-ordering-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-desc span.dt-column-order:after {
    opacity: 1 !important;
}

allan

Nice one - thanks for sharing that! Here is the updated example with that.

Allan