数据表-通过JavaScript更改语言可使UI元素消失，而不是更改语言 [英] Datatables - Language change via JavaScript makes UI elements disappear instead of changing the language
问题描述
我已经使用Bootstrap样式构建了一个数据表，并希望将ui元素的默认语言更改为德语。
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
这说明我可以加载该语言文件中的脚本。当我尝试这样做时，所有与语言相关的UI元素都会消失，而不会以德语显示。结果是没有功能的裸表。可能是什么问题呢？抱歉，缩进不好，我在粘贴时遇到了麻烦。
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.
脚本：
$(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>
推荐答案
您应始终在URL中包含协议-对于例如：
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"
}
该样式故意排除该协议的URL的名称很旧-我认为最近不建议使用该协议-如您所见，它不起作用。参见此问题并回答：
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：现在，所有人都鼓励使用SSL，而不必担心性能，现在，此技术已成为一种反模式。如果您需要的资产在SSL上可用，请始终使用https：//资产。
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屋！
