0126 ๊ฐœ๋ฐœ์ผ์ง€

์˜ค๋Š˜ ํ•œ ์ผ

๊ณผ์ œ


1. ajax ๋ฐ›์€ ๊ฒฐ๊ณผ๋กœ ์ง์ ‘ ํŽ˜์ด์ง• ui ๋งŒ๋“ค์–ด์คŒ
2. ๊ฒ€์ƒ‰์–ด ์ž…๋ ฅ ํ›„ ๊ฒ€์ƒ‰ ์‹œ ํ˜„์žฌ ์„ ํƒ๋œ ํŽ˜์ด์ง€ ๋ฒˆํ˜ธ ์œ ์ง€๋˜๋Š” ์˜ค๋ฅ˜ ์ˆ˜์ •

ํŽ˜์ด์ง• ๋™์  ์ƒ์„ฑ

์ธ๋ฌผ ์ •๋ณด๋ฅผ ๊ฐ€์ง€๊ณ  ํ…Œ์ด๋ธ”์„ ๋™์ ์œผ๋กœ ์ƒ์„ฑํ•˜๋Š” ๋ถ€๋ถ„์€ ๊ตฌํ˜„ํ–ˆ๋Š”๋ฐ, ํŽ˜์ด์ง• ๋ถ€๋ถ„์€ ์ „์ž์ •๋ถ€ํ”„๋ ˆ์ž„์›Œํฌ์—์„œ ์ œ๊ณตํ•˜๋Š” <ui:pagination>์ด๋ผ๋Š” ํƒœ๊ทธ๋ฅผ ์ด์šฉํ•˜๊ณ  ์žˆ์–ด์„œ ์–ด๋–ป๊ฒŒ ํ•ด์•ผ๋ ์ง€ ๊ณ ๋ฏผ์ด์—ˆ๋‹ค. ์›๋ž˜ ์ € ํƒœ๊ทธ์—๋Š” paginationInfo๋ผ๋Š” ์†์„ฑ์ด ์žˆ์–ด controller์—์„œ ๋ฐ›์€ paginationInfo ๊ฐ์ฒด๋ฅผ ์ „๋‹ฌํ•ด์ฃผ๋ฉด ์–ด๋””์„ ๊ฐ€ ์ž๋™์œผ๋กœ ๋ณ€ํ™˜๋˜์–ด html์—๋Š” onclick function์„ ๊ฐ€์ง„<a>๊ฐ€ ๋œ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ javascript์—์„œ html ์ƒ์„ฑํ•  ๋•Œ๋Š” ๊ทธ ํƒœ๊ทธ๋ฅผ ๊ทธ๋Œ€๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†์—ˆ๋‹ค.

<!-- ๊ธฐ์กด paging ํƒœ๊ทธ -->
<div id="paging_wrap">
  <div id="paging" class="paging">
    <ui:pagination paginationInfo = "${paginationInfo}" type="customRenderer" jsFunction="fn_egov_link_page" />
    <form:hidden path="pageIndex" />
  </div>						
</div>

ajax์—์„œ paginationInfo ๊ฐ์ฒด๋Š” ๋ฐ›์„ ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์—, paginationInfo ๊ฐ์ฒด์˜ ์ •๋ณด๋ฅผ ์ด์šฉํ•ด <a>ํƒœ๊ทธ๋ฅผ ๋งŒ๋“ค์–ด์ฃผ๋Š” ๋ถ€๋ถ„์€ ์ง์ ‘ ๊ตฌํ˜„ํ•˜๊ธฐ๋กœ ํ–ˆ๋‹ค. ์ „์ž์ •๋ถ€ํ”„๋ ˆ์ž„์›Œํฌ์—์„œ๋Š” PaginationInfo๋ผ๋Š” ํด๋ž˜์Šค๋ฅผ ์ œ๊ณตํ•˜๊ณ  ์žˆ๋‹ค. ๊ทธ๊ฑธ ์—ด์–ด๋ณด๋ฉด ์•„๋ž˜์™€ ๊ฐ™๋‹ค.

/*
 * Required Fields: ์‚ฌ์šฉ์ž๊ฐ€ ์ž…๋ ฅํ•ด์•ผ ํ•˜๋Š” ํ•„๋“œ๊ฐ’์ด๋‹ค.
 * currentPageNo : ํ˜„์žฌ ํŽ˜์ด์ง€ ๋ฒˆํ˜ธ.
 * recordCountPerPage : ํ•œ ํŽ˜์ด์ง€๋‹น ๊ฒŒ์‹œ๋˜๋Š” ๊ฒŒ์‹œ๋ฌผ ๊ฑด ์ˆ˜.
 * pageSize : ํŽ˜์ด์ง€ ๋ฆฌ์ŠคํŠธ์— ๊ฒŒ์‹œ๋˜๋Š” ํŽ˜์ด์ง€ ๊ฑด์ˆ˜.
 * totalRecordCount : ์ „์ฒด ๊ฒŒ์‹œ๋ฌผ ๊ฑด ์ˆ˜.
 *                
 * Not Required Fields : ์‚ฌ์šฉ์ž๊ฐ€ ์ž…๋ ฅํ•œ Required Fields ๊ฐ’์„ ๋ฐ”ํƒ•์œผ๋กœ ๊ณ„์‚ฐํ•˜์—ฌ ์ •ํ•ด์ง€๋Š” ๊ฐ’์ด๋‹ค.
 * totalPageCount: ํŽ˜์ด์ง€ ๊ฐœ์ˆ˜.
 * firstPageNoOnPageList : ํŽ˜์ด์ง€ ๋ฆฌ์ŠคํŠธ์˜ ์ฒซ ํŽ˜์ด์ง€ ๋ฒˆํ˜ธ.
 * lastPageNoOnPageList : ํŽ˜์ด์ง€ ๋ฆฌ์ŠคํŠธ์˜ ๋งˆ์ง€๋ง‰ ํŽ˜์ด์ง€ ๋ฒˆํ˜ธ.
 * firstRecordIndex : ํŽ˜์ด์ง• SQL์˜ ์กฐ๊ฑด์ ˆ์— ์‚ฌ์šฉ๋˜๋Š” ์‹œ์ž‘ rownum. 
 * lastRecordIndex : ํŽ˜์ด์ง• SQL์˜ ์กฐ๊ฑด์ ˆ์— ์‚ฌ์šฉ๋˜๋Š” ๋งˆ์ง€๋ง‰ rownum.
 */

์ด ์ค‘ ํŽ˜์ด์ง• ํƒœ๊ทธ๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด์„œ ํŽ˜์ด์ง€ ๋ฆฌ์ŠคํŠธ์˜ ์ฒซ ํŽ˜์ด์ง€ ๋ฒˆํ˜ธ firstPageNoOnPageList ์™€ ํŽ˜์ด์ง€ ๋ฆฌ์ŠคํŠธ์˜ ๋งˆ์ง€๋ง‰ ํŽ˜์ด์ง€ ๋ฒˆํ˜ธ lastPageNoOnPageList๋ฅผ ์ด์šฉํ•ด์„œ ๋ฐ˜๋ณต๋ฌธ์„ ๋งŒ๋“ค์—ˆ๋‹ค. ์•ˆ์— ๋“ค์–ด๊ฐ€๋Š” <a> ํƒœ๊ทธ๋Š” ๊ธฐ์กด CustomPaginationRenderer์—์„œ ์‚ฌ์šฉํ•˜๋˜ ์ฝ”๋“œ๋ฅผ ๊ฐ€์ ธ์™€์„œ ์ˆ˜์ •ํ•ด์ฃผ์—ˆ๋‹ค.

$paging_text ="";
$('#paging_wrap>#paging').empty(); // ํŽ˜์ด์ง• ๋น„์šฐ๊ธฐ

for (var page = pageInfo.firstPageNoOnPageList; page <= pageInfo.lastPageNoOnPageList; page++) {
   // ํ˜„์žฌ ํŽ˜์ด์ง€ ์—ฌ๋ถ€์— ๋”ฐ๋ผ css ํด๋ž˜์Šค ๋ฐ onclick function ๋‹ค๋ฆ„
  if (page === pageInfo.currentPageNo) {
    $paging_text += "<a href=\"#\" class=\"num_on\">" + page + "</a>&#160;";
  } else {
    $paging_text += "<a href=\"#\" class=\"num\" onclick=\"fn_egov_link_page(" + page + "); return false;\">" + page + "</a>&#160;";
  }
}

๊ฒ€์ƒ‰ ์‹œ ํŽ˜์ด์ง• ์˜ค๋ฅ˜ ์ˆ˜์ •

์ด์ „ ๊ฒ€์ƒ‰ ๊ฒฐ๊ณผ์—์„œ 1์ด ์•„๋‹Œ ๋‹ค๋ฅธ ํŽ˜์ด์ง€ ๋ฒˆํ˜ธ๋ฅผ ์„ ํƒํ•œ ์ƒํƒœ์—์„œ ์ƒˆ๋กœ์šด ํ‚ค์›Œ๋“œ๋กœ ๊ฒ€์ƒ‰ํ•˜๋ฉด ํŽ˜์ด์ง• ๋ฒˆํ˜ธ๊ฐ€ ์„ ํƒ๋œ ์ฑ„๋กœ ์ฟผ๋ฆฌ๋ฅผ ์ง„ํ–‰ํ•˜๋Š” ์˜ค๋ฅ˜๊ฐ€ ์žˆ์–ด '๊ฒ€์ƒ‰' ๋ฒ„ํŠผ ํด๋ฆญ ์‹œ, '์ดˆ๊ธฐํ™”'๋ฒ„ํŠผ ํด๋ฆญ ์‹œ ์ „๋ถ€ ํŽ˜์ด์ง€ ๋ฒˆํ˜ธ๋ฅผ 1๋กœ ์ดˆ๊ธฐํ™”ํ•ด์ฃผ์—ˆ๋‹ค.
๊ทธ๋ฆฌ๊ณ  ํ‚ค์›Œ๋“œ ๊ฒ€์ƒ‰ ๋ฐ ํŽ˜์ด์ง• ์‹œ ajax๋กœ ๋ฐ์ดํ„ฐ ํ˜ธ์ถœํ•˜๋Š” ๋ถ€๋ถ„์˜ ์ฝ”๋“œ๊ฐ€ ์ค‘๋ณต๋˜์„œ ๋ณ„๋„ ํ•จ์ˆ˜๋กœ ๋ถ„๋ฆฌํ•ด์ฃผ์—ˆ๋‹ค.

/* ๊ฒ€์ƒ‰ ์ดˆ๊ธฐํ™” ๋ฒ„ํŠผ */
function fn_egov_reset() {
  document.listForm.reset();
  $("#pageIndex").attr('value', "1");
}

/* ์‚ฌ์šฉ์ž ๋ชฉ๋ก ํ™”๋ฉด function */
function fn_egov_selectUserList() {
  $("#pageIndex").attr('value', "1");
  call_ajax();
}

/* pagination ํŽ˜์ด์ง€ ๋งํฌ function */
function fn_egov_link_page(pageNo){
  // ์„ ํƒํ•œ ํŽ˜์ด์ง€ ๋ฒˆํ˜ธ ์ €์žฅ
  $("#pageIndex").attr('value', pageNo.toString());
  call_ajax();
}

/* ajax๋กœ ์ธ๋ฌผ ๋ชฉ๋ก ๋ฐ ํŽ˜์ด์ง• ์ •๋ณด ๋ฐ›๊ธฐ */
function call_ajax() {
  $.ajax({
    type : 'POST',
    data : $("#listForm").serialize(),
    datatype : 'json',
    url : "<c:url value='/selectUserListAjax.do?'/>",
    success: function(result) {
      updateUserTable(result.paginationInfo,  result.empList);
    },
    error : function(error) {
      console.log("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
    }
  })
}

์ •๋ณด์ฒ˜๋ฆฌ๊ธฐ์‚ฌ

์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ํ…Œ์ŠคํŠธ ๊ด€๋ฆฌ ๊ด€๋ จ ์˜์ƒ 3๊ฐœ

์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ