게시판에 TDC를 적용했을때 페이징 하는 방법에 관한 문의가 가끔씩 들어와서 정리해서 글로 남긴다.
이것 저것 경험상 해보니 대충 3가지 방법으로 정리가 되서 3가지 방법 모두 소개하고자 한다.
뭐..아무래도 내 머리가 한계가 있어서 아래 3가지 방법보다 좋은 방법이 분명히 있으니 더 좋은 방법을
알아낸다면 꼭 게시판에 글 남겨주면 한다. (내가 고민고민해서 작성한 함수같은것 만들어서 Tip란에 올려두면 가끔 지나가시는 어떤 분이 툭 던져놓은
몇줄의 코드가 내가 생각한 코드보다 훨 좋은 방법인 경우가 있다. OTL)
3가지 방법은 다음과 같다.
1번 방법과 2번 방법은 유사한 점이 있는 방식이고 3번은 조금 처리하는 방식이 다르다.
어느것이 좋은지는 각자 취향에 따라서 결정해야겠지만 개인적으로는 1번 방법을 추천한다. 왜냐하면
그 방법이 가장 일반적인 페이징 방법이기 때문이다. 그 외에 게시물 수가 적고 코딩하기 귀찮다면 3번방법을
이용하면 된다. 3번방법은 그냥 만들어둔 함수에 맞게 몇가지 코드만 적어주면 되기 때문이다.
뭐 아무튼 아래에서 각각의 페이징 방법에 대해 자세하게 알아보자.
1. 페이지번호를 파라메타로 넘겨서하는 페이징
가장 일반적인 페이징 방법은 파라메타로 페이지 번호를 넘겨서 그 페이지 번호로 쿼리문 조작해서 필요한 부분의
레코드들만 가져오는 방식이다. 먼저 소스를 보자
tdc_list.asp
<![CDATA[
<OBJECT id=oList CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<PARAM NAME="UseHeader" VALUE="true">
<PARAM NAME="DataURL" VALUE="tdc_list_svr.asp?curPage=<%=Request("curPage")%>">
<PARAM NAME="TextQualifier" VALUE="|">
<param NAME="FieldDelim" VALUE="¶">
<PARAM NAME="RowDelim" VALUE="^">
<PARAM NAME="CharSet" VALUE="euc-kr">
</OBJECT>
<script language="javascript">
function goPage(c_page,param) {
var szParam;
szParam = "";
szParam = szParam + "?curPage="+c_page;
location = "tdc_list.asp" + szParam;
}
</script>
<table border="1" DataSrc="#oList">
<thead>
<tr>
<td>CustomerID</td>
<td>CompanyName</td>
<td>ContactName</td>
</tr>
</head>
<tbody>
<tr>
<td><span datafld="CustomerID" DATAFORMATAS="HTML"></span></td>
<td><span datafld="CompanyName" DATAFORMATAS="HTML"></span></td>
<td><span datafld="ContactName" DATAFORMATAS="HTML"></span></td>
</tr>
</tbody>
</table>
<span datasrc="#oList" datafld="page" dataformatas="HTML"></span>
]]>
소스를 보면 제일 첫부분에 TDC의 객체를 선언해 둔 코드 외에 자바스크립트로 goPage 함수만 정의되어 있다.
이 goPage 함수는 페이징 할때 이용하는 자바스크립트 함수이다. 그 다음엔 그냥 HTML코드이다.
다음은 TDC데이타들을 처리하는 페이지를 보자
tdc_list_svr.asp
<![CDATA[
<%
' 변수 선언및 초기화
Dim DBCon
Dim strConn
Dim strQry
Dim szHead
Dim szBody
szHead = ""
szBody = ""
strConn = ""
' 현재 페이지 번호
curPage = Request("curPage")
if curPage = "" then curPage = 1
' DB 연결 문자 변수
strConn = strConn&"Provider=SQLOLEDB.1;Persist Security Info=True;"
strConn = strConn&"Data Source=localhost;" ' Server Name
strConn = strConn&"User ID=sa;" ' User ID
strConn = strConn&"Password=;" ' User Password
strConn = strConn&"Initial Catalog=NorthWind;" ' DataBase
' DB 객체 생성및 DB 오픈
Set DBCon = Server.CreateObject("ADODB.Connection")
DBCon.Open strConn
' 한페이지에 보여줄 게시물 갯수 정의
nListNum = 10
' 쿼리문 실행결과를 레코드셋으로 반환
strQry = "select TOP " & nListNum * curPage & " CustomerID,CompanyName,ContactName from Customers "
Set rs=Server.CreateObject("ADODB.Recordset")
rs.CursorType = 1
rs.PageSize = nListNum
rs.Open strQry, DBCon
if NOT (rs.EOF or rs.BOF) then rs.AbsolutePage = curPage
Do While not rs.eof
db_CustomerID = rs(0)
db_CompanyName = rs(1)
db_ContactName = rs(2)
' TDC 형식으로 데이타를 가공한다.
szBody = szBody&"|"& db_CustomerID &"|¶"
szBody = szBody&"|"& db_CompanyName &"|¶"
szBody = szBody&"|"& db_ContactName &"|¶"
' 첫번째 행에만 페이징바 정보를 기록, 그 이후는 빈값넣어준다.
if szPage = "" then
' 전체 게시물 수를 구한다.
strQry = "Select Count(*) From Customers"
Set rs_m = DBCon.Execute(strQry)
nTotalRecord = rs_m(0)
nTotalPageNum = fnTotalPageSize(nTotalRecord, nListNum)
' ShowPageBar 함수를 호출해서 페이징바를 보여준다.
szPage = ShowPageBar(curPage, nTotalPageNum, szParam)
szBody = szBody&"|"& szPage &"|^"
else
szBody = szBody&"||^"
end if
rs.MoveNext()
Loop
' TDC 형식으로 헤더를 만든다.
szHead = "CustomerID¶CompanyName¶ContactName¶page^"
' 자원 해제
rs.Close : Set rs = nothing
rs_m.Close : Set rs_m = nothing
DBCon.Close : Set DBCon = nothing
Response.Write szHead
Response.Write szBody
'==================================================
' 페이지 네비게이션을 보여준다.
' 호출 방법 : ShowPageBar(현재페이지,전체페이지수,parameter)
'==================================================
Public Function ShowPageBar(cp,tp,param)
Dim nPREV, nCUR, nNEXT, i, szPage, nFirst, nLast
nPREV = (int((cp-1)/10)-1)*10+1
nCUR = (int((cp-1)/10))*10+1
nNEXT = (int((cp-1)/10)+1)*10+1
nFirst = "<a href='javascript:goPage(1,"&chr(34)¶m&chr(34)&")'>[처음]</a>"
nLast = "<a href='javascript:goPage("&tp&","&chr(34)¶m&chr(34)&")'>[마지막]</a>"
if nPREV > 0 then
szPage = "<a href='javascript:goPage("&nPREV&","&chr(34)¶m&chr(34)&")'>[이전10개]</a> "
else
szPage = "[이전10개] "
end if
i = 1
Do While i < 11 and nCUR <= tp
if CInt(cp) = CInt(nCUR) then
szPage = szPage & "<b>"&nCUR&"</b> "
else
szPage = szPage & "<a href='javascript:goPage("&nCUR&","&chr(34)¶m&chr(34)&")'>"&nCUR&"</a> "
end if
nCUR = nCUR + 1
i = i + 1
Loop
if nNEXT <= tp then
szPage = szPage & " <a href='javascript:goPage("&nNEXT&","&chr(34)¶m&chr(34)&")'>[다음10개]</a>"
else
szPage = szPage & " [다음10개]"
end if
if CInt(tp) = 0 then
ShowPageBar = "<b>1</b>"
else
ShowPageBar = nFirst&" "&szPage&" "&nLast
end if
End Function
'==================================================
' 페이지의 총 갯수를 반환. - ShowPageBar과 같이 연동
' 호출 방법 : fnTotalPageSize(총레코드수,페이지사이즈)
'==================================================
Function fnTotalPageSize(t_cnt, page_num)
Dim ret
t_cnt = CDbl(t_cnt)
ret = fix(t_cnt/page_num)
if (t_cnt mod page_num) > 0 then
ret = ret + 1
end if
fnTotalPageSize = ret
End Function
%>
]]>
자..존내 길다. 왜냐면 함수 2개를 포함시켜두었기 때문이다. 일반 asp 코딩방식대로 쭈욱~ 위에서 아래로 훑듯이 코딩하면
나중에 소스 다시볼때 복잡하고 고치기 쉽지 않아서 페이징 관련 함수들을 함수로 만들어 둔거다.
ShowPageBar 함수와 fnTotalPageSize 함수 설명하려니 갑자기 존내 귀찮아 진다.
잘 야리면 이해가 될것이다 -_-.. 그냥 그러려니 하고 이해 안되면 그냥 가져다 사용하자.
이로서 함수설명은 끝이 났다(-_-;;;)
이제 함수 말고 페이징을 위해서 처리하는 쿼리부분을 보자. 갑자기 또 소스보니 존내 귀찮아졌다.
그냥 가져다 사용하자 -_-;;;
첫번째 방법의 페이징 설명은 이로서 끝마친다 -_-;;;
2. TDC 메서드를 이용한 페이징
이 방법은 첫번째 방법과 유사하다. 그래서 서버단 페이지는 똑같고 단지 보여지는 페이지만 틀리다.
이 방법은 사실 그렇게 유용한 방법은 아닌것 같다. 그냥 TDC메서드를 이용해서 이렇게도 이용할 수 있구나만
보면 된다. 이 2번째 방법이 안좋은 이유중 가장 큰 이유는 페이지 이동없이 페이징을 해서 문제가 된다.
이게 왜 문제가 될까하고 의문점이 들텐데 일례를 들자면...
대개 보면 사람들이 웹브라우저의 뒤로버튼을 잘 사용한다. 그래서 1페이지 보다가 2페이지로 넘어간후 다시 1페이지 보려면
뒤로 버튼 누르는 유저들이 있다. 이런 경우 1번 방법은 파라미터로 처리를 해서 페이지가 이동해서 페이징 되는것이므로
아무런 문제가 없는데 이 2번째 방법은 페이지 이동없이 페이징을 해서 뒤로버튼 하면 현재 페이지보기전의 전페이지가 보여진다.
음...좀 이해가 안가게 설명한듯 한데...첨부 파일 다운받아서 소스 실행시켜보면 안다. -_-
소스는 아래와 같다. 다른것 다 똑같고 goPage 함수 부분만 틀리다. 그 부분만 살펴보면 된다. -_-
tdc_list2.asp
<![CDATA[
<OBJECT id=oList CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<PARAM NAME="UseHeader" VALUE="true">
<PARAM NAME="DataURL" VALUE="tdc_list_svr.asp">
<PARAM NAME="TextQualifier" VALUE="|">
<param NAME="FieldDelim" VALUE="¶">
<PARAM NAME="RowDelim" VALUE="^">
<PARAM NAME="CharSet" VALUE="euc-kr">
</OBJECT>
<script language="javascript">
function goPage(c_page,param) {
var szParam;
szParam = "";
szParam = szParam + "?curPage="+c_page;
oList.DataURL = "tdc_list_svr.asp" + szParam;
oList.ReSet();
}
</script>
<table border="1" DataSrc="#oList">
<thead>
<tr>
<td>CustomerID</td>
<td>CompanyName</td>
<td>ContactName</td>
</tr>
</head>
<tbody>
<tr>
<td><span datafld="CustomerID" DATAFORMATAS="HTML"></span></td>
<td><span datafld="CompanyName" DATAFORMATAS="HTML"></span></td>
<td><span datafld="ContactName" DATAFORMATAS="HTML"></span></td>
</tr>
</tbody>
</table>
<span datasrc="#oList" datafld="page" dataformatas="HTML"></span>
]]>
3. 자바스크립트(JavaScript)를 이용한 페이징
마지막으로 가장 안좋은 방법이다. 요 방법은 RDS(Remote Data Services)를 이용한것으로 서버에서 모든데이타를 클라이언트로 가져온후에
그 데이타들을 클라이언트에서 지지고볶고해서 페이징을 하는 방법이다. RDS가 서버에 부하를 줄인다는 점에서
각광받고 있는 기술이긴 한데 문제는 게시판에 적용시키기엔 좀 무리가 있다는거다. 게시물이 많을 경우
서버와 클라이언트 둘다 존내 괴로운거다. -_-
아무튼 이 방식을 이용해서 페이징 한것인데 서버단페이지는 단순하다. 그냥 단순히 모든 데이타들만 가져온다.
tdc_list3.asp
<![CDATA[
<%
' 변수 선언및 초기화
Dim DBCon
Dim strConn
Dim strQry
Dim szHead
Dim szBody
szHead = ""
szBody = ""
strConn = ""
' DB 연결 문자 변수
strConn = strConn&"Provider=SQLOLEDB.1;Persist Security Info=True;"
strConn = strConn&"Data Source=localhost;" ' Server Name
strConn = strConn&"User ID=sa;" ' User ID
strConn = strConn&"Password=;" ' User Password
strConn = strConn&"Initial Catalog=NorthWind;" ' DataBase
' DB 객체 생성및 DB 오픈
Set DBCon = Server.CreateObject("ADODB.Connection")
DBCon.Open strConn
' 쿼리문 실행결과를 레코드셋으로 반환
strQry = "select CustomerID,CompanyName,ContactName from Customers "
Set rs = DBCon.Execute(strQry)
Do While not rs.eof
db_CustomerID = rs(0)
db_CompanyName = rs(1)
db_ContactName = rs(2)
' TDC 형식으로 데이타를 가공한다.
szBody = szBody&"|"& db_CustomerID &"|¶"
szBody = szBody&"|"& db_CompanyName &"|¶"
szBody = szBody&"|"& db_ContactName &"|^"
rs.MoveNext()
Loop
' TDC 형식으로 헤더를 만든다.
szHead = "CustomerID¶CompanyName¶ContactName^"
' 자원 해제
rs.Close : Set rs = nothing
DBCon.Close : Set DBCon = nothing
Response.Write szHead
Response.Write szBody
%>
]]>
이 다 가져온 페이지들을 이제 스크립트로 처리하는 부분이 아래 소스이다.
아래 소스를 보자
tdc_list3_svr.asp
<![CDATA[
<OBJECT id=oList CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<PARAM NAME="UseHeader" VALUE="true">
<PARAM NAME="DataURL" VALUE="tdc_list3_svr.asp">
<PARAM NAME="TextQualifier" VALUE="|">
<param NAME="FieldDelim" VALUE="¶">
<PARAM NAME="RowDelim" VALUE="^">
<PARAM NAME="CharSet" VALUE="euc-kr">
</OBJECT>
<script language="javascript">
/********************************************************************
* 페이징 태그를 만들어 주는 함수
* makePageingTag(테이블ID,페이지태그ID,전체글수,페이지사이즈,현재page)
********************************************************************/
function makePageingTag(o, p_id, t_count, page_s, curr_p) {
var f = "";
var tot_page = Math.ceil(t_count/page_s);
// 이전 페이지(Prev)
if (curr_p == "1") {
f = f+"<<Prev ";
} else {
f = f+"<a href=\"javascript:goPage("+o+","+p_id.id+","+curr_p+","+(curr_p-1)+","+t_count+","+page_s+")\"><font color=blue><<Prev</font></a> ";
}
// 페이지 넘버
for (var i=1;i<(tot_page+1);i++) {
if (i == curr_p)
f = f+""+(i)+" ";
else
f = f+"<a href=\"javascript:goPage("+o+","+p_id.id+","+curr_p+","+(i)+","+t_count+","+page_s+")\"><font color=blue>"+(i)+"</font></a> ";
}
// 다음 페이지(Next)
if (curr_p == tot_page) {
f = f+" Next>>";
} else {
f = f+" <a href=\"javascript:goPage("+o+","+p_id.id+","+curr_p+","+(curr_p+1)+","+t_count+","+page_s+")\"><font color=blue>Next>></font></a>";
}
p_id.innerHTML = f;
}
/********************************************************************
* 페이지 이동 함수
* goPage(테이블ID,페이지태그ID,현재Page,이동할Page,전체 글 개수,페이지사이즈)
********************************************************************/
function goPage(o, p_id, curr_p, move_p, t_count, page_s) {
if (curr_p < move_p) {
for (curr_p; curr_p < move_p; curr_p++) {
o.nextPage();
}
curr_p = move_p;
} else {
for (curr_p; curr_p > move_p; curr_p--) {
o.previousPage();
}
curr_p = move_p;
}
makePageingTag(o.id, p_id, t_count, page_s, curr_p);
}
</script>
<script for="oList" event="ondatasetcomplete">
var rs = this.recordset
if (!rs.eof) {
var tot_count = rs.recordcount; // 전체 페이지
var page_size = oTbl.dataPageSize;// 게시물 출력 갯수
makePageingTag('oTbl',page_id,tot_count, page_size, 1);
}
</script>
<table border="1" DataSrc="#oList" DataPageSize="10" id="oTbl">
<thead>
<tr>
<td>CustomerID</td>
<td>CompanyName</td>
<td>ContactName</td>
</tr>
</head>
<tbody>
<tr>
<td><span datafld="CustomerID" DATAFORMATAS="HTML"></span></td>
<td><span datafld="CompanyName" DATAFORMATAS="HTML"></span></td>
<td><span datafld="ContactName" DATAFORMATAS="HTML"></span></td>
</tr>
</tbody>
</table>
<span id="page_id"></span>
]]>
복잡한 스크립트 함수 makePageingTag, goPage가 2개 보인다. 역시나 함수에 대한 해석은 없다.
그냥 야리는 거다. 이 부분외에 다른 부분으론 스크립트의 event를 이용한 부분이다. 이 이벤트를 이용해서
스크립트 가져오는 시점으로 데이타 지지고볶고 한다. 그리고선 맨 아래의 부분에
페이징 구문을 뿌려준다. 그래서 사용법도 간단하다. 그냥 2개 스크립트 함수 가지고 간후에 테이블 태그에
몇가지 속성 정의후 페이징 구문이 들어갈 곳에 코드만 넣어주면 된다.
이로서 페이징에 대한 아주 간결하고 쉽고 잼있는 강좌(???????)를 보았다. (솔직히 내가 다시보니 이해가 안되는 글이다 -_-)
그리고 참고로 소스코드가 짤려서 보일겁니다. 홈피크기에 맞추다보니 소스뒷부분이 짤려서 보이네요...제대로된 소스 보려면 첨부파일 다운받아서 보시면 됩니다.