DataTables download builder - Bootstrap

Balkoth · April 2021

Hi,

there is a problem with how the download builder merges files:

Styling Framework: Bootstrap 4
Packages: Bootstrap 4, DataTables
Download: Minify, Concatenate

The downloadbuilder advises to use: <link rel="stylesheet" type="text/css" href="DataTables/datatables.min.css"/>
This file has the content of "dataTables.bootsrap4.min.css" with a preceeding comment. The problem is in the encoding of "dataTables.bootstrap4.min.css" as this file is encoded in UTF-8-BOM. The resulting "datatables.min.css" has this BOM embedded in between the comment and the css.

The second problem that arises is that the resulting "datatables.min.css" is encoded in UTF-8. Here the BOM is suddenly missing. The comment then somehow confuses the browser (chrome, edge) to not load the css correctly.

<- dataTables.bootstrap4.min.css
<- datatables.min.css

If in any case more information is needed i will gladly help out.

Balkoth · May 2021

No one here thinks this is a problem?

colin · May 2021

Yep, we do, but we also like to sleep We're based in the UK, so it's 8AM here!

Please could you post the link to the URL that will generate these files, please. If you look in the generated file, you'll find that in the header.

Colin

Balkoth · May 2021

I don't want to sound rude, but the difference between sleeping and not responding for over a month is like the difference between night and day...

Since this is so old, i don't know the original link. Maybe it was https://datatables.net/download/#bs4/dt-1.10.24

kthorngren · May 2021

Likely Colin thought the same as I... Your second post was May 7 and your original was April 7. I didn't pay that close of attention and thought both were the same day.

Do you still have those files with the problem? If so the link can be found by opening either the CSS or JS.

Kevin

Balkoth · May 2021

Because it did not work back then i removed the comment and put

@charset "UTF-8";

in front of the file.

allan · May 2021

Initially I read it wrong as well! Although to be honest a month of sleep sounds rather good!

Apologies we missed your post originally - as you'll see there forums here are busy and although we try, and there are awesome community members like Kevin helping, we aren't always able to answer every single one.

I've got to confess I thought I've fixed this issue a while back - but obviously let! Let me dig into it a bit more and get back to you.

Allan

allan · May 2021

I've just tried this, but was unfortunately unable to reproduce the error.

Colin - could you try the following and let me know how it goes for you please?

Download options:

Download the package and unzip. Then place the following into a test.html file:

<!doctype html>
<html>
   <head>
      <title>Test</title>
      <link href="datatables.css" rel="stylesheet" type="text/css" />
      <script src="datatables.js"></script>
      <script>
         $(function() {
                  $('#example').DataTable();
         });
      </script>
   </head>
   <body>
      <table id="example" class="table table-striped nowrap" width="100%">
         <thead>
            <tr>
               <th>Name</th>
               <th>Position</th>
               <th>Office</th>
               <th>Age</th>
               <th>Start date</th>
               <th>Salary</th>
            </tr>
         </thead>
         <tfoot>
            <tr>
               <th>Name</th>
               <th>Position</th>
               <th>Office</th>
               <th>Age</th>
               <th>Start date</th>
               <th>Salary</th>
            </tr>
         </tfoot>
         <tbody>
            <tr>
               <td>Tiger Nixon</td>
               <td>System Architect</td>
               <td>Edinburgh</td>
               <td>61</td>
               <td>2011/04/25</td>
               <td>$3,120</td>
            </tr>
            <tr>
               <td>Garrett Winters</td>
               <td>Director</td>
               <td>Edinburgh</td>
               <td>63</td>
               <td>2011/07/25</td>
               <td>$5,300</td>
            </tr>
         </tbody>
      </table>
   </body>
</html>

And load it up in a browser (file:// is fine for this - doesn't need a web-server).

I get this:

Allan

colin · May 2021

Yep, I did the same, and also the CDN hosted, i.e.

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4-4.1.1/jq-3.3.1/dt-1.10.24/datatables.min.css"/>
 
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4-4.1.1/jq-3.3.1/dt-1.10.24/datatables.min.js"></script>

and the page loaded without errors. Are you still seeing the problem, as Allan said, it may have been already addressed?

Colin

Balkoth · May 2021

Using https://datatables.net/download/#bs4-4.1.1/jq-3.3.1/dt-1.10.24 i get a different result when using the files from the webserver than when using it from the local file system:

The css- and js-files on the file system are taken straight from the downloaded zip. The downloaded files in the archive look exactly the same as the ones on the cdn. I have no clue why this behaves differently.

Tested with:
Chrome Version 90.0.4430.212 (Offizieller Build) (64-Bit)
Edge Version 90.0.818.56 (Offizielles Build) (64-Bit)

colin · May 2021

That's because the local one is only including two files, datatables.min.css and datatables.min.js, whereas that long URL into the CDN is including many files as part of that URL, which you also need to include locally.

Colin

kthorngren · May 2021

I clicked the link you provided and downloaded the concatenated files. Looks like it works with the minified files:

The screenshot is Chrome 90.0.4430.93 (Official Build) (x86_64) on a Mac. It also works with Safari. I don't have a way to test with Edge.

Have you tried incognito mode or clearing the browser's cache?

Kevin

JLegault · May 2021

UTF-8 Encoding: UTF-8

ANSI Encoding: ANSI

My guess is that the downloaded files do not have an encoding header on them while the CDN ones do.

You really should be including a <meta charset="UTF-8"> tag in your headers anyways, but it might be something for the admin team to look into.

kthorngren · May 2021

Got it. I removed <meta charset="UTF-8"> and now see this with the local files:

Will let the developers comment on why the difference when loading locally.

Kevin

Balkoth · May 2021

@colin

That's because the local one is only including two files, datatables.min.css and datatables.min.js, whereas that long URL into the CDN is including many files as part of that URL, which you also need to include locally.

I don't think what you said about including files is correct. To my understanding when selecting minify and concatenate, the two files have all the necessary stuff packed together in those files. The browser dev tools do not complain about any missing files.

@kthorngren
In this simple example i can confirm that putting <meta charset="UTF-8"> in the html-head fixes the problem. In my realworld html page i already have it right there and its not helping. Only putting @charset "UTF-8"; in front of the css file fixes the problem for me there.

allan · May 2021

In my realworld html page

Can you link to that please?

Our files are UTF-8, so it would be up to the web-server to announce them as such. Using the <meta charaset short tag is the equivalent to the web server announcing the files as UTF-8 which is why that will allow it to work. That said, my test file above didn't use the meta short tag - perhaps my browser / OS is assuming UTF-8 by default?

Allan

allan · May 2021

Interesting - I've just tried it in Chrome without the meta short and see the error. On Firefox it is displaying correctly!

Checking the character set (document.characterSet) in each:

Chrome: windows-1252
Firefox: UTF-8

That certainly explains the difference between the browsers with local files.

It doesn't with a published HTML page though. It would be worth checking what character set your browser thinks it is displaying the page in.

Allan

p.s. The Chrome one is rather an odd choice since I'm using Ubuntu 20.04...

Balkoth · May 2021

Can you link to that please?

Unfortunately the site is on our company intranet, so i can't share a link. But as you can now reproduce the problem i think its no longer needed anymore.

It would be worth checking what character set your browser thinks it is displaying the page in.

I have checked this now, both Chrome and Egde on Windows 10 report "windows-1252" for the character set.

allan · May 2021

I'd say that's the issue and the fix then. Add the meta tag to override Chrome's dodgy default there .

Allan

DataTables download builder - Bootstrap

DataTables download builder - Bootstrap

Replies

Howdy, Stranger!

Categories

DataTables

DataTables download builder - Bootstrap

DataTables download builder - Bootstrap

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables