Одна и та же таблица повторяется при попытке отобразить несколько таблиц на одной HTML-странице с помощью getJson и Datatables - PullRequest
Новая
       7

Одна и та же таблица повторяется при попытке отобразить несколько таблиц на одной HTML-странице с помощью getJson и Datatables

0 голосов
/ 02 июля 2018

У меня есть 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"
}]

Спасибо за понимание или рекомендации.

...