라디오버튼으로 게시물리스트 정렬 구현
본문
wr_datetime
wr_hit
wr_good
wr_nogood
게시판 목록에서 각 항목을 라디오버튼을 클릭했을때 바로 desc 순으로 정렬되게 구현을 하고 싶은데. 어떻게 처리를 해야할 지 감이 안잡힙니다. 고수님들 도와주시면 감사하겠습니다
답변 1
1. 필요한 HTML과 JavaScript 코드를 작성합니다. 이 예시에서는 jQuery를 사용하여 DOM 조작을 간편하게 처리합니다.
```javascript
2. 서버 측에서는 선택된 정렬 값을 기반으로 게시판 목록을 가져오는 로직을 구현합니다. 예를 들어, PHP로 구현한 경우 다음과 같이 작성할 수 있습니다.
위의 방법을 적용하면 라디오 버튼을 클릭할 때마다 선택된 정렬 값이 서버에 전달되고, 서버는 해당 값에 따라 적절한 정렬 로직을 수행하여 게시판 목록을 가져와서 표시합니다.
<!-- 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
// 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로 구현한 경우 다음과 같이 작성할 수 있습니다.
// PHP (예시)
$sort = $_GET['sort']; // 클라이언트에서 전달된 정렬 값
if ($sort == 'desc') {
$orderBy = '게시판의 내림차순 정렬 필드'; // 실제 필드명으로 변경해야 함
} else {
$orderBy = '기본 정렬 필드'; // 실제 필드명으로 변경해야 함
}
// $orderBy를 사용하여 쿼리를 구성하고 게시판 목록을 가져오는 로직을 작성
// 결과 데이터를 HTML 형식으로 구성하여 클라이언트에 반환
// 예시: echo "<tr><td>...</td></tr>";
위의 방법을 적용하면 라디오 버튼을 클릭할 때마다 선택된 정렬 값이 서버에 전달되고, 서버는 해당 값에 따라 적절한 정렬 로직을 수행하여 게시판 목록을 가져와서 표시합니다.
감사 합니다^^
답변을 작성하시기 전에 로그인 해주세요.
