数据表 - 通过 JavaScript 更改语言使 UI 元素消失而不是更改语言 [英] Datatables - Language change via JavaScript makes UI elements disappear instead of changing the language

查看:21
本文介绍了数据表 - 通过 JavaScript 更改语言使 UI 元素消失而不是更改语言的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我已经使用引导程序样式构建了一个数据表,并希望将 ui 元素的默认语言更改为德语.

https://datatables.net/examples/advanced_init/language_file.html这表明我可以在脚本中加载语言文件.当我尝试这样做时,所有与语言相关的 UI 元素都会消失,而不是以德语显示.结果是没有特征的裸"表.可能是什么问题呢?抱歉缩进不好,我在粘贴时遇到了麻烦.

脚本:

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

我的整个网站如下所示:

<头><%@ 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><风格>身体 {填充顶部:90px;}</风格><body class="站点"><div class="容器"><!--表格--><table id="dtBasicExample" class="table table-hover table-sm"><!--桌头--><头><tr><th>#</th><th>名字</th><th>Last Name</th><th>用户名</th><th>访问</th><th>年龄</th><th>国家</th><th>名字</th><th>Last Name</th><th>用户名</th><th>访问</th><th>年龄</th><th>国家</th></tr></thead><!--桌头--><!--表体--><tr><th scope="row">1</th><td>标记</td><td>奥托</td><td>@mdo</td><td>标记</td><td>奥托</td><td>@mdo</td><td>标记</td><td>奥托</td><td>@mdo</td><td>标记</td><td>奥托</td><td>@mdo</td></tr><tr><th scope="row">2</th><td>雅各</td><td>桑顿</td><td>@fat</td><td>标记</td><td>奥托</td><td>@mdo</td><td>雅各</td><td>桑顿</td><td>@fat</td><td>标记</td><td>奥托</td><td>@mdo</td></tr><tr><th scope="row">3</th><td>拉里</td><td>鸟</td><td>@twitter</td><td>标记</td><td>奥托</td><td>@mdo</td><td>雅各</td><td>桑顿</td><td>@fat</td><td>标记</td><td>奥托</td><td>@mdo</td></tr></tbody><!--表体--><!--表格-->

</main><脚本>$(document).ready(function () {$('#dtBasicExample').DataTable({bInfo":假语言":{url"://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/German.json"}});$('.dataTables_length').addClass('bs-select');});<!-- 可选的 JavaScript --><!-- 首先是 jQuery,然后是 Popper.js,然后是 Bootstrap JS --><script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5Kkn"cross/脚本<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqKaISfwNz4M" crossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4N.;<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"><!-- 字体真棒--><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"><!-- 谷歌字体--><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">

解决方案

您应该始终在 URL 中包含协议 - 例如:

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

故意排除协议的那种 URL 样式非常古老 - 我认为现在不推荐使用 - 正如您所见,它不起作用.请参阅此问题并回答:

<块引用>

2014.12.17:既然每个人都鼓励使用 SSL 并且没有性能问题,这种技术现在是一种反模式.如果您需要的资产可通过 SSL 获得,请始终使用 https://资产.

此外,请记住在数据表定义中的条目之间包括逗号.

"bInfo" : false <--- 缺少逗号!

正如您在问题中提到的,缺少逗号会导致元素消失.

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>

解决方案

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.

这篇关于数据表 - 通过 JavaScript 更改语言使 UI 元素消失而不是更改语言的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆