BS5 using old icon for sorting

BS5 using old icon for sorting

lenamtllenamtl Posts: 261Questions: 64Answers: 1

Hi,

I'm updating Datatables to the latest version.
I'm using Bootstrap 5 and Fontawesome.
I find the new sorting splitted arrow less intuitive and not much visible compare to the old version.

I would like to use the old icons style wich was a single icon per state
unsorted / asc /desc
See this old version icon for sorting

See this exampe for sorting icon style
https://jsfiddle.net/lenamtl/ztwbv1cf/

Any help is appreciated

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 56,849Questions: 1Answers: 9,035 Site admin

    Hi,

    You are using DataTables 1.10.21 there. Try upgrading to 1.12.1, the current release, which uses sorting icons more consistent when how the default DataTables style does it. Examples here.

    Allan

  • lenamtllenamtl Posts: 261Questions: 64Answers: 1
    edited August 2

    Hi @Allan,

    I'm using the latest Datatables version and I would like to use the old icon (which was present in older Datatables).

    The new method (link you provided) the new icons are not very visible and not intuitive to my opinion compare to the old method so this is why I want to keep the old icons method.

    So I'm looking for help to get the old icon method back.

  • allanallan Posts: 56,849Questions: 1Answers: 9,035 Site admin
    Answer ✓

    Oh I see - sorry, I misunderstood. We don't have a built in option for that, but you could override the CSS with some custom CSS to do that. This is where the icons are defined.

    Allan

  • lenamtllenamtl Posts: 261Questions: 64Answers: 1

    Hi,

    The main problem I'm having is how to display unselected arrow the third icon,
    when no sort is set on a column?

  • lenamtllenamtl Posts: 261Questions: 64Answers: 1

    I have managed to display icon 100%

    On page load if no selection both arrow are displayed one over the other (overlap)
    instead of displaying the third icon.

    So how I can display the third icon?

  • lenamtllenamtl Posts: 261Questions: 64Answers: 1

    Solution I simply copy the old CSS code from 1.10 for the sorting ...

    That could be a good idea to provide both options or at least make them more userfriendly and more visible.

    Thanks

Sign In or Register to comment.