답변 1개
채택된 답변
+20 포인트
swallow
2년 전
1. 필요한 HTML과 JavaScript 코드를 작성합니다. 이 예시에서는 jQuery를 사용하여 DOM 조작을 간편하게 처리합니다.
Copy
<!-- HTML -->
<input type="radio" name="sort" value="asc" id="ascRadio">
<label for="ascRadio">오름차순</label>
<input type="radio" name="sort" value="desc" id="descRadio">
<label for="descRadio">내림차순</label>
<table id="boardTable">
<!-- 게시판 목록 테이블 내용 -->
</table>
```javascript
Copy
// JavaScript (jQuery)
$(document).ready(function() {
$("input[name='sort']").change(function() {
var sortValue = $(this).val(); // 선택된 정렬 값을 가져옴
$.ajax({
url: "게시판 목록을 가져오는 URL", // 실제 URL로 변경해야 함
method: "GET",
data: { sort: sortValue }, // 선택된 정렬 값을 서버에 전달
success: function(response) {
// 서버로부터 받은 게시판 목록을 처리하는 로직 작성
// 예시: 받은 데이터를 기반으로 테이블의 내용을 업데이트
$("#boardTable").html(response);
},
error: function(xhr, status, error) {
// 오류 처리 로직 작성
}
});
});
});
2. 서버 측에서는 선택된 정렬 값을 기반으로 게시판 목록을 가져오는 로직을 구현합니다. 예를 들어, PHP로 구현한 경우 다음과 같이 작성할 수 있습니다.
Copy
// PHP (예시)
$sort = $_GET['sort']; // 클라이언트에서 전달된 정렬 값
if ($sort == 'desc') {
$orderBy = '게시판의 내림차순 정렬 필드'; // 실제 필드명으로 변경해야 함
} else {
$orderBy = '기본 정렬 필드'; // 실제 필드명으로 변경해야 함
}
// $orderBy를 사용하여 쿼리를 구성하고 게시판 목록을 가져오는 로직을 작성
// 결과 데이터를 HTML 형식으로 구성하여 클라이언트에 반환
// 예시: echo "<tr><td>...</td></tr>";
위의 방법을 적용하면 라디오 버튼을 클릭할 때마다 선택된 정렬 값이 서버에 전달되고, 서버는 해당 값에 따라 적절한 정렬 로직을 수행하여 게시판 목록을 가져와서 표시합니다.
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인