Django: Загрузка JSON в таблицу Bootstrap с помощью функции AJAX не работает должным образом

Я хочу создать простое приложение, которое может открывать данные из базы данных (живая программа) с помощью Django. Одной из функций является отображение списка таблиц.

Был создан API ответ, содержащий список имен таблиц из базы данных:

{
    "message": "success",
    "results": [
        {
            "schema": "public",
            "table": "actor"
        },
        {
            "schema": "public",
            "table": "actor_info"
        },
        {
            "schema": "public",
            "table": "customer_list"
        },
        {
            "schema": "public",
            "table": "film_list"
        },
        ....
     ]
}

Затем, я хочу отобразить данные (из API) в таблице bootstrap, создав функцию AJAX. Вот мой HTML файл (полный код здесь):

...
<div class="table-responsive">
<table class="table table-sm" id="dataTable" width="100%" cellspacing="0">
  <thead>
   <tr>
    <th>Schema</th>
    <th>Table Name</th>
   </tr></thead>
 <tbody id="divBody"></tbody>
</table>
</div>
...

Это моя AJAX функция (В настоящее время я использовал метод GET. Позже я хочу перейти на метод POST):

<script>
    $(document).ready(function () {
            BindTables();
        });

    function BindTables(){
        $.ajax({
            type:"GET",
            dataType: "JSON",
            url: "http://127.0.0.1:8000/api/v1/table/",
            success: function(data){
                
                console.log("It's success");
                console.log(data.results)
                                
                var structureDiv = "";
                for (let i=0; i < data['results'].length; i++){
                    structureDiv += "<tr>" + 
                        "<td>" + data['results'][i].schema + "</td>" +
                        "<td>" + data['results'][i].table + "</td>" +
                    "</tr>"
                }
                $("#divBody").html(structureDiv);
            }
        });
    }    
</script>

В настоящее время я могу вызвать API и показать данные в таблице bootstrap при загрузке страницы. Однако, когда я нажимаю на таблицу, данные исчезают . Это нормально? Поскольку я использую $(document).ready(function () {}) для этого случая.

Я думаю, что есть некоторые проблемы с функцией javascript, где данные не загружаются в таблицу должным образом (см. рисунок).

Итак, не могли бы вы помочь мне решить эту проблему? Как я могу показать данные из API в таблице bootstrap? Любая помощь будет оценена по достоинству, спасибо.

Добавлена информация-1:

Вернуться на верх