Javascript

js 페이징과련 함수

windrises 2008. 5. 9. 17:51

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()




[소스&샘플]-------------------------------------------------------------------------
<!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>