How to get sort icons showing?

How to get sort icons showing?

dbarondbaron Posts: 10Questions: 4Answers: 0

Hello, as a new user to DataTables I have been playing around with various styles and such for my first datatable. I tried the Bootstrap 4 version, but that did not seem 'fully baked', meaning, it did not seem to appear nearly as 'correct' as the example did. So, I then tried the Bootstrap 3 style. While it is 'better', the small sort icons in the column headers only show as empty boxes - no icons. I am using the CDN includes for css and js. Using chrome dev tools, it appears that the ::after definition for my table matches that of the example, yet no img appears. Also, no 'error' is reported, as usually occurs with a true path error. Any suggestions?

Thanks,

-David

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,140Questions: 26Answers: 4,735

    I use Datatables with Bootstrap 3 and don't have issues with the Bootstrap sorting images showing. However if I remove:
    https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css

    Then the sort images won't appear.

    Kevin

  • dbarondbaron Posts: 10Questions: 4Answers: 0

    Yes, I imagine removing the inclusion of the necessary css file would cause the problem. In my case I do have the include in my code. Besides the sort icons not working, the text of the headers is bolded (not sure why - it appears a 'user agent css' is over-riding the font-weight of none) and the data rows within the table are 'taller' than the demo - again, not sure why.

    Here is my table element:

    <

    table id="tbl-pieces" class="table table-striped table-bordered dt-responsive nowrap no-footer" cellspacing="0" style="width:100%;"> Other than the no-footer, that is directly copied from the demo.

    I have both css includes, literally copied and pasted from the demo, as well as the four .js includes, again, directly copied and pasted from the demo.

    Thanks again.

  • kthorngrenkthorngren Posts: 20,140Questions: 26Answers: 4,735

    A link to your code or posting a test case showing the problem is probably what's needed to troubleshoot.

    The table may also not look right if an error causes the Datatables to not finish initializing. Are there any errors in the console?

    Kevin

  • dbarondbaron Posts: 10Questions: 4Answers: 0

    Hi Kevin,

    My code only exists on my dev machine at this time. No, there are no errors at all in the chrome dev tools console. Regardless, I went 'back' to the Bootstrap 4 style and believe it or not, things are working fine with that. Not exactly matching the demo, but better than bootstrap 3. I think the issue may have been that the rest of my site (and thus the balance of the page the datatable is sitting inside of) is using BS 4...so maybe a conflict?

    Thanks for your help...

    -David

  • allanallan Posts: 61,438Questions: 1Answers: 10,049 Site admin
    Answer ✓

    Could you try the nightly version of the Bootstrap 4 integration for DataTables please.

    The current release of DataTables was before the alpha 6 of BS4 which saw major changes.

    Allan

  • dbarondbaron Posts: 10Questions: 4Answers: 0

    Thanks Allan. There did not appear to be a visual difference after switching to the nightly version. Which is fine... it appears ok. I'll keep using it for now.

    -David

  • allanallan Posts: 61,438Questions: 1Answers: 10,049 Site admin

    Good to hear - thanks for the feedback.

    The BS4 integration isn't being used too much yet (since BS4 is still in alpha), so if you do notice anything odd, just let me know.

    Allan

This discussion has been closed.