▶ 뭉충닷컴
 
mungchung.com login
Site Search
My Space
주절주절...
공부방
쥔장소개
Board
자유게시판
유용한 정보
자료실
Programming
강좌 & Articles
Spring 3.0
프로그래밍 Tip
   -ASP
   -PHP
   -JavaScript
   -HTML
   -Java/JSP
   -Database
   -Crystal Report
   -Visual Basic
   -이클립스
   -리눅스
   -기타
Windows API (VB)
Spread Sheet 7.0
컴퓨터활용 Tip
Other things
StarCraft 전략
StarCraft 문서
김용(金庸)
Son Q & Dieda

게시판에 TDC를 적용했을때 페이징 하는 방법에 관한 문의가 가끔씩 들어와서 정리해서 글로 남긴다. 이것 저것 경험상 해보니 대충 3가지 방법으로 정리가 되서 3가지 방법 모두 소개하고자 한다. 뭐..아무래도 내 머리가 한계가 있어서 아래 3가지 방법보다 좋은 방법이 분명히 있으니 더 좋은 방법을 알아낸다면 꼭 게시판에 글 남겨주면 한다. (내가 고민고민해서 작성한 함수같은것 만들어서 Tip란에 올려두면 가끔 지나가시는 어떤 분이 툭 던져놓은 몇줄의 코드가 내가 생각한 코드보다 훨 좋은 방법인 경우가 있다. OTL)

3가지 방법은 다음과 같다.

1번 방법과 2번 방법은 유사한 점이 있는 방식이고 3번은 조금 처리하는 방식이 다르다. 어느것이 좋은지는 각자 취향에 따라서 결정해야겠지만 개인적으로는 1번 방법을 추천한다. 왜냐하면 그 방법이 가장 일반적인 페이징 방법이기 때문이다. 그 외에 게시물 수가 적고 코딩하기 귀찮다면 3번방법을 이용하면 된다. 3번방법은 그냥 만들어둔 함수에 맞게 몇가지 코드만 적어주면 되기 때문이다. 뭐 아무튼 아래에서 각각의 페이징 방법에 대해 자세하게 알아보자.

1. 페이지번호를 파라메타로 넘겨서하는 페이징

가장 일반적인 페이징 방법은 파라메타로 페이지 번호를 넘겨서 그 페이지 번호로 쿼리문 조작해서 필요한 부분의 레코드들만 가져오는 방식이다. 먼저 소스를 보자

tdc_list.asp <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 <% ' 변수 선언및 초기화 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)&param&chr(34)&")'>[처음]</a>" nLast = "<a href='javascript:goPage("&tp&","&chr(34)&param&chr(34)&")'>[마지막]</a>" if nPREV > 0 then szPage = "<a href='javascript:goPage("&nPREV&","&chr(34)&param&chr(34)&")'>[이전10개]</a>&nbsp;&nbsp;" else szPage = "[이전10개]&nbsp;&nbsp;" end if i = 1 Do While i < 11 and nCUR <= tp if CInt(cp) = CInt(nCUR) then szPage = szPage & "<b>"&nCUR&"</b>&nbsp;&nbsp;" else szPage = szPage & "<a href='javascript:goPage("&nCUR&","&chr(34)&param&chr(34)&")'>"&nCUR&"</a>&nbsp;&nbsp;" end if nCUR = nCUR + 1 i = i + 1 Loop if nNEXT <= tp then szPage = szPage & "&nbsp;&nbsp;<a href='javascript:goPage("&nNEXT&","&chr(34)&param&chr(34)&")'>[다음10개]</a>" else szPage = szPage & "&nbsp;&nbsp;[다음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 <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 <% ' 변수 선언및 초기화 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 <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+"&lt;&lt;Prev&nbsp;&nbsp;"; } else { f = f+"<a href=\"javascript:goPage("+o+","+p_id.id+","+curr_p+","+(curr_p-1)+","+t_count+","+page_s+")\"><font color=blue>&lt;&lt;Prev</font></a>&nbsp;&nbsp;"; } // 페이지 넘버 for (var i=1;i<(tot_page+1);i++) { if (i == curr_p) f = f+""+(i)+"&nbsp;&nbsp;"; else f = f+"<a href=\"javascript:goPage("+o+","+p_id.id+","+curr_p+","+(i)+","+t_count+","+page_s+")\"><font color=blue>"+(i)+"</font></a>&nbsp;&nbsp;"; } // 다음 페이지(Next) if (curr_p == tot_page) { f = f+"&nbsp;Next&gt;&gt;"; } else { f = f+"&nbsp;<a href=\"javascript:goPage("+o+","+p_id.id+","+curr_p+","+(curr_p+1)+","+t_count+","+page_s+")\"><font color=blue>Next&gt;&gt;</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개 스크립트 함수 가지고 간후에 테이블 태그에 몇가지 속성 정의후 페이징 구문이 들어갈 곳에 코드만 넣어주면 된다.

이로서 페이징에 대한 아주 간결하고 쉽고 잼있는 강좌(???????)를 보았다. (솔직히 내가 다시보니 이해가 안되는 글이다 -_-)


댓글 '1'

뭉충닷컴

2005.11.23 23:28:16
*.140.64.24

적고보니 강좌라기보단 그냥 소스 보여준것밖에 되지 않네 -_-...
그리고 참고로 소스코드가 짤려서 보일겁니다. 홈피크기에 맞추다보니 소스뒷부분이 짤려서 보이네요...제대로된 소스 보려면 첨부파일 다운받아서 보시면 됩니다.
문서 첨부 제한 : 0Byte/ 2.00MB
파일 크기 제한 : 2.00MB (허용 확장자 : *.*)
List of Articles
번호 제목 글쓴이 날짜 조회 수
27 keyfile을 이용한 ssh 접속 방법 뭉충닷컴 2010-10-28 13719
26 멀티 브라우저 지원하는 frame, iframe 접근 코딩 방법 [3] 뭉충닷컴 2010-07-21 26490
25 crontab을 이용한 Tomcat 서버 자동 재시작 shell 뭉충닷컴 2009-08-28 25132
24 자바스크립트로 각 form의 element(요소)에 접근 방법 file [2] 뭉충닷컴 2008-09-11 57637
23 ERwin 에서 Logical의 컬럼명을 코멘트(Comment)로 변경하기 file [2] 뭉충닷컴 2008-01-16 31863
22 Tabular Data Control 마지막 강좌! 뭉충닷컴 2007-06-14 15707
21 ASP로 웹 어플리케이션 주소 사용하기 file 뭉충닷컴 2006-12-10 17938
20 VB로 WebBrowser 컨트롤의 HTML 제어 file 뭉충닷컴 2006-12-01 21424
19 ASP 페이징 쉽게 처리하기 file [4] 뭉충닷컴 2006-08-29 24367
18 두개의 비슷한 DB를 비교해서 변경된 부분 찾아내기 file 뭉충닷컴 2006-05-03 15008
17 ASP에서 Class 를 이용해보자 file 뭉충닷컴 2006-02-26 24876
16 Hotmail의 DHTML EDITOR 편집기를 이용해보자. file [34] 뭉충닷컴 2006-02-04 30253
15 Tabular Data Control 응용 - 제목 Sort (정렬) 쉽게 하기 [3] 뭉충닷컴 2006-01-27 14144
14 스크립트(Script) 코드를 암호화 시켜보자(Encode/Decode) [2] 뭉충닷컴 2005-06-10 19116
13 dll을 이용한 로그인 file [1] 뭉충닷컴 2005-11-25 22036
» Tabular Data Control 응용 - 페이징 처리하는 3가지 방법 file [1] 뭉충닷컴 2005-11-23 16283
11 Query를 잼있고, 유용하게 사용해보자 file [3] 뭉충닷컴 2005-10-01 14729
10 Tabular Data Control 응용 - 테이블의 행 배경색이 격으로 변하게하기 뭉충닷컴 2005-09-25 15803
9 폼(Form) 검증해주는 스크립트(Script) file [15] 뭉충닷컴 2005-06-07 19333
8 asp 로 서버에 zip 압축/압축해제(풀기) 예제 file [8] 뭉충닷컴 2005-08-12 19805
7 MS-SQL의 osql.exe 이용 하기 (도스상에서 sql 구문 이용) 뭉충닷컴 2005-09-25 19322
6 SQL Script 로 ERD와 테이블 생성 손쉽게하기 뭉충닷컴 2005-09-25 21790
5 Tabular Data Control 기초 다지기 4 - 마지막! file 뭉충닷컴 2005-09-25 14712
4 Tabular Data Control 기초 다지기 3 file 뭉충닷컴 2005-09-25 14480
3 Tabular Data Control 기초 다지기 2 file 뭉충닷컴 2005-09-25 14187
2 Tabular Data Control 기초 다지기 1 file [1] 뭉충닷컴 2005-09-25 15260
1 OWC를 이용한 웹에서 엑셀 그래프 그리기 file [4] 뭉충닷컴 2007-12-19 19087