반응형
파이널 프로젝트를 진행하면서 Multiple pagination in one page, 즉 한 페이지 내에서 더블 페이징 처리를 해야 할 일이 생겼다. 조금 찾아보니 과거에는 iFrame을 이용했지만 현재는 접근성에 위반되어 사용하지 않는다고. 생각해 보면 장바구니에서 선택한 상품만 하단의 구매리스트에 뿅뿅 뜨게 하는 걸 어디서 보았던것도 같고, 실무에서도 많이 쓰지 않을까? 라는 생각이 들어 시간이 촉박했지만 매달려서 구현한 부분이다.
js파트가 영 맘에 안 드는데 조만간 포트폴리오를 정리한 후에 코드 정리가 좀 필요할 것 같다. 중복되는 소스가 너무 많아서... (._. 마음이 불편하다. 잘 정리하면 한 페이지에서 여러개의 페이징처리를 해도 코드가 많이 늘어나지 않도록 할 수 있을 것 같다.
[View Page]
<div class="container">
<div class="weneedAdmin-permissionTab">
<h2>기업 정보 승인</h2>
</div>
<section id="weneedAdmin-comInfoBeforeSec">
<form action="<c:url value='/admin/companyService/comInfoPermission.do'/>" name="frmPageY" method="post">
<input type="hidden" name="currentPageY" value="${pagingInfoPassed.currentPage}">
<input type="hidden" name="typeCheck" value="Y">
</form>
<span class="weneedAdmin-comPermiSubtitle" id="weneedAdmin-showInfoListBefore">승인 요청 건</span>
<div class="weneed-adminBtnDiv">
<button class="weneed-adminBtn" id="weneed-adminBtn-reject">거절</button>
<button class="weneed-adminBtn" id="weneed-adminBtn-pass">승인</button>
</div>
<table class="weneed-adminTable">
<thead>
<tr class="weneed-adminTable">
<th style="width: 35px;"><input type="checkbox" id="weneed-admin-CheckAll"></th>
<th style="width: 105px;">회사코드</th>
<th style="width: 240px;">회사명</th>
<th style="width: 125px;">사업자등록번호</th>
<th style="width: 110px;">팀원수</th>
<th style="width: 125px;">매출액/투자규모</th>
<th style="width: 110px;">등록회원번호</th>
<th style="width: 80px;">승인상태</th>
</tr>
</thead>
<tbody id="weneedadmin-tbodyYet">
<c:forEach var="comInfoVo" items="${comListYet}">
<!-- 이걸 그려서 붙여야 하고 -->
<tr class="weneed-adminTable">
<td>
<input type="checkbox" name="weneed-adminStatusChkbox-before">
</td>
<td>${comInfoVo.comCode}</td>
<td>${comInfoVo.comName}</td>
<td>${comInfoVo.comRegNo}</td>
<td>${comInfoVo.comSize}</td>
<td>${comInfoVo.profit}</td>
<td>${comInfoVo.comMemNo}</td>
<td>${comInfoVo.comInfoPassed}</td>
</tr>
</c:forEach>
</tbody>
</table>
<!-- 페이징 디브 -->
<div class="divPage" id="weneedAdmin-comInfoDivPageBefore">
<!-- 페이지 번호 추가 -->
<!-- 이전 블럭으로 이동 -->
<c:if test="${pagingInfoYet.firstPage>1 }">
<a href="#" onclick="pageFuncY(${pagingInfoYet.firstPage-1})">
<img src="<c:url value='/resources/images/first.JPG'/>" alt="이전블럭으로 이동">
</a>
</c:if>
<!-- [1][2][3][4][5][6][7][8][9][10] -->
<c:forEach var="i" begin="${pagingInfoYet.firstPage}" end="${pagingInfoYet.lastPage}">
<c:if test="${i==pagingInfoYet.currentPage}">
<span style="color:blue;font-weight: bold">
${i}</span>
</c:if>
<c:if test="${i!=pagingInfoYet.currentPage}">
<a href="#" onclick="pageFuncY(${i})">
[${i}]</a>
</c:if>
</c:forEach>
<!-- 다음 블럭으로 이동 -->
<c:if test="${pagingInfoYet.lastPage < pagingInfoYet.totalPage}">
<a href="#" onclick="pageFuncY(${pagingInfoYet.lastPage+1})">
<img src="<c:url value='/resources/images/last.JPG'/>" alt="다음 블럭으로 이동">
</a>
</c:if>
<!-- 페이지 번호 끝 -->
</div>
</section>
<section id="weneedAdmin-comInfoPassedSec">
<form action="<c:url value='/admin/companyService/comInfoPermission.do'/>" name="frmPageP" method="post">
<input type="hidden" name="currentPageP" value="${pagingInfoPassed.currentPage}">
<input type="hidden" name="typeCheck" value="P">
</form>
<span class="weneedAdmin-comPermiSubtitle" id="weneedAdmin-showInfoListPassed"> 승인 완료 건</span>
<table class="weneed-adminTable">
<thead>
<tr class="weneed-adminTable">
<th style="width: 35px;"><input type="checkbox" id="weneed-admin-CheckAll-ed"></th>
<th style="width: 105px;">회사코드</th>
<th style="width: 240px;">회사명</th>
<th style="width: 125px;">사업자등록번호</th>
<th style="width: 110px;">팀원수</th>
<th style="width: 125px;">매출액/투자규모</th>
<th style="width: 110px;">등록회원번호</th>
<th style="width: 80px;">승인상태</th>
</tr>
</thead>
<tbody id="weneedadmin-tbodyPassed">
<c:forEach var="comInfoVo" items="${comListPassed}">
<tr class="weneed-adminTable">
<td>
<input type="checkbox" name="weneed-adminStatusChkbox-after">
</td>
<td>${comInfoVo.comCode}</td>
<td>${comInfoVo.comName}</td>
<td>${comInfoVo.comRegNo}</td>
<td>${comInfoVo.comSize}</td>
<td>${comInfoVo.profit}</td>
<td>${comInfoVo.comMemNo}</td>
<td>${comInfoVo.comInfoPassed}</td>
</tr>
</c:forEach>
</tbody>
</table>
<!-- 페이징 디브 -->
<div class="divPage" id="weneedAdmin-comInfoDivPagePassed">
<c:if test="${pagingInfoPassed.firstPage>1 }">
<a href="#" onclick="pageFuncP(${pagingInfoPassed.firstPage-1})">
<img src="<c:url value='/resources/images/first.JPG'/>" alt="이전블럭으로 이동">
</a>
</c:if>
<c:forEach var="i" begin="${pagingInfoPassed.firstPage}" end="${pagingInfoPassed.lastPage}">
<c:if test="${i==pagingInfoPassed.currentPage}">
<span style="color:blue;font-weight: bold">
${i}</span>
</c:if>
<c:if test="${i!=pagingInfoPassed.currentPage}">
<a href="#" onclick="pageFuncP(${i})">
[${i}]</a>
</c:if>
</c:forEach>
<c:if test="${pagingInfoPassed.lastPage < pagingInfoPassed.totalPage}">
<a href="#" onclick="pageFuncP(${pagingInfoPassed.lastPage+1})">
<img src="<c:url value='/resources/images/last.JPG'/>" alt="다음 블럭으로 이동">
</a>
</c:if>
</div>
<!-- 페이징 디브 끝 -->
</section>
</div>
[Jquery - Ajax]
$(function(){
var curPageY=$('input[name=currentPageY]').val();
var curPageP=$('input[name=currentPageP]').val();
//승인요청건 테이블을 다시 그려주는 ajax
$.ajax({
url:"<c:url value='/admin/companyService/comInfoPermissionYet.do'/>",
type:"post",
dataType:"json",
data:{
"curPageY":curPageY
},
success:function(result){ //배열로 돌려받겠지 그럼 이 값을 페이지에 다시 세팅해주면 될거같아
alert('승인요청건 조회 성공!');
pageFuncY(curPageY);
},
error:function(xhr, status, error){
alert('승인요청건 조회 error!: '+error);
}
});
//승인완료건 테이블을 다시 그려주는 ajax
$.ajax({
url:"<c:url value='/admin/companyService/comInfoPermissionPassed.do'/>",
type:"post",
dataType:"json",
data:{
"curPageP":curPageP
},
success:function(result){ //배열로 돌려받겠지 그럼 이 값을 페이지에 다시 세팅해주면 될거같아
alert('승인완료건 조회 성공!');
pageFuncY(curPageP);
},
error:function(xhr, status, error){
alert('승인완료건 조회 error!: '+error);
}
});
});
function pageFuncY(curPage){
var here = $('#weneedadmin-tbodyYet');
var here2 = $('#weneedAdmin-comInfoDivPageBefore');
$.ajax({
url:"<c:url value='/admin/companyService/comInfoPermissionYet.do'/>",
type:"get",
dataType:"json",
data:{
"curPage":curPage
},
success:function(result){ //배열로 돌려받겠지 그럼 이 값을 페이지에 다시 세팅해주면 될거같아
// alert('승인요청건 조회 성공!');
drawTrY(result, here);
drawPageDivY(result, here2);
},
error:function(xhr, status, error){
alert('승인요청건 조회 error!: '+error);
}
});
}
function pageFuncP(curPage){
var here = $('#weneedadmin-tbodyPassed');
var here2 = $('#weneedAdmin-comInfoDivPagePassed');
$.ajax({
url:"<c:url value='/admin/companyService/comInfoPermissionPassed.do'/>",
type:"get",
dataType:"json",
data:{
"curPage":curPage
},
success:function(result){ //배열로 돌려받겠지 그럼 이 값을 페이지에 다시 세팅해주면 될거같아
// alert('승인완료건 조회 성공!');
drawTrP(result, here);
drawPageDivP(result, here2);
},
error:function(xhr, status, error){
alert('승인완료건 조회 error!: '+error);
}
});
}
function drawTrY(jsonVo, pasteHere){
pasteHere.html('');
var pageLength=jsonVo.comList.length;
//리스트의 개수만큼
console.log("pageLength:"+pageLength);
for(comVo of jsonVo.comList){
if(comVo.comRegNo == null){
comVo.comRegNo='';
}
if(comVo.comSize == null){
comVo.comSize='';
}
if(comVo.profit == null){
comVo.profit='';
}
if(comVo.comMemNo == null){
comVo.comMemNo='';
}
var str='';
str+='<tr class="weneed-adminTable">';
str+='<td>';
str+='<input type="checkbox" name="weneed-adminStatusChkbox-before">';
str+='</td>';
str+='<td>'+comVo.comCode+'</td>';
str+='<td>'+comVo.comName+'</td>';
str+='<td>'+comVo.comRegNo+'</td>';
str+='<td>'+comVo.comSize+'</td>';
str+='<td>'+comVo.profit+'</td>';
str+='<td>'+comVo.comMemNo+'</td>';
str+='<td>'+comVo.comInfoPassed+'</td>';
str+='</tr>';
pasteHere.append(str);
}
}
function drawTrP(jsonVo, pasteHere){
pasteHere.html('');
var pageLength=jsonVo.comList.length;
//리스트의 개수만큼
console.log("pageLength:"+pageLength);
for(comVo of jsonVo.comList){
if(comVo.comRegNo == null){
comVo.comRegNo='';
}
if(comVo.comSize == null){
comVo.comSize='';
}
if(comVo.profit == null){
comVo.profit='';
}
if(comVo.comMemNo == null){
comVo.comMemNo='';
}
var str='';
str+='<tr class="weneed-adminTable">';
str+='<td>';
str+='<input type="checkbox" name="weneed-adminStatusChkbox-after">';
str+='</td>';
str+='<td>'+comVo.comCode+'</td>';
str+='<td>'+comVo.comName+'</td>';
str+='<td>'+comVo.comRegNo+'</td>';
str+='<td>'+comVo.comSize+'</td>';
str+='<td>'+comVo.profit+'</td>';
str+='<td>'+comVo.comMemNo+'</td>';
str+='<td>'+comVo.comInfoPassed+'</td>';
str+='</tr>';
pasteHere.append(str);
}
}
function drawPageDivY(jsonVo, pasteHere){
console.log(jsonVo);
console.log(jsonVo.pagingInfo.currentPage);
pasteHere.html('');
var str='';
var paging=jsonVo.pagingInfo;
if(paging.firstPage>1){
str+="<a href='#' onclick='pageFuncY("+(paging.firstPage-1)+")'>";
str+="<img src='<c:url value='/resources/images/first.JPG'/>'></a>";
}
for(var i=paging.firstPage; i<=paging.lastPage; i++){
if(i==paging.currentPage){
str+="<span style='color:blue;font-weight:bold'> "+i+" </span>";
}else{
str+="<a href='#' onclick='pageFuncY("+i+")'> ["+i+"] </a>";
}
}
if(paging.lastPage < paging.totalPage){
str+="<a href='#' onclick='pageFuncY("+(paging.lastPage+1)+")'>";
str+="<img src='<c:url value='/resources/images/last.JPG'/>'></a>";
}
str+='</div>';
$('#weneedAdmin-comInfoDivPageBefore').append(str);
}
function drawPageDivP(jsonVo, pasteHere){
console.log(jsonVo);
console.log(jsonVo.pagingInfo.currentPage);
pasteHere.html('');
var str='';
var paging=jsonVo.pagingInfo;
str+='<div class="divPage" id="'+pasteHere+'">';
if(paging.firstPage>1){
str+="<a href='#' onclick='pageFuncP("+(paging.firstPage-1)+")'>";
str+="<img src='<c:url value='/resources/images/first.JPG'/>'></a>";
}
for(var i=paging.firstPage; i<=paging.lastPage; i++){
if(i==paging.currentPage){
str+="<span style='color:blue;font-weight:bold'> "+i+" </span>";
}else{
str+="<a href='#' onclick='pageFuncP("+i+")'> ["+i+"] </a>";
}
}
if(paging.lastPage < paging.totalPage){
str+="<a href='#' onclick='pageFuncP("+(paging.lastPage+1)+")'>";
str+="<img src='<c:url value='/resources/images/last.JPG'/>'></a>";
}
$('#weneedAdmin-comInfoDivPagePassed').append(str);
}
$.send=function(curPage){
$('#currentPage').val(curPage);
$.ajax({
url:"<c:url value='/zipcode/ajaxZipcode.do'/>",
type:"post",
data:$('#frmZip').serializeArray(),
dataType:"xml",
success:function(xmlStr){
//alert(xmlStr);
totalCount=$(xmlStr).find('totalCount').html();
var errorCode=$(xmlStr).find('errorCode').html();
var errorMessage=$(xmlStr).find('errorMessage').text();
if(errorCode!=0){ //정상이 아니면
alert(errorCode + "=>" + errorMessage);
}else{
if(xmlStr!=null){
$.makeList(xmlStr);
$.pageMake();
}
}
},
error:function(xhr, status, error){
alert('error! : '+error);
}
});
}
[Controller]
//정보 승인 페이지
@RequestMapping("/comInfoPermission.do")
public String adminRegister(SearchVO searchVo, SearchVO searchVo2, Model model) {
//1
logger.info("위니드 관리자 페이지 - 정보 /이미지 등록 승인 요청 조회");
//2
//페이징 처리 관련 셋팅
//YET 페이징
PaginationInfo pagingInfoYet = new PaginationInfo();
pagingInfoYet.setBlockSize(Utility.BLOCK_SIZE);
pagingInfoYet.setRecordCountPerPage(5);
pagingInfoYet.setCurrentPage(searchVo.getCurrentPage());
//[2] SearchVo 셋팅
searchVo.setRecordCountPerPage(Utility.RECORD_COUNT);
searchVo.setFirstRecordIndex(pagingInfoYet.getFirstRecordIndex());
//PASS 페이징
//[1] PaginationInfo 생성
PaginationInfo pagingInfoPassed = new PaginationInfo();
pagingInfoPassed.setBlockSize(Utility.BLOCK_SIZE);
pagingInfoPassed.setRecordCountPerPage(5);
pagingInfoPassed.setCurrentPage(searchVo2.getCurrentPage());
//[2] SearchVo 셋팅
searchVo2.setRecordCountPerPage(Utility.RECORD_COUNT);
searchVo2.setFirstRecordIndex(pagingInfoPassed.getFirstRecordIndex());
//기업정보 모조리 불러다 노출
//YET 리스트
List<ComInfoVO> comListYet=comInfoService.selectAllYetCompany(searchVo);
int totalRecord=comInfoService.selectYetTotalRecord(searchVo);
logger.info("기업정보 승인요청건 조회 결과, comListYet.size={}", comListYet.size());
//PASSED 리스트
List<ComInfoVO> comListPassed=comInfoService.selectAllPassedCompany(searchVo2);
logger.info("기업정보 승인완료건 조회 결과, comListPassed.size={}", comListPassed.size());
int totalRecord2=comInfoService.selectPassedTotalRecord(searchVo2);
logger.info("승인요청 건 개수={}, 승인완료 개수={}", totalRecord, totalRecord2);
pagingInfoYet.setTotalRecord(totalRecord);
pagingInfoPassed.setTotalRecord(totalRecord2);
model.addAttribute("comListYet", comListYet);
model.addAttribute("comListPassed", comListPassed);
model.addAttribute("pagingInfoYet", pagingInfoYet);
model.addAttribute("pagingInfoPassed", pagingInfoPassed);
return "admin/companyService/comInfoPermission2";
}
@ResponseBody
@RequestMapping("/comInfoPermissionYet.do")
public PaginationInfoJsonVO adminRegister(@RequestParam int curPage) {
logger.info("위니드 관리자 페이지 - 정보 승인 요청 조회, 파라미터 curPageY={}", curPage);
//2
//페이징 처리 관련 셋팅
//YET 페이징
SearchVO searchVo = new SearchVO();
PaginationInfo pagingInfo = new PaginationInfo();
pagingInfo.setBlockSize(Utility.BLOCK_SIZE);
pagingInfo.setRecordCountPerPage(5);
pagingInfo.setCurrentPage(curPage);
//[2] SearchVo 셋팅
searchVo.setRecordCountPerPage(Utility.RECORD_COUNT);
searchVo.setFirstRecordIndex(pagingInfo.getFirstRecordIndex());
//YET 리스트
List<ComInfoVO> comList=comInfoService.selectAllYetCompany(searchVo);
logger.info("기업정보 승인요청건 조회 결과, comListYet.size={}", comList.size());
int totalRecord=comInfoService.selectYetTotalRecord(searchVo);
pagingInfo.setTotalRecord(totalRecord);
PaginationInfoJsonVO jsonVo=new PaginationInfoJsonVO();
jsonVo.setComList(comList);
jsonVo.setPagingInfo(pagingInfo);
return jsonVo;
}
@ResponseBody
@RequestMapping("/comInfoPermissionPassed.do")
public PaginationInfoJsonVO adminRegister2(@RequestParam int curPage) {
logger.info("위니드 관리자 페이지 - 정보 승인 완료 건 조회, 파라미터 curPageP={}", curPage);
//2
//페이징 처리 관련 셋팅
//PASSED 페이징
SearchVO searchVo = new SearchVO();
PaginationInfo pagingInfoPassed = new PaginationInfo();
pagingInfoPassed.setBlockSize(Utility.BLOCK_SIZE);
pagingInfoPassed.setRecordCountPerPage(5);
pagingInfoPassed.setCurrentPage(curPage);
//[2] SearchVo 셋팅
searchVo.setRecordCountPerPage(Utility.RECORD_COUNT);
searchVo.setFirstRecordIndex(pagingInfoPassed.getFirstRecordIndex());
List<ComInfoVO> comListPassed=comInfoService.selectAllPassedCompany(searchVo);
logger.info("기업정보 승인완료건 조회 결과, comListPassed.size={}", comListPassed.size());
int totalRecord=comInfoService.selectPassedTotalRecord(searchVo);
pagingInfoPassed.setTotalRecord(totalRecord);
PaginationInfoJsonVO jsonVo=new PaginationInfoJsonVO();
jsonVo.setComList(comListPassed);
jsonVo.setPagingInfo(pagingInfoPassed);
return jsonVo;
}
@ResponseBody
@RequestMapping("/comInfoStatustoPass.do")
public List<ComInfoVO> adminComInfoStatustoPass(@RequestParam(value="comCodeList[]") List<String> comCodeList,
@RequestParam(value="comMemNoList[]") List<String> comMemNoList) {
System.out.println("== comCodeList ==");
for(String comCode : comCodeList) {
System.out.println(comCode);
}
System.out.println("== comMemNoList ==");
for(String comMemNo : comMemNoList) {
System.out.println(comMemNo);
}
logger.info("기업정보등록 승인 처리, 파라미터 회사코드 배열 comCodeArr={}, comMemNoArr={}", comCodeList, comMemNoList);
//컴코드랑 컴멤 싸그리 넘겨서 디비처리해줍니다
List<ComInfoVO> changedComList=comInfoService.changeStatustoPass(comCodeList, comMemNoList);
logger.info("기업정보등록 승인 처리 결과, changedComList.size={}", changedComList.size());
//결과값은 다시 컴인포 목록입니다.
return changedComList;
}
728x90
반응형