JSP 페이지 디 스 플레이 효과 간단하게 구현

본 논문 의 사례 는 JSP 페이지 표시 효과 의 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
1.mysql 의 limit 키워드(DAO)

select * from tablename limit startPoint, numberPerPage;

tablename 은 페이지 별로 표시 할 표 의 이름 입 니 다.
startPoint 는 시작 위치-1;
numberPerPage 는 한 페이지 에 표 시 된 항목 수 입 니 다.
예 를 들 어:select*from comment limit 20,5;
코 멘 트 표 에서 21~25 번 댓 글 을 뽑 았 습 니 다.

2.jQuery load 함수(페이지 JS)
MySQL 의 limit 키 워드 는 일정한 범위(n,n+m)의 기록 을 추출 할 수 있 습 니 다.즉,두 개의 매개 변수 가 특정한 페이지 에 표 시 된 내용,즉'x 페이지'와 각 페이지 에 표 시 된 개 수 를 결정 해 야 합 니 다.
각 페이지 에 표 시 된 개 수 는 프로그램 에서 설정 할 수도 있 고 사용자 가 설정 할 수도 있다.그러나'x 페이지'라 는 매개 변 수 는 사용자 가 제시 한 것 이 분명 합 니 다.사용자 가 페이지 수,다음 페이지/이전 페이지 단 추 를 누 르 거나 한 페이지 로 넘 어 갈 때 이'x 페이지'인 자 를 서버 에 전송 하여 기록 적 인 추출 을 할 수 있 도록 해 야 합 니 다.

function goToPage(page){

　　$('body').load("getComments.do?page=" + page);

}

또는 두 개의 매개 변 수 를 사용자 가 지정 하면 함 수 는 다음 과 같이 쓸 수 있 습 니 다.

function goToPage(page, numberPerPage){

　　$('body').load("getComments.do?page=" + page + "&npp=" + numberPerPage);

}

3.servlet 수신 매개 변수 및 구성 내용(servlet 파일)
servlet 는 jsp 페이지 에서 보 내 온 request 대상 의 page 와 npp 인 자 를 받 아들 여 사용자 가 X 페이지 를 탐색 하고 한 페이지 에 몇 개의 기록 을 표시 하 기 를 원 하 는 지 알 수 있 습 니 다.

int page = Integer.parseInt(req.getParameter("page"));

4.servlet 계산 에 표 시 된 페이지 목록
보통 한 번 에 10 페이지 정도 표시 되 는데,즉 지금 52 페이지 에 있다 면 선택 할 수 있 는 페이지 목록 은 50,51,52 입 니 다.60 까지...
계산 방법 은 현재 x 페이지 에 있다 고 가정 하면 시작 값 은 x/10*10 이 고 전 제 는 x>10 이다.코드 로 쓰 면:

int start = 1;
if(page >= 10){
　　start = page/10 * 10;
 }

두 가지 특수 한 상황 이 있다.
① 총 페이지 수가 10 개 미 만
② 페이지 수 는 10 의 전체 배수 가 아니다.
이렇게 하면 페이지 목록 이 10 보다 작은 경우 도 발생 하고 처리 하기 쉬 우 며,if 조건 을 더 해 판단 하면 된다.대략적인 코드 는 다음 과 같다.

int total = sm.getCommentCount();
int totalPage = total/itemsPerPage;
if(total % itemsPerPage != 0){
 totalPage += 1;
}
Vector<Integer> pageArr = new Vector<Integer>();
int start = 1;
if(page >= 10){
  start = page/10 * 10;
 }
int num = start;
while(!(num > totalPage || num > start + 10)){
  pageArr.add(new Integer(num));
 ++num;
}

5.jsp 페이지 에 페이지 목록 표시
4 를 통 해 계 산 된 페이지 목록 pageArr 를 얻 었 습 니 다.이 목록 은 현재 페이지 에 대해 사용자 가 직접 클릭 할 수 있 도록 어떤 페이지 를 보 여 줘 야 하 는 지 설명 합 니 다.servlet 에서 방금 전 pageArr 목록 을 response 대상 에 넣 고 page(현재 페이지 수)와 totalPage(최대 페이지 수)를 넣 어 판단 할 수 있 도록 합 니 다.

<!--        -->
<div id="pageControl">
<c:choose>
<c:when test="${page != 1}">
<a href="checkComments.do?page=${page-1}" rel="external nofollow" ><input type="button" name="lastPage" value="   " /></a>
</c:when>
<c:otherwise>
<input type="button" disabled="true" name="lastPage" value="   " /><!--         button -->
</c:otherwise>
</c:choose>

<!--      -->
<c:forEach items="${pageList}" var="item">
<c:choose>
<c:when test="${item == page}">
<a href="checkComments.do?page=${item}" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="currentPage">${item}</a>
</c:when>
<c:otherwise>
<a href="checkComments.do?page=${item}" rel="external nofollow" rel="external nofollow" rel="external nofollow" >${item}</a>
</c:otherwise>
</c:choose>
</c:forEach>

<!--        -->
<c:choose>
<c:when test="${page != totalPages}">
<a href="checkComments.do?page=${page+1}" rel="external nofollow" >
<input type="button" name="nextPage" value="   " />
</a>
</c:when>
<c:otherwise>
<input type="button" disabled=true name="nextPage" value="   " /><!--         button -->
</c:otherwise>
</c:choose>

<!--      -->
 ${totalPages}  - <input type="text" id="jumpTo" />  <input type="button" value="  " onclick="jumpTo(${totalPages})" />
</div>

사용 한 js 함수

function jumpTo(maxPage){
 var page = $("#jumpTo").val();
 if(page > maxPage || page < 1){
  alert("   ，      ")
 }else{
  $('body').load('checkComments.do?page=' + page);
 }
}

6.CSS 증강 효과
현재 우리 가 있 는 페이지 수 를 돋 보이 게 하기 위해 위의 코드 에서 우 리 는 특별히 판단 을 했다.

<c:when test="${item == page}">
<a href="checkComments.do?page=${item}" class="currentPage">${item}</a>
</c:when>

이렇게 하면 현재 페이지 수 는 currentPage 류 로 표 시 됩 니 다.그러면 CSS 파일 에서 강조 할 수 있 습 니 다.예 를 들 면:

.currentPage{
 font-weight:bold;
 color:#ff9a00;
}

또는 다음 페이지 입력 상자 의 폭 을 설정 합 니 다.

#jumpTo{
width:20px;
}

이렇게 하면 현재 페이지 의 페이지 는 굵 은 몸,주황색 으로 표 시 됩 니 다.

7.개선
a 라벨 의 방법 으로 링크 를 만 드 는 것 은 비교적 편리 하지만 밑줄 이 있어 서 어색 하 다.css 로 제거 하거나 hover 때 변화 같은 것 을 추가 할 수 있 습 니 다.

#pageControl a {
 text-decoration:none;
}

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.