Ajax를 사용하면서 js로만 페이징할일이 있을거같아 만들어둔다.
js에서 전체목록을 컨트롤하기때문에 간단간단한 목록에 사용할때 적합할듯하다..
많은 양의 목록이라면 아래 객체를 컴포넌트단으로 옮겨 사용하거나, 아니면
계산된 시작페이지번호와, 끝페이지번호만 컴포넌트로 던져 가져오면 되겠다.
[사용법]
1. 최초 js페이지에서 initail할때 객체를 얻어온다.(전역)
var pageObj = getPageRFObj();
2. display할 게시물을 가져오면 페이징객체에 기본정보를 셋팅한다.
한화면에 표시할 게시물의 수 : 10
한화면에 표시할 페이지의 수 : 7
전체게시물의 수 : 1000
pageObj.setInfo(10,7,1000);
3. 페이지를 그릴때 현재페이지에 맞게 변수를 다시 계산한다.
pageObj.calc(page);
4. 페이징객체의 변수,함수를 이용하여 게시물들을 display한다.
display에 이용되는 함수,변수들
-pageObj.isPPrevPrint()
-pageObj.getPPrevPage()
-pageObj.isPrevPrint()
-pageObj.getPrevPage()
-pageObj.startPageNum
-pageObj.endPageNum
-pageObj.isNextPrint()
-pageObj.getNextPage()
-pageObj.isNNextPrint()
-pageObj.getNNextPage()
invalid-file[소스&샘플]-------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script>
var pageObj = getPageRFObj();
//테스트함수
function getObj(index){
var obj = {
id:index,
name:'afasdfasdfafasdfasdf',
age:'age '+index,
phone:'phone '+index,
address:'address '+index,
vote:'vote '+index,
read:'read '+index,
auth:'auth '+index,
comment:'comment '+index,
asdfaslfjalsfj:'fakfjahsdfa '+index
}
return obj;
}
//테스트함수
function getObjList(){
total = 2324;
var objArr = new Array();
for(var i=0 ; i<total ; i++){
objArr[i] = getObj(i);
}
pageObj.setInfo(10,7,2324);
return objArr;
}
/*******************************************************************************
* 페이징함수
*******************************************************************************/
function getPageRFObj(){
var obj = {
page : 0, //현재페이지
block : 0, //현재블럭
limit : 0, //게시물제한
pageLimit : 0, //페이지제한
total : 0, //전체게시물
totalPage : 0, //전체페이지수
totalBlock : 0, //전체블럭수
startNum : 0, //시작번호
endNum : 0, //끝번호
startPageNum : 0, //시작페이지번호
endPageNum : 0 //끝페이지번호
}
/*******************************************************************************
* 정보셋팅
* limit : 게시물제한
* pageLimit : 페이지제한
* total : 전체게시물
*******************************************************************************/
obj.setInfo = function(limit,pageLimit,total){
this.limit = limit;
this.pageLimit = pageLimit;
this.total = total;
};
/*******************************************************************************
* 해당페이지로 각 빌드의 값을 계산한다.
*******************************************************************************/
obj.calc = function(page){
if(total==0 || page==undefined || page<=0)return;
this.page = page;
this.totalPage = Math.ceil(this.total/this.limit);
this.startNum = (this.limit*(this.page-1))+1;
this.endNum = this.startNum+this.limit;
if(this.endNum >= this.total) this.endNum = total;
this.block = Math.ceil(this.page/this.pageLimit);
this.startPageNum = (this.pageLimit*(this.block-1))+1;
this.endPageNum = this.startPageNum + this.pageLimit;
if(this.endPageNum>=this.totalPage)this.endPageNum = this.totalPage+1;
this.totalBlock = Math.ceil(this.totalPage/this.pageLimit);
};
/*******************************************************************************
* 이전페이지의 존재유무
*******************************************************************************/
obj.isPrevPrint = function(){
if(this.page<=1)return false;
else return true;
};
/*******************************************************************************
* 이전페이지의 페이지번호
*******************************************************************************/
obj.getPrevPage = function(){
return this.page-1;
};
/*******************************************************************************
* 이전블럭의 존재유무
*******************************************************************************/
obj.isPPrevPrint = function(){
if(this.block<=1)return false;
else return true;
};
/*******************************************************************************
* 이전블럭의 페이지번호
*******************************************************************************/
obj.getPPrevPage = function(){
if(this.block<2)return 1;
return this.startPageNum-this.pageLimit;
}
/*******************************************************************************
* 다음페이지의 존재유무
*******************************************************************************/
obj.isNextPrint = function(){
if(this.page>=this.totalPage)return false;
else return true;
};/*******************************************************************************
* 다음페이지의 페이지번호
*******************************************************************************/
obj.getNextPage = function(){
return this.page+1;
}
/*******************************************************************************
* 다음블럭의 존재유무번호
*******************************************************************************/
obj.isNNextPrint = function(){
if(this.block>=this.totalBlock)return false;
else return true;
};
/*******************************************************************************
* 다음블럭의 페이지번호
*******************************************************************************/
obj.getNNextPage = function(){
return this.endPageNum;
}
obj.toString = function(){
var resStr = "{";
resStr += "page:"+this.page;
resStr += ",block:"+this.block;
resStr += ",limit:"+this.limit;
resStr += ",pageLimit:"+this.pageLimit;
resStr += ",total:"+this.total;
resStr += ",totalPage:"+this.totalPage;
resStr += ",startNum:"+this.startNum;
resStr += ",endNum:"+this.endNum;
resStr += ",startPageNum:"+this.startPageNum;
resStr += ",endPageNum:"+this.endPageNum;
resStr += ",totalBlock:"+this.totalBlock;
resStr += ",isPPrevPrint:"+this.isPPrevPrint();
resStr += ",isPrevPrint:"+this.isPrevPrint();
resStr += ",isNextPrint:"+this.isNextPrint();
resStr += ",isNNextPrint:"+this.isNNextPrint();
resStr += "}";
return resStr;
};
return obj;
}
//display sample
function refresh(page){
if(page==undefined)page = 1;
pageObj.calc(page);
//alert(pageObj.toString());
var str = "";
str+="<table border=1 width=100% cellpadding=0 cellpacing=0>";
str+="<tr><td>id</td><td>name:</td><td>address:</td><td>vote:</td><td>read:</td><td>comment:</td><td>auth:</td><td>asdfaslfjalsfj:</td></tr>";
for(var i=pageObj.startNum ; i<pageObj.endNum ; i++){
str+="<tr>";
str+="<td>"+objArr[i-1].id+"</td>";
str+="<td>"+objArr[i-1].name+"</td>";
str+="<td>"+objArr[i-1].address+"</td>";
str+="<td>"+objArr[i-1].vote+"</td>";
str+="<td>"+objArr[i-1].read+"</td>";
str+="<td>"+objArr[i-1].comment+"</td>";
str+="<td>"+objArr[i-1].auth+"</td>";
str+="<td>"+objArr[i-1].asdfaslfjalsfj+"</td>";
str+="</tr>";
}
//페이징 s
str+="<tr><td colspan=8 align=center>";
if(pageObj.isPPrevPrint()) str+="<a href='javascript:refresh("+pageObj.getPPrevPage()+")'><<</a> ";
else str+="<font color=gray><<</font> ";
if(pageObj.isPrevPrint()) str+="<a href='javascript:refresh("+pageObj.getPrevPage()+")'><</a> ";
else str+="<font color=gray><</font> ";
for(var i=pageObj.startPageNum ; i<pageObj.endPageNum ; i++){
if(i==page) str+="[ <b>"+i+"</b> ] ";
else str+="<a href='javascript:refresh("+i+")'>[ "+i+" ]</a> ";
}
if(pageObj.isNextPrint()) str+="<a href='javascript:refresh("+pageObj.getNextPage()+")'>></a> ";
else str+="<font color=gray>></font> ";
if(pageObj.isNNextPrint()) str+="<a href='javascript:refresh("+pageObj.getNNextPage()+")'>>></a> ";
else str+="<font color=gray>>></font> ";
str+="</td></tr>";
//페이징 e
str+="</table>";
document.getElementById("tdiv").innerHTML=str;
}
var objArr;
function initial(){
objArr = getObjList();
refresh(1);
}
</script>
<BODY onload="initial()">
<div id="tdiv" style="width:900px;"></div>
<a href='javascript:alert(pageObj.toString());'>정보보기</a>
</BODY>
</HTML>
'Javascript' 카테고리의 다른 글
| JS for...in 문.. (0) | 2012.12.27 |
|---|---|
| jQuery api & samples (1) | 2012.11.22 |
| window.alert override (0) | 2008.10.16 |