Блог

Вот мой index.html файл :

 <button id="getAllGroups" type="button" class="btn btn-primary">Groups</button>

<div class="container">
    <h2 align="center">LESSONS</h2>
    <table class="table table-dark" border="1" width="100%" cellpadding="5">
        <thead>
        <th>GROUP ID</th>
        <th>GROUP NAME</th>
        </thead>
        <tbody id="tbody">

        </tbody>
    </table>
</div>
 

Ниже мой js файл:

 GET: $(document).ready(
function () {

    // GET REQUEST
    $("#getAllGroups").click(function (event) {
        event.preventDefault();
        ajaxGet();
    });

    // DO GET
    function ajaxGet() {
        $.ajax({
            type: "GET",
            url: "checkGroups",
            success: function (result) {
                if (result.status == "success") {
                     var custList = "";
                    $.each(result.data,
                        function (i, group) {

                            var Html = "<tr>"  
                            "<td>"   group.groupId   "</td>"  
                            "<td>"   group.groupName   "</td>"  
                            "</tr>";
                            console.log("Group checking: ", group);
                            $('#tbody').append(Html);
                        });
                    console.log("Success: ", result);

                } else {
                    console.log("Fail: ", result);
                }
            },
                        });
    }
})
 

RestController :

 @RestController
public class GroupController {
@Autowired
GroupService groupService;
@GetMapping("/checkGroups")
public ResponseEntity<Object> getAllGroups() {
ServiceResponse<List<Group>> response = new ServiceResponse<>("success", groupService.getAll());
return new ResponseEntity<Object>(response, HttpStatus.OK);
}
}
 

Мой код работает, но th : идентификатор ГРУППЫ и ИМЯ ГРУППЫ отображаются на странице, даже если я не нажимаю на кнопку Groups , но мне нужно, чтобы моя таблица отображалась только после нажатия на кнопку.
Если я не нажимаю на кнопку, таблица должна быть скрыта.

Заранее спасибо за ответ.

Мне нужно, чтобы моя таблица отображалась только после нажатия на кнопку. Если я не нажимаю на кнопку, таблица должна быть скрыта.

В этом случае скройте таблицу при загрузке страницы с помощью CSS и отобразите ее при нажатии кнопки с помощью show() :

 .container table { display: none; }
 

 // in the $.ajax success handler:
let html = result.data.map(g => `<tr><td>${g.groupId}</td><td>${g.groupName}</td></tr>`;
$('#tbody').append(html);
$('.container table').show();
 

Обратите внимание на упрощенное и более эффективное использование map() для создания вашего HTML в приведенном выше примере.