Spring-JSP

Paging Module - Java + javascript

Jeong Jeon
반응형

Java로 Script Paging Box를 만들어 붙이는 방식으로 만들어보자.

Paging에는 여러가지 방식이 있으니, 다음번에는 Ajax로 만들어서 올려놔야지...

 

 

1). Mapper.xml

  • start 와 limit를 적용시켜야 한다.
  • 불러올때는 RowNumber로 List의 Numbering을 적용하였다.
<select id="selectNoticeList" parameterType="noticeVo" resultType="noticeVo" statementType="PREPARED" >

SELECT
	*
	,ROW_NUMBER() OVER(ORDER BY NOTICE_ID ASC) AS ROWNUM
FROM NOTICE n
WHERE 1=1
AND n.COMPANY_ID = #{companyId}
AND n.DEL_FLAG ='N'
ORDER BY n.NOTICE_ID DESC
LIMIT #{start}, #{end}
</select>

2). Paging Module.Java

  • row의 갯수와 PageRow의 갯수를 받아 수정할수 있다.
  • 페이징 Number box를 만들어서 Return 하여 사용한다.
import java.util.HashMap;



public class QuerystringPageing {



int total;
int total_page;
int curr_page;
int row = 10;
int page_row = 5;

/**

* non querystring paging
* @param total - 총 레코드갯수
* @param curr_page - 현재 페이지
*/

public QuerystringPageing(int total, int curr_page) {
	this.total = total;
	this.curr_page = curr_page;
	this.total_page = (int) Math.ceil(total/this.row);
}



/**
* non querystring paging
* @param total - 총 레코드갯수
* @param curr_page - 현재 페이지
* @param row - 화면상 디스플레이될 레코드의 수
*/

public QuerystringPageing(int total, int curr_page, int row) {
	this.total = total;
	this.curr_page = curr_page;
	this.row = row;
	this.total_page = (int) Math.ceil(( double )total/( double )row);
	
	if(this.curr_page > this.total_page) {
		this.curr_page = this.total_page;
    }
}


/**
* non querystring paging
* @param total - 총 레코드갯수
* @param curr_page - 현재 페이지
* @param row - 화면상 디스플레이될 레코드의 수
* @param page_row - 화면상 디스플레이 될 페이지 네비게이션 갯수
*/

public QuerystringPageing(int total, int curr_page, int row, int page_row) {

	this.total = total;
	this.curr_page = curr_page;
	this.row = row;
	this.total_page = (int) Math.ceil(( double )total/( double )row);
	this.page_row = page_row;

	if(this.curr_page > this.total_page) {
    	this.curr_page = this.total_page;
    }
}



/**
* DB limit용 변수와 총 페이지수 반환
* @return HashMap<String, Object>
* @return start - mysql limit 시작row
* @return end - mysql limit offset
* @return total_page - 총 페이지 갯수
*/

public HashMap<String, Object> getLimit(){
	int rs_start = row*(this.curr_page-1);
	HashMap<String, Object> param = new HashMap<String, Object>();
	
    if(rs_start < 0){
		rs_start = 0;
		param.put("start", rs_start);
		param.put("end", this.row);
		param.put("total_page", this.total_page);
		param.put("curr_page", this.curr_page);
	}
	return param;
}

/**
* @param formName
* @return
* @desc 페이징 버튼 html 을 생성 하여 리턴한다.
*/

public String getScript(String formName){
	String script = "";
	int page_group_no = (this.curr_page-1)/this.page_row;
	int total_group_no = ((int)(Math.ceil((double)(this.total_page)/this.page_row)) - 1);
	int start = page_group_no*this.page_row;
	int end = start+this.page_row;
	int last_page = 0;

	script += "<div class='paging'>";
	if(page_group_no>0){
		script += " <a href='javascript:go_page(1);'><img src='/resources/images/paging_first.png' alt='처음페이지'></a>";
		script += " <a href='javascript:go_page("+((page_group_no-1)*this.page_row+1)+");'><img src='/resources/images/paging_prev.png' alt='이전페이지'></a>";
	}

	for(int i=start;i<end;i++){
		if(i==this.total_page){
			break;
		}
		int ii = i+1;
		String cls = "";
		if(ii==this.curr_page) {
			script += " <a href='javascript:void();' class='on'>"+ii+"</a>";
		}else{
			script += " <a href='javascript:go_page("+ii+");' "+cls+">"+ii+"</a>";
		}
	}

	if(page_group_no<total_group_no){
		script += " <a href='javascript:go_page("+((page_group_no+1)*this.page_row+1)+");'><img src='/resources/images/paging_next.png' alt='다음페이지'></a>";
		script += " <a href='javascript:go_page("+((total_group_no)*this.page_row+1)+");'><img src='/resources/images/paging_last.png' alt='마지막페이지'></a>";
	}

	script += "</td>";
	script += "<script>";
	script += "function go_page(page){";
	script += " $('input[name=currPage]').val(page);";
	script += " $('form[name="+formName+"]').submit();";
	script += "}";
	script += "</script>";
	return script;
	}
}

3). Service.java

//Parameter testVo

int currPage = 1;
int pageRow = 25;
String startDate = "";
String endDate = "";
String useYn = "";
String searchText = "";

if(testVo.getCurrPage() != 0) {
	currPage = testVo.getCurrPage();
}
if(testVo.getPageRow() != 0) {
	pageRow = testVo.getPageRow();
}
if(!StringUtils.isEmpty(testVo.getStartDate())) {
	startDate = testVo.getStartDate();
}
if(!StringUtils.isEmpty(testVo.getEndDate())) {
	endDate = testVo.getEndDate();
	//비교 컬럼에 함수를 쓰지 않기위해 하루를 더함.
	testVo.setEndDate(StringTool.getDateCalculate(endDate,"d",1));
}
if(!StringUtils.isEmpty(testVo.getSearchText())) {
	searchText = testVo.getSearchText();
}
if(!StringUtils.isEmpty(testVo.getUseYn())) {
	useYn = testVo.getUseYn();
}

int total = iotDao.selectTestListCount(testVo);
QuerystringPageing paging = new QuerystringPageing(total, currPage, pageRow);

testVo.setStart((int)paging.getLimit().get("start"));
testVo.setEnd((int) paging.getLimit().get("end"));

resultMap.put("currPage",currPage);
resultMap.put("pageRow",pageRow);
resultMap.put("startDate", startDate);
resultMap.put("endDate", endDate);

resultMap.put("total",total);
resultMap.put("pagination",paging.getScript("frm",messageSource.getMessage("common.page.first", null, locale), messageSource.getMessage("common.page.prev", null, locale), messageSource.getMessage("common.page.next", null, locale), messageSource.getMessage("common.page.last", null, locale)));
resultMap.put("searchText", searchText);
resultMap.put("useYn",useYn);

4). List.Jsp

  • input type="hidden"으로 현재 페이지와 pagerow의 갯수를 지속적으로 반영해준다.
  • ${data.paging} 로 만들어놓은 페이징 Number box를 불러온다.
  • ${data.paging }를 페이징 Number box의 원하는 위치에 넣어주면 된다.
<form name="frm" action="/media/${data.cate}/list" method="get">
	<input type="hidden" name="currPage" value="${data.currPage }">
	<input type="hidden" name="pageRow" value="${data.pageRow }">
</form>

${data.paging } //원하는 위치에 붙여준다. => Java에서 만든 Javascript Paging Box

 

5). PageVo.java

  • PageVo를 Extends하여 필수 공통 Vo로 사용한다.
public class PageVo {
	private int currPage;
	private int pageRow;
    private int start;
    private int end;
	private Date registerDate;
    private Date updateDate;
    private int rownum;
    private String useYn;
}

 

반응형