У меня есть 3 файла JSON. Я хочу преобразовать их в 3 HTML-таблицы на одной HTML-странице и оттуда использовать DataTables для добавления таких функций, как сортировка и фильтрация.
Я могу добиться этого успешно, имея дело только с 1 файлом JSON. Однако я не могу добиться этого с 3 файлами JSON. Первый файл JSON, упомянутый в коде, повторяется 3 раза.
Я использую getJSON
для преобразования JSON в HTML. (Это не является обязательным требованием - это только потому, что, будучи новым учеником Javascript, это единственный метод, с которым мне пока удобно.)
Документация DataTables содержит код, необходимый для достижения этой цели:
$(document).ready(function() {
$('table.display').DataTable();
} );
Кроме того, во многих ответах о переполнении стека уточняется, что для присвоения файла JSON соответствующей таблице требуется идентификатор таблицы:
$('#table1').DataTable();
Я пробовал много решений. Я понимаю, что они бедны. Среди них:
- Помещение всего кода в один скрипт против отдельных скриптов (тот же результат)
- Помещение каждого сценария в уникальный файл HTML и сборка вывода на главной странице HTML (
<div id="test1"><script>$("#test1").load("test1.html");</script></div>
) (тот же результат)
- Перемещение
$('#table1').DataTable();
в разные места в коде, в частности, чтобы попытаться включить в него getJSON
(из-за моего неправильного позиционирования, IDE всегда указывает на наличие ошибок в коде)
- Добавление кода для уничтожения таблицы после ее создания (таблицы не отображаются)
- Различные конфигурации идентификаторов и классов
Последняя итерация кода:
<!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>
Образец JSON:
[{
"releaseDate": "05/22/18",
"sqlServerVersion": "N/A",
"software": "SoftwareA",
"releaseName": "4.3.13.0",
"releaseNote": "Note1",
"type": "Bug",
"productsAffected": "Product1",
"id": "140804",
"Type": "Patched bug"
},
{
"releaseDate": "06/05/18",
"sqlServerVersion": "SQL 2012",
"software": "SoftwareB",
"releaseName": "18.1.18156.02",
"releaseNote": "Note2",
"type": "Bug",
"productsAffected": "Product2",
"id": "141406",
"Type": "Patched bug"
},
{
"releaseDate": "06/05/18",
"sqlServerVersion": "SQL 2016",
"software": "SoftwareC",
"releaseName": "4.0.94.06",
"releaseNote": "Note3",
"type": "Bug",
"productsAffected": "Product3",
"id": "141623",
"Type": "Patched bug"
}]
Спасибо за понимание или рекомендации.