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> ";
} else {
$paging_text += "<a href=\"#\" class=\"num\" onclick=\"fn_egov_link_page(" + page + "); return false;\">" + page + "</a> ";
}
}
๊ฒ์ ์ ํ์ด์ง ์ค๋ฅ ์์
์ด์ ๊ฒ์ ๊ฒฐ๊ณผ์์ 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๊ฐ
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(0126 ๊ฐ๋ฐ์ผ์ง), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@lee_yesol421/0126-๊ฐ๋ฐ์ผ์ง์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค