DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

Sort icons are odd in Bootstrap 5 DataTables-1.13.6 package

Sort icons are odd in Bootstrap 5 DataTables-1.13.6 package

bbrindzabbrindza Posts: 316Questions: 73Answers: 1
in DataTables 1.10

I am using Bootstrap 5 DataTables-1.13.6 package and everything seems good except the sort icons.
When I use the inspect in developer tools for Chrome its does not show an arrow image, but what appears seems to be a UTF-8 character

table.dataTable thead>tr>th.sorting:before,
table.dataTable thead>tr>th.sorting_asc:before,
table.dataTable thead>tr>th.sorting_desc:before,
table.dataTable thead>tr>th.sorting_asc_disabled:before,
table.dataTable thead>tr>th.sorting_desc_disabled:before,
table.dataTable thead>tr>td.sorting:before,
table.dataTable thead>tr>td.sorting_asc:before,
table.dataTable thead>tr>td.sorting_desc:before,
table.dataTable thead>tr>td.sorting_asc_disabled:before,
table.dataTable thead>tr>td.sorting_desc_disabled:before {
bottom: 50%;
content: "â–²";
content: "â–²" /"";
}

Replies

  • allanallan Posts: 63,489Questions: 1Answers: 10,470 Site admin

    You might need to set charset="utf8" on link you are using to import the CSS. That will happen if your page is some other character set.

    Allan

  • bbrindzabbrindza Posts: 316Questions: 73Answers: 1

    Hi Allan. That did not work.

    I am already including the <meta charset="UTF-8"> tag in the <head> of my script. Never had a problem with DataTables locally on our system over the years.

    We have always just downloaded the latest version from https://datatables.net/download/ . unzipped and moved to out htdocs directory folder.

  • allanallan Posts: 63,489Questions: 1Answers: 10,470 Site admin

    Doesn't sound good! I haven't been able to reproduce the error though unfortunately.

    Steps I've tried:

    1. Load the download page
    2. Click "Bootstrap 5" to select that styling framework
    3. Scroll down to the download methods and click the "Download" tab
    4. Click the download button
    5. Unzip the file, which when I look with vim I see this for the sorting icons:

    Is that inline with what you've used?

    Allan

  • bbrindzabbrindza Posts: 316Questions: 73Answers: 1

    OK so I downloaded the Bootstrap 5 DataTables-1.13.6 package again. Same results.

  • bbrindzabbrindza Posts: 316Questions: 73Answers: 1

    The CSS from VS does show the arrow images however when it is pulled into my webpage it show the content as "â–²"/"" and "â–²". Does the DataTables-1.13.6/datatables.min.js have any impact on this?

  • allanallan Posts: 63,489Questions: 1Answers: 10,470 Site admin

    What character set does VSCode show the file as? Given that it appears correct in VSCode there is something going wrong either during the transfer to the server or from the server to the client. If you can link to the page in question I might be able to identify the issue using Firefox's document properties and cURL.

    Allan

  • bbrindzabbrindza Posts: 316Questions: 73Answers: 1

    /*
    * This combined file was created by the DataTables downloader builder:
    * https://datatables.net/download
    *
    * To rebuild or modify this file with the latest versions of the included
    * software please visit:
    * https://datatables.net/download/#bs5/dt-1.13.6
    *
    * Included libraries:
    * DataTables 1.13.6
    */

    @charset "UTF-8";

  • bbrindzabbrindza Posts: 316Questions: 73Answers: 1

    Using CTRL + U in Chrome shows this..
    <!DOCTYPE html>
    <html lang="en">
    <head>

    <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Research Development Home Page">
<meta name="author" content="Bob Brindza - Galactic Viceroy of IT Excellence ">
  • allanallan Posts: 63,489Questions: 1Answers: 10,470 Site admin

    That's the darnest thing. I honestly don't know what is going on - I don't recall any other cases of this being reported. Is there any way you can link me to the page so I can check the binary data coming over the wire?

    Nice job title btw :). I need to have a word with my own boss (looking in the mirror) about titles.

    Allan

  • bbrindzabbrindza Posts: 316Questions: 73Answers: 1

    :D Title only for testing purposes. Unfortunately, this site is internal for our users and is behind our firewall. I will send you an email with some options for us.
    Once we resolve this issues, I will post the solution in this thread for the rest of the community

  • bbrindzabbrindza Posts: 316Questions: 73Answers: 1
    edited October 2023

    Made a change to Apache httpd.conf file to include .css to the "AddCharset UTF-8 .htm .html .xml .css"

    All is well .

    Thank you for your assistance Alan.

  • allanallan Posts: 63,489Questions: 1Answers: 10,470 Site admin

    Good to hear we got to the bottom of it.

    Allan

  • LimpEmuLimpEmu Posts: 68Questions: 18Answers: 1

    Hello:
    I have the same problem. I downloaded the datatables files through the download builder, but kept them all separate. With version 1.11.3 (the version I upgraded from), all my sort icons look good, but when I replace version 1.11.3 with version 1.13.8 I get the funny sort characters exactly as described in this message.
    It looks like for version 1.11.3, an image is used:

    table.dataTable thead .sorting_desc {
    background-image: url(../images/sort_desc.png) !important;
}

    but for 1.13.8, the CSS shows:

    thead>tr>th.sorting:before, table.dataTable thead>tr>th.sorting_asc:before, 
[...]
thead>tr>td.sorting_desc_disabled:before {
    bottom: 50%;
    content: "â–²";
    content: "â–²"/"";
}

    When I add charset="utf-8" to the style tag, the problem is fixed, but this apparently is not supported in all browsers.

    I compared the non-minimized and minimized versions of the 1.13.8 stylesheets. The non-minimized version's first line is

    @charset "UTF-8";

    which seems to be not included in the minimized file. Could that be the problem?
    Beate

  • allanallan Posts: 63,489Questions: 1Answers: 10,470 Site admin

    but this apparently is not supported in all browsers.

    What browsers don't support utf8?

    What you really want is your http server to serve that file as utf8.

    I have actually changed this in the latest code in got to use ASCII characters only (escaped code points), which will solve it.

  • LimpEmuLimpEmu Posts: 68Questions: 18Answers: 1

    Hi Alan:

    You are right, my statement was incorrect, based on https://html.spec.whatwg.org/multipage/obsolete.html#attr-link-charset, the charset="utf-8" attribute on the style tag is obsolete, so it should not be necessary to use it.

    I do use a meta tag to indicate UTF-8.
     
    Both, Edge and Chrome, were updated on my DEV system yesterday, and I could swear that with the previous versions of Edge and Chrome, all worked fine, I would have noticed the arrows not showing up. Very odd.

    Thank you for updating the code, I much appreciate your support!
    Beate

Sign In or Register to comment.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.