Datatables - Language change via JavaScript makes UI elements disappear instead of changing the language

Question

I've built a datatable using bootstrap styling and want to change the default language of the ui elements to German.

https://datatables.net/examples/advanced_init/language_file.html This states that i can load the language file in a script. When I try to do it, all language related UI elements disappear instead of being displayed in German. The result is the "naked" table with no features. What could be the problem? Sorry for the bad indentation, I had troubles pasting.

The script:

$(document).ready(function() {
    $('#example').DataTable( {
        "language": {
        "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/German.json"
        }
    } );    
} );

My whole site looks like this:

<html>
<head>
<%@ taglib prefix="Tags" uri="WEB-INF/tagXML.tld" %>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.14.0/css/mdb.min.css" rel="stylesheet">
<link href="css/addons/datatables.min.css" rel="stylesheet">
<title>title</title>
<style>
  body {
   padding-top: 90px;
  }
</style>
</head>
<body class="Site">
  <div class="container">

     <!--Table-->
     <table id="dtBasicExample" class="table table-hover table-sm">
     <!--Table head-->
       <thead>
         <tr>
           <th>#</th>
           <th>First Name</th>
           <th>Last Name</th>
           <th>Username</th>
           <th>Visits</th>
           <th>Age</th>
           <th>Country</th>
           <th>First Name</th>
           <th>Last Name</th>
           <th>Username</th>
           <th>Visits</th>
           <th>Age</th>
           <th>Country</th>
         </tr>
       </thead>
       <!--Table head-->
       <!--Table body-->
       <tbody>
         <tr>
           <th scope="row">1</th>
           <td>Mark</td>
           <td>Otto</td>
           <td>@mdo</td>
           <td>Mark</td>
           <td>Otto</td>
           <td>@mdo</td>
           <td>Mark</td>
           <td>Otto</td>
           <td>@mdo</td>
           <td>Mark</td>
           <td>Otto</td>
           <td>@mdo</td>
         </tr>
         <tr>
           <th scope="row">2</th>
           <td>Jacob</td>
           <td>Thornton</td>
           <td>@fat</td>
           <td>Mark</td>
           <td>Otto</td>
           <td>@mdo</td>
           <td>Jacob</td>
           <td>Thornton</td>
           <td>@fat</td>
           <td>Mark</td>
           <td>Otto</td>
           <td>@mdo</td>
         </tr>
         <tr>
           <th scope="row">3</th>
           <td>Larry</td>
           <td>the Bird</td>
           <td>@twitter</td>
           <td>Mark</td>
           <td>Otto</td>
           <td>@mdo</td>
           <td>Jacob</td>
           <td>Thornton</td>
           <td>@fat</td>
           <td>Mark</td>
           <td>Otto</td>
           <td>@mdo</td>
         </tr>
       </tbody>
       <!--Table body-->
     </table>
     <!--Table-->

</div>
</main>
<script>
$(document).ready(function () {
  $('#dtBasicExample').DataTable({
    "bInfo" : false
    "language" : {"url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/German.json"}
  });
$('.dataTables_length').addClass('bs-select');
});
</script>       
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="js/addons/datatables.min.js"></script>
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.14.0/css/mdb.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Google Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css? 
    family=Roboto:300,400,500,700&display=swap">
</body>
</html>

andrewJames · Accepted Answer · 2020-03-07T22:58:12.600

1

You should always include the protocol in your URLs - for example:

"language": {
  "url": "https://cdn.datatables.net/plug-ins/1.10.20/i18n/German.json"
}

That style of URL where the protocol is deliberately excluded is very old - and I don't think it is recommended these days - and as you see it does not work. See this question and answer:

2014.12.17: Now that SSL is encouraged for everyone and doesn’t have performance concerns, this technique is now an anti-pattern. If the asset you need is available on SSL, then always use the https:// asset.

Also, remember to include a comma between entries in your datatables definition.

"bInfo" : false <--- missing comma!

A missing comma will cause elements to disappear, as you mentioned in your question.

edited Mar 07 '20 at 22:58

answered Mar 07 '20 at 22:52

andrewJames

19,570
8
19
51

Thanks for your input. I changed my script accordingly. Sadly it still does not show any language related content. – Jartyyy Mar 08 '20 at 09:11
@Jartyyy - Your url is not the same as my example. Can you double check? – andrewJames Mar 08 '20 at 12:30

Datatables - Language change via JavaScript makes UI elements disappear instead of changing the language

1 Answers1

Linked