(내공100)Ajax 최근등록 순, 좋아요순 기능구현 질문드립니다.

게시물 수정 , 삭제는 로그인 필요

페이지에서 select 로 조회수 높은 순, 최근 등록일 순으로 정렬하려고 합니다.

반복할 내용은 

<div class="row" id="boardtable">

    <c:forEach var="board" items="${sharing}">

  

        <div class="col-6 col-md-4">

            <div class="card mb-7">

                <div class="card-img">

                    <button class="btn btn-xs btn-circle btn-white-primary card-action card-action-end" onclick="likePost(${board.brd_num})">

                        <i class="fe fe-heart"></i>

                    </button>

                   <button class="btn btn-xs w-100 btn-dark card-btn" onclick="location.href='detailSharing?user_num=${board.user_num}&brd_num=${board.brd_num}'">

    <i class="fe fe-eye me-2 mb-1"></i> 자세히 보기

</button>

                  <img class="card-img-top" src="${pageContext.request.contextPath}/upload/${board.img}" alt="..." style="width: 100%; height: 250;">

</div>

                <div class="card-body fw-bold text-center">

                    <a class="text-body" href="detailSharing?user_num=${board.user_num}&brd_num=${board.brd_num}">

                        ${board.title}

                    </a><p>

                    <a class="text-primary" href="detailSharing?user_num=${board.user_num}&brd_num=${board.brd_num}">

                        ${board.price}원</a><p>

                    <a class="text-primary"><i class="fas fa-heart me-1"></i> ${board.like_cnt}</a>

                    <i class="fe fe-eye me-1 mb-1" style="margin-left: 30px;"></i> ${board.view_cnt}

                   

</div>

 

            </div>

        </div>

    </c:forEach>

</div>

이고

function renderTable(data) {

    if (data && data.length > 0) {

        var tableHTML = 'boardtable'; // 초기화된 테이블 시작

        for (var i = 0; i < data.length; i++) {

            var board = data[i];

            tableHTML += `

                <tr>

            <div class="col-6 col-md-4">

                <div class="card mb-7">

                    <div class="card-img">

                        <button class="btn btn-xs btn-circle btn-white-primary card-action card-action-end" onclick="likePost(${board.brd_num})">

                            <i class="fe fe-heart"></i>

                        </button>

                       <button class="btn btn-xs w-100 btn-dark card-btn" onclick="location.href='detailSharing?user_num=${board.user_num}&brd_num=${board.brd_num}'">

        <i class="fe fe-eye me-2 mb-1"></i> 자세히 보기

    </button>

                      <img class="card-img-top" src="${board.img}" alt="..." style="width: 100%; height: 250;">

    </div>

                    <div class="card-body fw-bold text-center">

                        <a class="text-body" href="detailSharing?user_num=${board.user_num}&brd_num=${board.brd_num}">

                            ${board.title}

                        </a><p>

                        <a class="text-primary" href="detailSharing?user_num=${board.user_num}&brd_num=${board.brd_num}">

                            ${board.price}원</a><p>

                        <a class="text-primary"><i class="fas fa-heart me-1"></i> ${board.like_cnt}</a>

                        <i class="fe fe-eye me-1 mb-1" style="margin-left: 30px;"></i> ${board.view_cnt}

                       

    </div>

     

                </div>

            </div>

                   </tr>

            `;

        }

        tableHTML += '</table>'; // 테이블 닫기

        $('#boardtable').html(tableHTML); // boardtable에 새로운 데이터로 업데이트된 테이블 렌더링

    } else {

        $('#boardtable').html('<p>검색 결과가 없습니다.</p>');

    }

}

$("#sortOption").change(function() {

    var sortOption = $("#sortOption").val();

    $.ajax({

        type: "GET",

        url: "loadSortedPosts",

        data: { sort: sortOption },

        dataType: "json",

        success: function(data) {

            console.log("응답 데이터: ", data);

            renderTable(data); // 테이블 렌더링 함수 호출

        },

        error: function(xhr, status, error) {

            console.log("정렬 아작스 호출 실패: " + error);

        }

    });

});

});

이렇게 하니 데이터를 불러오질 못하네요

찾아보니 

jstl/el과 자바스크립트를 섞어서 사용이 불가능해서 오류가 생기는 것 같은데 

해결책 알려주시면 감사하겠습니다.

컨트롤러는 

@GetMapping("/loadSortedPosts")

@ResponseBody

public List<Board> loadSortedPosts(HttpServletRequest request) {

System.out.println("JkController jbs.loadSortedPosts start....");

    String sortOption = request.getParameter("sort");

    List<Board> loadSortedPosts = jbs.loadSortedPosts(sortOption);

    return loadSortedPosts;

  } 

이렇게 작성했습니다.