>source

여기 나의 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 : 버튼을 클릭하지 않아도 GROUP ID와 GROUP NAME이 페이지에 있습니다. Groups 하지만 내 테이블은 버튼을 클릭 한 후에 만 ​​표시되어야합니다. 버튼을 클릭하지 않으면 테이블이 숨겨져 야합니다.

답변 해 주셔서 미리 감사드립니다.

  • 답변 # 1

    I need that my table shows only after click on button. If I don't click on button, the table should be hidden.

    이 경우 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을 빌드합니다.

관련 자료

  • 이전 DJANGO - django - 모델의 기본 필터
  • 다음 angular - ngx-toastr 구성 파일을 어디에 넣을 수 있습니까?