我有3个JSON文件。我想将它们转换为单个HTML页面上的3个HTML表，然后从那里使用DataTables添加诸如排序和过滤之类的功能。
仅处理1个JSON文件时，我可以成功实现此目的。但是，我无法使用3个JSON文件来实现此目的。代码中要提到的第一个JSON文件重复了3次。
我正在使用 <!DOCTYPE html>
<html>
<head>
<style type="text/css">
.container {
width: 50px;
height: 50px;
background: #e9559a;
padding: 13px;
margin: 0 5px 5px 0;
}
.bdrag {
height: 100px;
width: 100px;
background: grey;
padding: 5px;
}
.dark-purple {
background: #8b0000;
}
.dark-orange {
background: #000080
}
.drop-green {
background: #38a53a;
}
.drop-yellow {
background: #fbff23;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<div class="shape-container">
<div id="origin-container" class="container">
<div id="dragbox" class="bdrag text-dark">
<p>Draggable Box</p>
</div>
</div>
<div id="dcontainer2" class="container">
<p>Can drop in here #1</p>
</div>
<div id="dcontainer1" class="container">
<p>Can drop in here #2</p>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$(function() {
$("#drag-container").draggable({
revert: function(event, ui) {
$(this).data("uiDraggable").originalPosition = {
top: 0,
left: 0
};
return !event;
}
});
$("#dcontainer1").droppable({
accept: '#dragbox'
});
$("#dcontainer2").droppable({
accept: '#dragbox'
});
$( "#dcontainer2" ).droppable({
over: function() { $("#dragbox").addClass("drop-yellow").removeClass("drop-green"); },
<!-- THE FOLLOWING LINE DOES NOT RUN: --!>
drop: function() { $("#dragbox").addClass("drop-orange").removeClass("drop-purple").find("p"); }
});
$( "#dcontainer1" ).droppable({
over: function() { $("#dragbox").addClass("drop-green").removeClass("drop-yellow"); },
<!-- THE FOLLOWING LINE DOES NOT RUN: --!>
drop: function() { $("#dragbox").addClass("drop-purple").removeClass("drop-orange").find("p"); }
});
});
});
</script>
</body>
</html>
将JSON转换为HTML。 （这不是必须的-仅仅是因为作为一个新的Java学习者，这是我迄今为止不满意的唯一方法。）
DataTables文档清楚地显示了实现此目的所需的代码：
getJSON此外，有关Stack Overflow的许多答案都阐明了需要一个表ID来将JSON文件分配给其适当的表：
$(document).ready(function() {
$('table.display').DataTable();
} );
我尝试了许多解决方案。我知道他们很穷。其中：
$('#table1').DataTable();
）（结果相同）<div id="test1"><script>$("#test1").load("test1.html");</script></div>移动到代码中的不同位置，特别是尝试将$('#table1').DataTable();包含在代码中（由于我的位置不正确，IDE始终指示代码中有错误）关于代码的最新迭代：
getJSON示例JSON：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Release Notes</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script>
$(document).ready(function () {
$('#table1').DataTable();
$.getJSON('table1.json', function (json) {
var tr;
for (var i = 0; i < json.length; i++) {
tr = $('<tr/>');
tr.append("<td>" + json[i].releaseName + "</td>");
tr.append("<td>" + json[i].software + "</td>");
tr.append("<td>" + json[i].sqlServerVersion + "</td>");
tr.append("<td>" + json[i].releaseDate + "</td>");
tr.append("<td>" + json[i].releaseNote + "</td>");
tr.append("<td>" + json[i].productsAffected + "</td>");
tr.append("<td>" + json[i].id + "</td>");
$('table').append(tr);
}
});
});
</script>
<script>
$(document).ready(function () {
$('#table2').DataTable();
$.getJSON('table2.json', function (json) {
var tr;
for (var i = 0; i < json.length; i++) {
tr = $('<tr/>');
tr.append("<td>" + json[i].releaseName + "</td>");
tr.append("<td>" + json[i].software + "</td>");
tr.append("<td>" + json[i].sqlServerVersion + "</td>");
tr.append("<td>" + json[i].releaseDate + "</td>");
tr.append("<td>" + json[i].releaseNote + "</td>");
tr.append("<td>" + json[i].productsAffected + "</td>");
tr.append("<td>" + json[i].id + "</td>");
$('table').append(tr);
}
});
});
</script>
<script>
$(document).ready(function () {
$('#table3').DataTable();
$.getJSON('table3.json', function (json) {
var tr;
for (var i = 0; i < json.length; i++) {
tr = $('<tr/>');
tr.append("<td>" + json[i].releaseName + "</td>");
tr.append("<td>" + json[i].software + "</td>");
tr.append("<td>" + json[i].sqlServerVersion + "</td>");
tr.append("<td>" + json[i].releaseDate + "</td>");
tr.append("<td>" + json[i].releaseNote + "</td>");
tr.append("<td>" + json[i].productsAffected + "</td>");
tr.append("<td>" + json[i].id + "</td>");
$('table').append(tr);
}
});
});
</script>
</head>
<body>
<table id="table" class="table1">
<thead>
<th>Release</th>
<th>Software</th>
<th>SQL Server version</th>
<th>Release date</th>
<th>Release note</th>
<th>Products affected</th>
<th>ID</th>
</thead>
<tbody>
</tbody>
</table>
<table id="table" class="table2">
<thead>
<th>Release</th>
<th>Software</th>
<th>SQL Server version</th>
<th>Release date</th>
<th>Release note</th>
<th>Products affected</th>
<th>ID</th>
</thead>
<tbody>
</tbody>
</table>
<table id="table" class="table3">
<thead>
<th>Release</th>
<th>Software</th>
<th>SQL Server version</th>
<th>Release date</th>
<th>Release note</th>
<th>Products affected</th>
<th>ID</th>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
感谢您的见解或建议。