데이터를 이미 JSP로 가져온 상태에서 AJAX 없이 JSP와 JavaScript만으로 체크박스를 여러 번 클릭해도 동작하는 형태를 구현할 수 있습니다. 여기서는 서버에서 데이터를 가져온 후, 클라이언트 측에서 JavaScript를 이용해 DOM 조작만으로 숫자가 0인 항목을 필터링하는 방법을 구현
JSP구성
<JSP 코드>
아래 코드는 데이터를 렌더링할 때 서버에서 가져온 전체 데이터를 ul 안에 출력합니다. JavaScript를 사용해 필터링 기능을 구현
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Filtering</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
$('#filterCheckbox').change(function () {
const showNonZero = $(this).is(':checked');
$('ul#itemList li').each(function () {
const number = parseInt($(this).data('number'), 10); // 숫자 데이터 가져오기
if (showNonZero && number === 0) {
$(this).hide(); // 숫자가 0인 항목 숨기기
} else {
$(this).show(); // 나머지 항목 표시
}
});
});
});
</script>
</head>
<body>
<h1>Item List</h1>
<label>
<input type="checkbox" id="filterCheckbox">
Show only items with non-zero numbers
</label>
<ul id="itemList">
<%-- 서버에서 데이터를 렌더링 --%>
<c:forEach var="item" items="${items}">
<li data-number="${item.number}">${item.name} (${item.number})</li>
</c:forEach>
</ul>
</body>
</html>
전체정리
data-number 속성 사용:
각 li 요소에 숫자 값을 data-number 속성으로 저장합니다.
JavaScript에서 이 값을 가져와 조건에 따라 숨기거나 표시할 수 있습니다.
체크박스 이벤트:
#filterCheckbox의 상태를 확인하여 숫자가 0인 항목을 숨깁니다.
체크박스를 해제하면 모든 항목이 다시 표시됩니다.
데이터 처리:
데이터는 서버에서 한 번만 내려오고, 이후에는 클라이언트 측에서 DOM 조작만 수행합니다.
따라서 데이터 요청을 여러 번 하지 않아도 됩니다.
방식은 서버 요청을 최소화하고 클라이언트에서 빠르게 동작하도록 설계되었습니다. 추가적으로 스타일링이 필요하면 CSS를 활용해 더 깔끔하게 처리할 수도 있습니다.
const number = parseInt($(this).data('number'), 10)에서 10 의미
=> parseInt($(this).data('number'), 10)에서 10은 데이터를 10진수 숫자로 변환하기 위해 사용됩니다. 이는 일반적으로 안전하고 예상 가능한 동작을 보장하기 위한 권장 사항입니다.
parseInt(string, radix)
string: 숫자로 변환할 문자열입니다.
radix: 변환에 사용할 진법(base)을 지정합니다.
예를 들어:
10은 10진수(Decimal).
16은 16진수(Hexadecimal).
8은 8진수(Octal).
2는 2진수(Binary).
왜 10을 사용하는가?
10을 지정하면 문자열을 10진수 숫자로 변환하도록 지정하는 것입니다. 일반적으로 우리가 사용하는 숫자는 10진수이므로, 명시적으로 10을 전달하여 변환을 정확히 지정하는 것이 좋은 습관입니다.
'Spring' 카테고리의 다른 글
| 체크박스 클릭시 데이터 노출 처리 (0) | 2024.11.29 |
|---|---|
| 스프링 프레임워크 (0) | 2020.02.17 |
| JDBC vs MyBatis 차이 (0) | 2020.02.05 |
| 스프링 특징 (0) | 2020.02.03 |
| Spring Security 관련 참고사항 (0) | 2019.11.22 |