반응형
제이쿼리를 사용하여 리스트 더보기 구현 예제 입니다.
간단하지만, 정리가 안돼있어서 정리해봅니다.
요즘 사용되는 자동 스크롤 더보기가 아니며, 버튼을 클릭하여 리스트를 불러오는 방식입니다.
우선 아래와 같은 html 소스가 있습니다.
jsp 로 이뤄진 소스입니다. jstl을 이용해서 처음 불러온 리스트를 뿌리는 화면입니다.
여기서 확인해야 할 부분은
테이블에 id를 지정했으며, (리스트를 추가하기 위해)
더보기 버튼에도 id를 지정했습니다. (버튼을 없애기 위해)
위의 html에서 버튼을 클릭하면 아래와 같은 자바스크립트 함수를 호출하며,
ajax 통신을 통해 리스트를 받아 옵니다.
for문을 통해 content라는 변수에 html 문장을 담고, appendTo를 사용하여 html을 추가 하는 간단한 소스입니다.
(data에 값을 확인하려면, console.log(data); 를 사용하여 크롬 개발자 모드를 통해 확인하는 것을 추천)
반응형
'JavaScript > jQuery' 카테고리의 다른 글
| 제이쿼리 ajax 사용시 No transport 에러 (0) | 2017.11.15 |
|---|---|
| ajax 비동기 통신시 return 값 변수에 저장 (0) | 2017.08.02 |
| 제이쿼리 timepicker (2) | 2016.05.25 |