数据表的翻译问题
Problems with the translation of datatables
我不明白为什么我无法通过CDN 翻译Datatables。如果我直接在代码中使用书面字典，一切正常，但使用 CDN 时我会收到错误消息。
我附上代码：
<!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.0">
<title>Test Table Filter</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- CSS Datatables -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.11.3/af-2.3.7/b-2.0.1/b-html5-2.0.1/b-print-2.0.1/cr-1.5.5/date-1.1.1/fc-4.0.1/fh-3.2.0/r-2.2.9/sb-1.3.0/sp-1.4.0/sl-1.3.3/datatables.min.css"/>
<style>
table {
border-collapse: collapse;
}
.dataTables_length {
margin: 15px;
}
.dataTables_filter {
margin: 15px;
}
.dataTables_filter input {
width: 350px;
margin-left: 5px;
}
th:hover {
color: rgb(255, 0, 0);
cursor: pointer;
}
.cb-dropdown-wrap {
max-height: 180px;
/* At most, around 3/4 visible items. */
position: relative;
height: 40px;
margin: 15px;
color: black;
}
.cb-dropdown,
.cb-dropdown li {
margin: 0;
padding: 0;
list-style: none;
}
.cb-dropdown {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
overflow: hidden;
background: #fff;
border: 1px solid #888;
font-size: 20px;
}
/* For selected filter. */
.active .cb-dropdown {
background: rgb(255, 244, 92);
}
.cb-dropdown-wrap:hover .cb-dropdown {
height: 250px;
overflow: auto;
transition: 0.2s height ease-in-out;
background: #fff;
}
/* For selected items. */
.cb-dropdown li.active {
background: #ff0;
}
.cb-dropdown li label {
display: block;
position: relative;
cursor: pointer;
line-height: 19px;
/* Match height of .cb-dropdown-wrap */
}
.cb-dropdown li label>input {
position: absolute;
right: 0;
top: 0;
width: 16px;
}
.cb-dropdown li label>span {
display: block;
margin-left: 3px;
margin-right: 20px;
/* At least, width of the checkbox. */
font-family: sans-serif;
font-size: 0.8em;
font-weight: normal;
text-align: left;
}
/* This fixes the vertical aligning of the sorting icon. */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
background-position: 100% 10px;
}
.paginate_button {
margin: 7px;
font-size: 20px;
}
.paginate_button:hover {
cursor: default;
}
thead {
position: sticky;
top: 0;
/* Don't forget this, required for the stickiness */
}
</style>
<!-- JQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous">
</script>
<!-- Javascripts Datatables -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.11.3/af-2.3.7/b-2.0.1/b-html5-2.0.1/b-print-2.0.1/cr-1.5.5/date-1.1.1/fc-4.0.1/fh-3.2.0/r-2.2.9/sb-1.3.0/sp-1.4.0/sl-1.3.3/datatables.min.js"></script>
</head>
<body>
<p style="text-align: center">
This Fiddle was forked by <a href="https://whosebug.com/users/9217760/sally-cj">Sally</a>, for <a
href=" Stack Overflow question</a>. <small><a
href="https://jsfiddle.net/jvretamero/bv6g0r64/">See the original Fiddle</a>.</small>
</p>
<hr />
<div>
<table id="example" class="display table table-primary table-striped table-hover" cellspacing="0" width="100%">
<thead>
<tr class="text-center text-uppercase">
<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 class="sum">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>0,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>0,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>3,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>2,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>2,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>7,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>7,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>5,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>3,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>2,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>0,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>3,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>5,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>8,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>5,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>7,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>2,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>7,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>5,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>5,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>6,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>7,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>6,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>0,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>3,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>4,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>5,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>5,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>4,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>4,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>9,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>2,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>6,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>5,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>4,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>3,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>9,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>8,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>5,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>5,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>5,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>6,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>3,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>3,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>3,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>2,000</td>
</tr>
</tbody>
</table>
</div>
<!-- <script src="/jsMyTable.js"></script> -->
<script>
// This code has been beautified via http://jsbeautifier.org/ with 2 spaces indentation.
$(document).ready(function () {
function cbDropdown(column) {
return $("<ul>", {
class: "cb-dropdown",
}).appendTo(
$("<div>", {
class: "cb-dropdown-wrap",
}).appendTo(column)
);
}
$("#example").DataTable({
// This part doesn't work
"language": {
"url": "//cdn.datatables.net/plug-ins/1.10.19/i18n/Italian.json"
},
//
dom: "Qlfrtip",
lengthMenu: [
[25, 50, 100, -1],
[25, 50, 100, "All"],
],
sDom: '<"row view-filter"<"col-sm-12"<"pull-left"l><"pull-right"f><"clearfix">>>t<"row view-pager"<"col-sm-12"<"text-center"ip>>>',
initComplete: function () {
this.api()
.columns()
.every(function () {
var column = this;
var ddmenu = cbDropdown($(column.header())).on(
"change",
":checkbox",
function () {
var active;
var vals = $(":checked", ddmenu)
.map(function (index, element) {
active = true;
return $.fn.dataTable.util.escapeRegex($(element).val());
})
.toArray()
.join("|");
column
.search(vals.length > 0 ? "^(" + vals + ")$" : "", true, false)
.draw();
// Highlight the current item if selected.
if (this.checked) {
$(this).closest("li").addClass("active");
} else {
$(this).closest("li").removeClass("active");
}
// Highlight the current filter if selected.
var active2 = ddmenu.parent().is(".active");
if (active && !active2) {
ddmenu.parent().addClass("active");
} else if (!active && active2) {
ddmenu.parent().removeClass("active");
}
}
);
column
.data()
.unique()
.sort()
.each(function (d, j) {
var // wrapped
$label = $("<label>"),
$text = $("<span>", {
text: d,
}),
$cb = $("<input>", {
type: "checkbox",
value: d,
});
$text.appendTo($label);
$cb.appendTo($label);
ddmenu.append($("<li>").append($label));
});
});
},
});
});
</script>
</body>
</html>
产生问题的部分是这个（位于body关闭前的script标签中）：
// This part doesn't work
"language": {
"url": "//cdn.datatables.net/plug-ins/1.10.19/i18n/Italian.json"
},
//
有人能帮帮我吗？
在 URL:
中提供协议 (https:)
"language": {
"url": "https://cdn.datatables.net/plug-ins/1.10.19/i18n/Italian.json"
},
协议相关的 URL 这些天通常应该避免。有关一些背景，请参阅 here:
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.
更新
根据您的 MRE，您页面的 <head> 标签中的资源集（jQuery、Bootstrap、DataTables）有误。
查看浏览器的控制台，您会看到一个或多个错误，这些错误会阻止创建 DataTable。你只看到基本的 HTML table.
例如，如果您将它们全部删除，而是使用以下一组非常基本的资源...
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.11.3/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.11.3/datatables.min.js"></script>
...然后您将看到您的翻译工作正常。例如：
Vista da 1 a 8 di 8 elementi
但不仅如此，您实际上会看到 DataTable 及其控件正在显示。
您仍然需要做更多的工作，以提供所有您实际需要的资源，以便正确显示和设置您需要的所有功能的样式。
我建议您访问 official DataTables downloads 页面和 select 所有您想要的选项。这将生成您需要的内容。
您可能需要进行一些试验才能获得所需的一切。如果您在该过程中遇到困难，可以根据需要提出新问题。
我不明白为什么我无法通过CDN 翻译Datatables。如果我直接在代码中使用书面字典，一切正常，但使用 CDN 时我会收到错误消息。 我附上代码：
<!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.0">
<title>Test Table Filter</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- CSS Datatables -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.11.3/af-2.3.7/b-2.0.1/b-html5-2.0.1/b-print-2.0.1/cr-1.5.5/date-1.1.1/fc-4.0.1/fh-3.2.0/r-2.2.9/sb-1.3.0/sp-1.4.0/sl-1.3.3/datatables.min.css"/>
<style>
table {
border-collapse: collapse;
}
.dataTables_length {
margin: 15px;
}
.dataTables_filter {
margin: 15px;
}
.dataTables_filter input {
width: 350px;
margin-left: 5px;
}
th:hover {
color: rgb(255, 0, 0);
cursor: pointer;
}
.cb-dropdown-wrap {
max-height: 180px;
/* At most, around 3/4 visible items. */
position: relative;
height: 40px;
margin: 15px;
color: black;
}
.cb-dropdown,
.cb-dropdown li {
margin: 0;
padding: 0;
list-style: none;
}
.cb-dropdown {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
overflow: hidden;
background: #fff;
border: 1px solid #888;
font-size: 20px;
}
/* For selected filter. */
.active .cb-dropdown {
background: rgb(255, 244, 92);
}
.cb-dropdown-wrap:hover .cb-dropdown {
height: 250px;
overflow: auto;
transition: 0.2s height ease-in-out;
background: #fff;
}
/* For selected items. */
.cb-dropdown li.active {
background: #ff0;
}
.cb-dropdown li label {
display: block;
position: relative;
cursor: pointer;
line-height: 19px;
/* Match height of .cb-dropdown-wrap */
}
.cb-dropdown li label>input {
position: absolute;
right: 0;
top: 0;
width: 16px;
}
.cb-dropdown li label>span {
display: block;
margin-left: 3px;
margin-right: 20px;
/* At least, width of the checkbox. */
font-family: sans-serif;
font-size: 0.8em;
font-weight: normal;
text-align: left;
}
/* This fixes the vertical aligning of the sorting icon. */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
background-position: 100% 10px;
}
.paginate_button {
margin: 7px;
font-size: 20px;
}
.paginate_button:hover {
cursor: default;
}
thead {
position: sticky;
top: 0;
/* Don't forget this, required for the stickiness */
}
</style>
<!-- JQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous">
</script>
<!-- Javascripts Datatables -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.11.3/af-2.3.7/b-2.0.1/b-html5-2.0.1/b-print-2.0.1/cr-1.5.5/date-1.1.1/fc-4.0.1/fh-3.2.0/r-2.2.9/sb-1.3.0/sp-1.4.0/sl-1.3.3/datatables.min.js"></script>
</head>
<body>
<p style="text-align: center">
This Fiddle was forked by <a href="https://whosebug.com/users/9217760/sally-cj">Sally</a>, for <a
href=" Stack Overflow question</a>. <small><a
href="https://jsfiddle.net/jvretamero/bv6g0r64/">See the original Fiddle</a>.</small>
</p>
<hr />
<div>
<table id="example" class="display table table-primary table-striped table-hover" cellspacing="0" width="100%">
<thead>
<tr class="text-center text-uppercase">
<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 class="sum">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>0,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>0,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>3,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>2,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>2,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>7,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>7,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>5,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>3,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>2,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>0,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>3,500</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>5,750</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>8,500</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Chief Financial Officer (CFO)</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>5,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>7,500</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>2,000</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>7,500</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>5,000</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>5,000</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>6,450</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>2010/09/20</td>
<td>,600</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>,200,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>,575</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>2010/11/14</td>
<td>7,650</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>6,850</td>
</tr>
<tr>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>0,000</td>
</tr>
<tr>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>2011/08/14</td>
<td>3,000</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>2011/06/02</td>
<td>,400</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>4,500</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>5,000</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>5,500</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>4,050</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>,675</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>4,500</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>9,850</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>2,500</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>6,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>5,750</td>
</tr>
<tr>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>2011/02/03</td>
<td>4,500</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>3,500</td>
</tr>
<tr>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>2009/08/19</td>
<td>9,575</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>,540</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>,500</td>
</tr>
<tr>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>2012/04/09</td>
<td>8,575</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>5,250</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>5,000</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>,650</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>5,600</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>6,250</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>3,500</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>,500</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>3,000</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>3,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>2,000</td>
</tr>
</tbody>
</table>
</div>
<!-- <script src="/jsMyTable.js"></script> -->
<script>
// This code has been beautified via http://jsbeautifier.org/ with 2 spaces indentation.
$(document).ready(function () {
function cbDropdown(column) {
return $("<ul>", {
class: "cb-dropdown",
}).appendTo(
$("<div>", {
class: "cb-dropdown-wrap",
}).appendTo(column)
);
}
$("#example").DataTable({
// This part doesn't work
"language": {
"url": "//cdn.datatables.net/plug-ins/1.10.19/i18n/Italian.json"
},
//
dom: "Qlfrtip",
lengthMenu: [
[25, 50, 100, -1],
[25, 50, 100, "All"],
],
sDom: '<"row view-filter"<"col-sm-12"<"pull-left"l><"pull-right"f><"clearfix">>>t<"row view-pager"<"col-sm-12"<"text-center"ip>>>',
initComplete: function () {
this.api()
.columns()
.every(function () {
var column = this;
var ddmenu = cbDropdown($(column.header())).on(
"change",
":checkbox",
function () {
var active;
var vals = $(":checked", ddmenu)
.map(function (index, element) {
active = true;
return $.fn.dataTable.util.escapeRegex($(element).val());
})
.toArray()
.join("|");
column
.search(vals.length > 0 ? "^(" + vals + ")$" : "", true, false)
.draw();
// Highlight the current item if selected.
if (this.checked) {
$(this).closest("li").addClass("active");
} else {
$(this).closest("li").removeClass("active");
}
// Highlight the current filter if selected.
var active2 = ddmenu.parent().is(".active");
if (active && !active2) {
ddmenu.parent().addClass("active");
} else if (!active && active2) {
ddmenu.parent().removeClass("active");
}
}
);
column
.data()
.unique()
.sort()
.each(function (d, j) {
var // wrapped
$label = $("<label>"),
$text = $("<span>", {
text: d,
}),
$cb = $("<input>", {
type: "checkbox",
value: d,
});
$text.appendTo($label);
$cb.appendTo($label);
ddmenu.append($("<li>").append($label));
});
});
},
});
});
</script>
</body>
</html>
产生问题的部分是这个（位于body关闭前的script标签中）：
// This part doesn't work
"language": {
"url": "//cdn.datatables.net/plug-ins/1.10.19/i18n/Italian.json"
},
//
有人能帮帮我吗？
在 URL:
中提供协议 (https:)
"language": {
"url": "https://cdn.datatables.net/plug-ins/1.10.19/i18n/Italian.json"
},
协议相关的 URL 这些天通常应该避免。有关一些背景，请参阅 here:
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.
更新
根据您的 MRE，您页面的 <head> 标签中的资源集（jQuery、Bootstrap、DataTables）有误。
查看浏览器的控制台，您会看到一个或多个错误，这些错误会阻止创建 DataTable。你只看到基本的 HTML table.
例如，如果您将它们全部删除，而是使用以下一组非常基本的资源...
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.11.3/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.11.3/datatables.min.js"></script>
...然后您将看到您的翻译工作正常。例如：
Vista da 1 a 8 di 8 elementi
但不仅如此，您实际上会看到 DataTable 及其控件正在显示。
您仍然需要做更多的工作，以提供所有您实际需要的资源，以便正确显示和设置您需要的所有功能的样式。
我建议您访问 official DataTables downloads 页面和 select 所有您想要的选项。这将生成您需要的内容。
您可能需要进行一些试验才能获得所需的一切。如果您在该过程中遇到困难，可以根据需要提出新问题。