제이쿼리 ajax 더보기 버튼 구현

제이쿼리를 사용하여 리스트 더보기 구현 예제 입니다.

간단하지만, 정리가 안돼있어서 정리해봅니다.

요즘 사용되는 자동 스크롤 더보기가 아니며, 버튼을 클릭하여 리스트를 불러오는 방식입니다.

 

우선 아래와 같은 html 소스가 있습니다. 

jsp 로 이뤄진 소스입니다.  jstl을 이용해서 처음 불러온 리스트를 뿌리는 화면입니다.

여기서 확인해야 할 부분은 

테이블에 id를 지정했으며, (리스트를 추가하기 위해)

더보기 버튼에도 id를 지정했습니다. (버튼을 없애기 위해)

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<table id="table" class="table">     <thead>         <tr>             <th>지역</th>             <th>콘텐츠명</th>             <th>콘텐츠 구분</th>             <th>페이지 뷰</th>         </tr>     </thead>     <tbody>         <c:forEach items="${conList }" var="resultList" varStatus="status">         <tr>             <td>${resultList.area}</td>             <td>${resultList.name}</td>             <td>${resultList.gubun}</td>             <td>${resultList.cnt}</td>         </tr>         </c:forEach>         <tr id='addbtn'><td colspan="5"><div class="btns"><a href="javascript:moreList();" class="btn btn-primary">더보기</a></div></td></tr>     </tbody> </table>

 

위의 html에서 버튼을 클릭하면 아래와 같은 자바스크립트 함수를 호출하며, 

ajax 통신을 통해 리스트를 받아 옵니다. 

 

for문을 통해 content라는 변수에 html 문장을 담고, appendTo를 사용하여 html을 추가 하는 간단한 소스입니다.

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

<script > function moreList(){     $.ajax({         url : "/admin/jsonlist",         type : "POST",         cache : false,         dataType: 'json',         data : "conectType="+conectType +"&eDate="+eDate+"&sDate="+sDate+"&codeId="+codeId+"&limit="+limit,         success : function(data){             //console.log(data);             var content="";             for(var i=0; i<data.hashMapList.length; i++){                 content +=                 "<tr>"+                     "<td>"+data.hashMapList[i].area+"</td>"+                     "<td>"+data.hashMapList[i].name+"</td>"+                     "<td>"+data.hashMapList[i].gubun+"</td>"+                     "<td>"+data.hashMapList[i].cnt+"</td>"+                 "</tr>";             }             content+="<tr id='addbtn'><td colspan='5'><div class='btns'><a href='javascript:moreList();' class='btn'>더보기</a></div>  </td></tr>";             $('#addbtn').remove();//remove btn             $(content).appendTo("#table");         }, error:function(request,status,error){             alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);            }     }); }; </script>

 

(data에 값을 확인하려면, console.log(data); 를 사용하여 크롬 개발자 모드를 통해 확인하는 것을 추천)

출처: https://nahosung.tistory.com/62 [nahos]