[Spring] 테이블 데이터 ajax로 조회하고 행 추가

페이지 로드 시 테이블 만들고, ajax로 데이터 조회 한 후 동적으로 행 만들어 추가하기!

 

나는 테이블의 컬럼명도 동적으로 만들기 위해 thead부분을 추가하였다.

 

controller에서 ArrayList를 넘겨주었고, jsp페이지에서  userList라는 변수에 담아 반복문을 돌려 행을 추가하였다.

 

 $.ajax({
   url:"selectUserList.do",		
   type:"POST",
   data : { dept_id : dept_id },
   success:function(data){
	var userList = data;
        var tr = '<thead>'+
        	    '<tr>' +
                      '<th>이름</th>'+
                      '<th>사번 </th>'+
                      '<th>이메일 </th>'+
                      '<th>SC권한 </th>'+
                      '<th>직위 </th>'+
               	    '</tr>'+
                  '</thead>';
      
     	$.each(userList , function(i){
          tr += '<td>' +  userList[i].user_nm_ko + '</td><td>' + userList[i].user_id + '</td><td>' + userList[i].email + '</td><td>' + userList[i].enable + '</td><td>' + userList[i].pos_nm + '</td></tr>';
        });
        
        $("#userList").append(tr);	// 테이블에 추가
   });
}
});