마카로닉스

1412 No

ASP 페이징 및 검색 처리기법 을 Mssql Stored Procedure (저장 프로시저 ) 사용해서 개발

2017-12-25 09:05:30 By 라이트 1 2990 댓글수 5 포스트 하기

4월 2024
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

결과 화면이다. 이미지에서 보이는 것 처럼 날짜, 정렬 방법, 보여질 목록수, 검색어가 달린 페이징 처리 방법이다.

목록 출력은 MS-SQL 저장 프로시저를 이용하였고, 하단의 페이징은 ASP 로 만들었다.

또한, ASP 의 DBHelper 를 이용하여 DB 와 연결 작업으로 하였다.

1. 테이블을 생성 하자.

CREATE table tblEmployees
(
  ID int primary key identity,    -- 아이디 자동 생성
  FirstName nvarchar(50),         -- 성명   
  LastName nvarchar(50),	        -- 이름
  Gender nvarchar(20),  					-- 성별
  JobTitle nvarchar(20),   				-- 직업
  regDate dateTime not null DEFAULT GETDATE()   -- 등록일
)

2. 더미 데이터를 반복문으로 생성하자.

날짜 검색테스트를 하기 위하여 날짜에 1일 추가하여 dateadd(day, @num+1, getDate() ) 삽입하였다. 따라서 49번째 반복문을 돌때에는

50일이 추가된 데이터가 삽입 된다.

declare  @num int

set @num = 0

while @num < 50

begin

 Insert into tblEmployees  values('홍'+ Cast(@num As char(10))	, '길동', 'Male', 'Developer', dateadd(day, @num+1,getDate()) )
 Insert into tblEmployees  values('이'+  Cast(@num As char(10)), '민준', 'Female', 'Developer', dateadd(day, @num+1,getDate()) )
 Insert into tblEmployees  values('김'+  Cast(@num As char(10)), '서준', 'Male', 'Sr. Developer', dateadd(day, @num+1,getDate()) )
 Insert into tblEmployees  values('최'+  Cast(@num As char(10)), '주원', 'Male', 'Developer', dateadd(day, @num+1,getDate()) )
 Insert into tblEmployees  values('박'+  Cast(@num As char(10)), '예준', 'FMale', 'Developer', dateadd(day, @num+1,getDate()) )
 Insert into tblEmployees  values('정'+  Cast(@num As char(10)), '시우', 'Male', 'Developer', dateadd(day, @num+1,getDate()) )
 Insert into tblEmployees  values('한'+  Cast(@num As char(10)), '준서', 'Female', 'Developer', dateadd(day, @num+1,getDate()) )
 Insert into tblEmployees  values('명'+  Cast(@num As char(10)), '도윤', 'Male', 'Developer', dateadd(day, @num+1,getDate()) )
 Insert into tblEmployees  values('이'+  Cast(@num As char(10)), '현우', 'Male', 'Sr . Developer', dateadd(day, @num+1,getDate()) )
 Insert into tblEmployees  values('홍'+  Cast(@num As char(10)), '길동', 'Male', 'Developer', dateadd(day, @num+1,getDate()) )
 Insert into tblEmployees  values('이'+  Cast(@num As char(10)), '민준', 'Female', 'Developer', dateadd(day, @num+1,getDate()) )

 Insert into tblEmployees  values('김'+  Cast(@num As char(10)), '서연', 'Male', 'Sr. Developer', dateadd(day, @num+1,getDate()) )
 Insert into tblEmployees  values('최'+  Cast(@num As char(10)), '서윤', 'Male', 'Developer', dateadd(day, @num+1,getDate()) )
 Insert into tblEmployees  values('박'+  Cast(@num As char(10)), '민서', 'FMale', 'Developer', dateadd(day, @num+1,getDate()) )
 Insert into tblEmployees  values('정'+  Cast(@num As char(10)), '지우', 'Male', 'Developer', dateadd(day, @num+1,getDate()) )
Insert into tblEmployees  values('한'+  Cast(@num As char(10)), '채원', 'Female', 'Developer', dateadd(day, @num+1,getDate()) )
Insert into tblEmployees  values('명'+  Cast(@num As char(10)), '은서', 'Male', 'Developer', dateadd(day, @num+1,getDate()) )
Insert into tblEmployees  values('이'+  Cast(@num As char(10)), '민서', 'Male', 'Sr . Developer', dateadd(day, @num+1,getDate()) )
Insert into tblEmployees  values('홍'+  Cast(@num As char(10)), '다은', 'Male', 'Developer', dateadd(day, @num+1,getDate()) )
Insert into tblEmployees  values('이'+  Cast(@num As char(10)), '지아', 'Female', 'Developer', dateadd(day, @num+1,getDate()) )
Insert into tblEmployees  values('김'+  Cast(@num As char(10)), '지유', 'Male', 'Sr. Developer', dateadd(day, @num+1,getDate()) )
Insert into tblEmployees  values('최'+  Cast(@num As char(10)), '주원', 'Male', 'Developer', dateadd(day, @num+1,getDate()) )
Insert into tblEmployees  values('박'+  Cast(@num As char(10)), '수아', 'FMale', 'Developer', dateadd(day, @num+1,getDate()) )
Insert into tblEmployees  values('정'+  Cast(@num As char(10)), '서현', 'Male', 'Developer', dateadd(day, @num+1,getDate()) )
Insert into tblEmployees  values('한'+  Cast(@num As char(10)), '하린', 'Female', 'Developer', dateadd(day, @num+1,getDate()) )
Insert into tblEmployees  values('명'+  Cast(@num As char(10)), '도영', 'Male', 'Developer', dateadd(day, @num+1,getDate()) )
Insert into tblEmployees  values('이'+ Cast(@num As char(10)), '연아아', 'Male', 'Sr . Developer', dateadd(day, @num+1,getDate()) )



   set @num = @num + 1

end 



print '끝'


select * from tblEmployees;

3. 저장 프로시저 생성이다.

CREATE proc MacaroncisEmployees
 @DisplayLength int,
 @DisplayStart int,
 @SortCol int,
 @SortDir nvarchar(10),
 @Search  nvarchar(255) =null,
 @Date1 nvarchar(10)=null	,
 @Date2 nvarchar(10)=null
 as
 begin
		Declare @FirstRec int, @LastRec int
		Set @FirstRec =@DisplayStart;
		Set @LastRec = @DisplayStart + @DisplayLength;
		
		With CTE_Employees as
    (
			 Select ROW_NUMBER() over ( order by
						
					case when (@SortCol=0 and @SortDir='asc')
							 then Id
					end asc,
					case when (@SortCol=0 and @SortDir='desc')
							 then Id
					end desc,
					
                                        case when (@SortCol  = 1 and @SortDir ='asc') 
			                               then FirstName
					 end asc,
					case when(@SortCol =1 and @SortDir='desc')
								then FirstName
					end desc,
					
					case when (@SortCol =2 and @SortDir='asc')
								then LastName
					end asc,
					case when (@SortCol =2 and @SortDir='desc')
								then LastName
					end desc,


					case when (@SortCol =3 and @SortDir='asc')
								then Gender
					end asc,
					case when (@SortCol=3 and @SortDir='asc')
								then Gender
					end desc,
				
					case when (@SortCol=4 and @SortDir='asc')
								then JobTitle
					end asc,
					case when (@SortCol =4 and @SortDir='desc')
								then JobTitle
					end desc
	
				)
				as RowNum,
				COUNT(*) over() as TotalCount,
				Id,
				FirstName,
				LastName,
				Gender,
				JobTitle,
				regDate

				from tblEmployees
				where ( @Search IS NULL
							Or Id like '%' + @Search + '%'
							Or FirstName like '%' + @Search + '%'
							Or LastName like '%' + @Search + '%'
							Or Gender like '%' + @Search + '%'
							Or JobTitle like '%' + @Search + '%' 

						)
						and (
							@Date1 IS NULL
							OR
              convert(int, convert(char(8), regDate, 112)) between @Date1 and @Date2 
							)
						 
	
			)	
				Select * 
				from CTE_Employees
				where RowNum > @FirstRec and RowNum <= @LastRec

	
		
end

파라미터 값으로

@DisplayLength int,
@DisplayStart int,
@SortCol int,
@SortDir nvarchar(10),
@Search nvarchar(255) =null,
@Date1 nvarchar(10)=null ,
@Date2 nvarchar(10)=null

DisplayLength - '한페이제에 출력할 목록 수, DisplayStart - '첫번째 시작번호,

SortCol - 컬럼 값 에 따른 정렬 하기위한 컬럼으로 0 번이면 ID , 1번이면 FirstName, 2번이면 LastName 이름이다

SortDir 오름차순으로 할 것인가 내림차순으로 할것인가의 파라미터 값이다.

Search , 와 Date1, Date2 는 널값이 올수 있게 처리하였다.

날짜 데이터 형식을 데이터 형식이 아닌 문자로 nvarchar 로 하였다. 왜냐하면 날짜 형식으로 하면 파라미터값으로 넘겨온 문자열

데이터의 형변한이 어려워 문자열로 하였다.

Select * from CTE_Employees where RowNum > @FirstRec and RowNum <= @LastRec

에서 FirstRec 와 LastRec 의 값은 처음 쿼리 부분에 계산 하여 저장 하였다.

Declare

@FirstRec int,

@LastRec int Set

@FirstRec =@DisplayStart;

Set @LastRec = @DisplayStart + @DisplayLength;

검색어가 널이 아닐 경우 실행 되는 부분이다.

	where ( @Search IS NULL
							Or Id like '%' + @Search + '%'
							Or FirstName like '%' + @Search + '%'
							Or LastName like '%' + @Search + '%'
							Or Gender like '%' + @Search + '%'
							Or JobTitle like '%' + @Search + '%' 

						)

날짜 데이터도 널이 아닐 경우 실행 되는데

				and (
							@Date1 IS NULL
							OR
              convert(int, convert(char(8), regDate, 112)) between @Date1 and @Date2 
							)

select * from products

where convert(int, convert(char(8), registdate, 112)) between '20130301' and '20130304'

registdate 컬럼의 날짜를 convert 로 변경해서 앞에서 8자리(20171224) 로 변환을 시켜준뒤 between을 이용해서 검색하는 방식이다.

뷰화면에서 다음과 같이 datepicker 를 사용하였는데 , 날짜 데이터를 20171225 형식으로 넘겨주면 된다.

날짜 형식이 안 맞아서 오류나는 경우가 많다. 따라서, convert 처리와 뷰화면에서 datepicker 로 숫자 8자를 맞춰서

데이터를 넘겨 주도록 하였다.

COUNT(*) over() as TotalCount,

마지막으로 중요한 것이 MacaroncisEmployees 저장 프로시저를 실행하면 결과 값으로 데이터 목록과 함께

전체 목록 개수가 출력된다는 점이다.

출력할 전체 개수는 하단의 페이징 처리에 반드시 필요한 부분이다.

4. 전체적인 뷰화면이다.

index.asp

<%@Language="VBScript" CODEPAGE="65001" %>
<% Response.CharSet="utf-8"
   Session.codepage="65001"
   Response.codepage="65001"
   Response.ContentType="text/html;charset=utf-8"
%>

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 위 3개의 메타 태그는 *반드시* head 태그의 처음에 와야합니다; 어떤 다른 콘텐츠들은 반드시 이 태그들 *다음에* 와야 합니다 -->
    <title>Macaronics</title>

    <!-- 합쳐지고 최소화된 최신 CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <!-- 부가적인 테마 -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
    <!-- 합쳐지고 최소화된 최신 자바스크립트 -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

    <!-- IE8 에서 HTML5 요소와 미디어 쿼리를 위한 HTML5 shim 와 Respond.js -->
    <!-- WARNING: Respond.js 는 당신이 file:// 을 통해 페이지를 볼 때는 동작하지 않습니다. -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- jQuery (부트스트랩의 자바스크립트 플러그인을 위해 필요합니다) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

     <!-- jQuery UI CSS파일 -->
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" />
     <!-- jQuery 기본 js파일 -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <!-- jQuery UI 라이브러리 js파일 -->
    <script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
    <script src="./js/datepicker-ko.js"   charset="utf-8"></script>

<script>
$(function() {
  $( "#date1" ).datepicker({
      changeYear: true,
      showButtonPanel:true,
      dateFormat: 'yymmdd'

  });
  $("#date2").datepicker({
      changeYear:true,
      showButtonPanel:true,
      dateFormat: 'yymmdd'
  });


});

</script>
  </head>
  <body>

<!--#include File="DBHelper.asp"-->
<!-- 페이징 처리 함수  -->


<%
 Dim date1, date2, displayLength, displayStart, sortCol, sortDir, search , curPage, totalCount


 displayLength=request.QueryString("displayLength") '한페이제에 출력할 목록 수
 displayStart=request.QueryString("displayStart") '첫번째 시작번호
 sortCol=request.QueryString("sortCol") ' 컬럼 값  검색에 필요한 컬럼  디폴트 값 id'
 sortDir=request.QueryString("sortDir")  ' 정렬 방법
 search =request.QueryString("search")  ' 검색
 date1 =request.QueryString("date1")
 date2 =request.QueryString("date2")

 curPage = Request.QueryString("curPage") ' ' 페이지 번호'

 if IsEmpty(displayLength)  Then
  displayLength=10  '기본 10  개씩
 end if

 if IsEmpty(displayStart) Then
   displayStart=0  '  0변 부터 출력
 end if

 if IsEmpty(sortCol) Then
   sortCol=0   '기본 아이디
 end if

 if IsEmpty(sortDir) Then
    sortDir="desc"
 end if

 if IsEmpty(curPage) Then
   curPage=1
 end if

 response.write "날짜1 : "  & date1 &"<br />"
 response.write "날짜2 : "  & date2 &"<br />"
 response.write "displayLength : "  & displayLength &"<br />"
 response.write "displayStart : "  & displayStart &"<br />"
 response.write "sortCol : "  & sortCol &"<br />"
 response.write "sortDir 정렬 : "  & sortDir &"<br />"
 response.write "검색  : "  & search &"<br />"
 response.write "date1 : " &date1 & "<br/>"
 response.write "date2 : " &date2 & "<br/>"

   ' displayStart=0   ' 페이지 번호 displayLength + displayStart = page 번호
  displayStart=displayLength*(curPage-1)

  Set DBHelper =new clsDBHelper

  '매개변수 배열 준비
  Dim paramInfo(6)

  'spGetEmployees 2, 1, 2, 'asc', null   파라미터 값
  paramInfo(0) =DBHelper.MakeParam("@DisplayLength", adInteger, adParamInput, ,displayLength )
  paramInfo(1) =DBHelper.MakeParam("@DisplayStart", adInteger, adParamInput,  ,displayStart )
  paramInfo(2) =DBHelper.MakeParam("@SortCol", adInteger, adParamInput,  , sortCol)
  paramInfo(3) =DBHelper.MakeParam("@SortDir", adVarChar, adParamInput, 10,sortDir )
  paramInfo(4) =DBHelper.MakeParam("@Search", adVarChar, adParamInput, 255, search)
  paramInfo(5) =DBHelper.MakeParam("@Date1", adVarChar, adParamInput, 10, date1)
  paramInfo(6) =DBHelper.MakeParam("@Date2", adVarChar, adParamInput, 10, date2)
  Set RS  =DBHelper.ExecSPReturnRS("MacaroncisEmployees", paramInfo, Nothing)
%>

    <div  class="row">
      <div class="col-sm-12">
         <h2 class="text-center">회원 목록 출력</h2>

         <div class="col-sm-3">
         </div>

         <div class="col-sm-6">
             <p>&nbsp;</p>
           <div calss="text-center">
              <form method="get" action="/index.asp" >
                <input type="text" id="date1" name="date1" size="10%" value='<%= date1 %>' readonly> ~
                <input type="text" id="date2" name="date2" size="10%" value='<%= date2 %>' readonly >

                <select name="sortCol" id="sortCol" PSize="15%">
                  <option value="0"  <% if sortCol =0 Then response.write "selected" end if %> >아이디</option>
                  <option value="1" <% if sortCol =1 Then response.write "selected" end if %> >성</option>
                  <option value="2" <% if sortCol =2 Then response.write "selected" end if %> >이름</option>
                  <option value="3" <% if sortCol =3 Then response.write "selected" end if %> >성별</option>
                  <option value="4" <% if sortCol =4 Then response.write "selected" end if %> >직업</option>
                </select>
                 <select name="sortDir" PSize="15%" name="sortDir" >
                        <option value="desc" <% if sortDir ="desc" Then response.write "selected" end if %> >내림차순</option>
                        <option value="asc" <% if sortDir ="asc" Then response.write "selected" end if %> >오름차순</option>
                  </select>
                <input type="text" id="search"  name="search" size="10%"  value="<%= search %>" />

                <select name="displayLength">
                  <%
                     dim displayCount
                     for displayCount=10 to 200 step 10
                  %>
                    <option value="<%=displayCount%>" <% if displayCount=Cint(displayLength) Then response.write "selected"  end if %> ><%=displayCount%></option>
                  <%
                      next
                  %>

                </select>

                <input type="submit" value="조회"  />
              </form>
              <button type="button" onclick="javascript:location.href='/index.asp'" >초기화</button>
           </div>
            <p>&nbsp;</p>
             <table class="table table-hover">
                 <tr>
                   <th>번호</th>
                   <th>아이디</th>
                   <th>성</th>
                   <th>이름</th>
                   <th>성별</th>
                   <th>직업</th>
                   <th>등록일</th>
                 </tr>

                 <%
                    if RS.eof or RS.bof then  '실행결과가 없을 경우 (예외처리)'
                       response.write "<tr><td colspan='7' class='text-center'>실행 결과가 없습니다.</td></tr>"

                    else
                       do while RS.eof =false '레코드셋에 값이 있으면 계속 반복'
                       totalCount =RS(1)
%>

                 <tr>
                   <td><%= RS(0) %></td>
                   <td><%= RS(2) %></td>
                   <td><%= RS(3) %></td>
                   <td><%= RS(4) %></td>
                   <td><%= RS(5) %></td>
                   <td><%= RS(6) %></td>
                   <td><%= RS(7) %></td>
                 </tr>

<%
                          RS.moveNext
                       loop
                    end if


                    Response.write "검색 개수 : "  &  totalCount  & "<br/>"

                    RS.close
                    Set DBHelper =Nothing
                 %>
             </table>
             <!-- ' 페이지 이동 부분 뿌려준다. -->
<!--#include File="./lib/asp_page_function.asp" -->





     <%
        url="/index.asp?date1="&date1&"&date2="&date2&"&displayStart="&displayStart&"&sortCol="&sortCol&"&sortDir="&sortDir&"&search="&search
        pagination=calcPaging(curPage, totalCount,displayLength, url )
        Response.write pagination
'

     %>
         </div>

         <div class="col-sm-3">
         </div>
      </div>
    </div>

      <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
      <p>Macaronics</p>


  </body>
</html>

한글 처리 부분이다.

<%@Language="VBScript" CODEPAGE="65001" %>
<% Response.CharSet="utf-8"
   Session.codepage="65001"
   Response.codepage="65001"
   Response.ContentType="text/html;charset=utf-8"
%>

다음과 같이 부트 스트랩 CDN 적용과 datepicker 를 사용하였다.

asp_page_function.asp

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 위 3개의 메타 태그는 *반드시* head 태그의 처음에 와야합니다; 어떤 다른 콘텐츠들은 반드시 이 태그들 *다음에* 와야 합니다 -->
    <title>Macaronics</title>

    <!-- 합쳐지고 최소화된 최신 CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <!-- 부가적인 테마 -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
    <!-- 합쳐지고 최소화된 최신 자바스크립트 -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

    <!-- IE8 에서 HTML5 요소와 미디어 쿼리를 위한 HTML5 shim 와 Respond.js -->
    <!-- WARNING: Respond.js 는 당신이 file:// 을 통해 페이지를 볼 때는 동작하지 않습니다. -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- jQuery (부트스트랩의 자바스크립트 플러그인을 위해 필요합니다) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

     <!-- jQuery UI CSS파일 -->
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" />
     <!-- jQuery 기본 js파일 -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <!-- jQuery UI 라이브러리 js파일 -->
    <script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
    <script src="./js/datepicker-ko.js"   charset="utf-8"></script>

<script>
$(function() {
  $( "#date1" ).datepicker({
      changeYear: true,
      showButtonPanel:true,
      dateFormat: 'yymmdd'

  });
  $("#date2").datepicker({
      changeYear:true,
      showButtonPanel:true,
      dateFormat: 'yymmdd'
  });


});

</script>
  </head>

반한데 데이터 에서 전체 출력 개수를 totalCount 에 저장하였고.

                 <%
                    if RS.eof or RS.bof then  '실행결과가 없을 경우 (예외처리)'
                       response.write "<tr><td colspan='7' class='text-center'>실행 결과가 없습니다.</td></tr>"

                    else
                       do while RS.eof =false '레코드셋에 값이 있으면 계속 반복'
                       totalCount =RS(1)
%>

                 <tr>
                   <td><%= RS(0) %></td>
                   <td><%= RS(2) %></td>
                   <td><%= RS(3) %></td>
                   <td><%= RS(4) %></td>
                   <td><%= RS(5) %></td>
                   <td><%= RS(6) %></td>
                   <td><%= RS(7) %></td>
                 </tr>

<%
                          RS.moveNext
                       loop
                    end if

totalCount 값을 하단의 페이징 목록 처리를 위해

넘겨 주는 것에 유의 하자.

     <%
        url="/index.asp?date1="&date1&"&date2="&date2&"&displayStart="&displayStart&"&sortCol="&sortCol&"&sortDir="&sortDir&"&search="&search
        pagination=calcPaging(curPage, totalCount,displayLength, url )
        Response.write pagination
'

     %>

페이징 처리부분은 다음과 같이 하였고, 반환 된 데이터 값은 부트스트랩에 맞게 html 로 반환 되게 만들어 보았다.

<%

  ' page
  ' '하단 페이징  << 1 2 3 4 5 6 7 8 9 10 >>
  ' totalCount 전체 개수
  ' startPage // 시작 페이지
  ' endPage   // 끝페이지
  ' pagePrev  // 이전 여부
  ' pageNext  // 다음 여부


  public Function calcPaging(curPage,totalCount, displayLength, url)
    Dim  page, displayPageNum,perPageNum, pageNext, pagePrev
    'totalCount=100
    if curPage <=0 then
      page=1
    else
      page=curPage
    end if
    displayPageNum=10  ' 페이징
    perPageNum=displayLength' 페이지당 보여줄 리스트 목록

    ' 현재 페이지 번호 / 하단 페이지번호 수
    endPage = Cint(Ceil(page/Cdbl(displayPageNum))*displayPageNum)
    startPage=(endPage - displayPageNum) +1
    tempEndPage= Cint(Ceil(totalCount/Cdbl(perPageNum)))

     if endPage > tempEndPage Then
       endPage =tempEndPage
     end if

     if startPage=1 then
        pagePrev=false
     Else
        pagePrev=true
     end if


    if endPage* perPageNum >=totalCount then
       pageNext=false
    Else
       pageNext=true
    end if

    '''''''''''''''''''''''''''''''
    '''''''''''''''''''''''''''''''
    ''''''''''''''''''''html '''''''''''

    htmlString ="<ul class='pagination'>"

    url =url&"&displayLength="&displayLength&"&"

    if pagePrev  then
      htmlString = htmlString & "<li><a href='"&url&"curPage=1'>처음</a></li>"
    end if

    if  pagePrev then
       pageStart=startPage
       htmlString  =htmlString & "<li><a href='"&url&"curPage="&pageStart-1&"'>&laquo;</a></li>"
    end if


    Dim active, num
    active=""
    num=startPage
    For count=startPage To endPage Step 1
      if  Cint(page)=Cint(num) then
         active ="class=active"
      else
       active=""
      end if
        htmlString =htmlString & "<li " & active &  " > <a href='"&url&"curPage="&count&"'>" & count & "</a><li></li></li>"
      num=num+1
    Next



      if pageNext and  endPage  > 0   Then
        pageEnd=endPage
        htmlString =htmlString & "<li><a href='"&url&"curPage="&pageEnd+1&"'>&raquo;</a></li>"
      end if

      if pageNext and endPage  > 0  Then
       htmlString =htmlString  & "<li><a href='"&url&"curPage="&tempEndPage&"'>마지막</a></li>"
      end If

     htmlString =htmlString & "</ul>"

     calcPaging =htmlString
  End Function





  public Function Ceil(ByVal intParam)
    Ceil = -(Int(-(intParam)))

  End Function





%>

datepicker-ko.js 는 datepicker 의 한글 처리 소스이다.

/* Korean initialisation for the jQuery calendar extension. */
/* Written by DaeKwon Kang (ncrash.dk@gmail.com), Edited by Genie and Myeongjin Lee. */
( function( factory ) {
	if ( typeof define === "function" && define.amd ) {

		// AMD. Register as an anonymous module.
		define( [ "../widgets/datepicker" ], factory );
	} else {

		// Browser globals
		factory( jQuery.datepicker );
	}
}( function( datepicker ) {

datepicker.regional.ko = {
	closeText: "닫기",
	prevText: "이전달",
	nextText: "다음달",
	currentText: "오늘",
	monthNames: [ "1월","2월","3월","4월","5월","6월",
	"7월","8월","9월","10월","11월","12월" ],
	monthNamesShort: [ "1월","2월","3월","4월","5월","6월",
	"7월","8월","9월","10월","11월","12월" ],
	dayNames: [ "일요일","월요일","화요일","수요일","목요일","금요일","토요일" ],
	dayNamesShort: [ "일","월","화","수","목","금","토" ],
	dayNamesMin: [ "일","월","화","수","목","금","토" ],
	weekHeader: "주",
	dateFormat: "yy. m. d.",
	firstDay: 0,
	isRTL: false,
	showMonthAfterYear: true,
	yearSuffix: "년" };
datepicker.setDefaults( datepicker.regional.ko );

return datepicker.regional.ko;

} ) );

소스 : Macaronics 제작 JH - Choi