Sort arrows in 2.3 and later
Sort arrows in 2.3 and later

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?
This question has an accepted answers - jump to answer
Answers
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
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.
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:And
:after
: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
Thanks for your help, got it working nearly identical as before:
Nice one - thanks for sharing that! Here is the updated example with that.
Allan