집 > 기사 > Java > JSP 페이징 표시 효과의 간단한 구현

JSP 페이징 표시 효과의 간단한 구현

韦小宝원래의: 2018-01-18 09:46:112965검색

이 글은 주로 JSP 페이징 표시 효과의 간단한 구현을 자세히 소개합니다. JSP에 대한 특정 참조 및 학습 가치가 있습니다. JSP에 관심이 있는 친구는 이 글을 참조할 수 있습니다.

이 글의 예제는 모든 사람과 JSP를 공유합니다. 페이징 표시 효과에 대한 구체적인 코드는 다음과 같습니다.

1. MySQL의 제한 키워드(DAO)

select * from tablename limit startPoint, numberPerPage;

tablename은 페이징에 표시할 테이블의 이름입니다. 시작점 위치 -1

numberPerPage는 페이지에 표시되는 항목 수입니다.

예: 댓글 제한 20,5에서 *를 선택합니다.

댓글 테이블에서 댓글 21~25를 추출합니다.

2. jQuery 로드 기능(JS 페이지)

MySQL 제한 키 Word에서 완료할 수 있습니다. 특정 범위(n, n+m] 내의 레코드를 추출합니다. 즉, 특정 페이지에 표시되는 내용을 결정하려면 두 개의 매개변수, 즉 "페이지 x"와 각 페이지에 표시되는 번호가 필요하다는 의미입니다.

페이지당 표시되는 번호는 프로그램에서 설정하거나 사용자가 설정할 수 있습니다. 단, 페이지 번호, 다음 페이지/이전 페이지 버튼을 클릭하거나 페이지로 이동하는 경우에는 "페이지 x" 매개변수를 사용자가 지정해야 합니다. 특정 페이지에서는 이 "페이지를 전송해야 합니다. 서블릿은

매개변수를 수신하고 내용(서블릿 파일)을 정리합니다.

서블릿은 사용자가 페이지 X를 탐색하기를 원하며 해당 페이지를 수락하여 한 페이지에 몇 개의 레코드가 표시되는지 학습합니다.

4. 서블릿은 표시되는 페이지 수를 계산합니다.

일반적으로 한 번에 약 10페이지를 표시합니다. 즉, 52페이지에 있는 경우 사용 가능한 페이지 번호입니다. 목록은 50, 51, 52입니다. 계산 방법은 x 페이지에 있다고 가정하고 x>10인 경우 시작 값은 x/10*10입니다.

function goToPage(page){

　　$(&#39;body&#39;).load("getComments.do?page=" + page);

}

여기에 있습니다. 두 가지 특별한 경우가 있습니다:

① 총 페이지 수가 10 미만입니다. 각 ② 페이지 수가 10의 정수배가 아닙니다

이로 인해 페이지 목록이 10 미만이 되며, 처리하기 쉽습니다. 판단하려면 if

조건을 추가하면 됩니다.

대략적인 코드는 다음과 같습니다.

function goToPage(page, numberPerPage){

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

}

5. jsp 페이지에 페이지 목록을 표시합니다.

4를 통해 계산된 페이지 목록 pageArr을 얻습니다. 사용자가 서블릿에서 직접 클릭할 수 있도록 현재 페이지에 대해 표시해야 하는 페이지를 보여줍니다. pageArr 목록은 페이지(현재 페이지 번호) 및 totalPage(최대 페이지 번호)와 함께 응답 개체에 저장됩니다. 몇 가지 판단

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

js 함수 사용

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

6. CSS 개선 효과

현재 페이지 번호를 강조 표시하기 위해 위 코드에서

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;
}

이런 방식으로 현재 페이지 번호가 currentPage 클래스로 표시되어 CSS 파일에 추가될 수 있습니다. 예:

<!-- 上一页 按钮 -->
<p 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})" />
</p>

또는 다음 점프 페이지 입력 상자

function jumpTo(maxPage){
  var page = $("#jumpTo").val();
  if(page > maxPage || page < 1){
    alert("对不起，无法到达该页")
  }else{
    $(&#39;body&#39;).load(&#39;checkComments.do?page=&#39; + page);
  }
}

의 너비를 설정하여 현재 페이지 번호가 페이지는 굵은 글씨와 주황색으로 표시됩니다:

7, Improvement

링크를 만드는 데 a 태그 방법을 사용하는 것이 더 편리하지만 밑줄이 나타나서 매우 촌스러운 느낌이 듭니다. CSS를 사용하여 이를 제거하거나 마우스를 가져갈 때 일부 변경 사항을 추가할 수 있습니다.

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

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다! !

JSP 페이징 표시 효과의 간단한 구현

관련 기사