Simple implementation of JSP paging display effect

This article mainly introduces in detail the simple implementation of JSP paging display effect. It has certain reference and learning value for JSP. Friends who are interested in JSP can refer to this article.

This article The example shares the specific code for the JSP paging display effect for your reference. The specific content is as follows

1. Mysql's limit keyword (DAO)

select * from tablename limit startPoint, numberPerPage;

tablename It is the name of the table to be displayed in pages;

startPoint is the starting position -1;

numberPerPage is the number of items displayed on one page.

For example: select * from comment limit 20,5;

extracts comments 21~25 from the comment table:

2. jQuery load function (page JS)

The limit keyword of MySQL can complete the extraction of records in a certain range (n, n+m], which means that two parameters are needed to Determine the content displayed on a certain page, that is, "page x" and the number displayed on each page.

The number displayed on each page can be set in the program or by the user. The parameter "page x" must be given by the user. When the user clicks the page number, next page/previous page button or jumps to a certain page, the parameter "page x" needs to be sent to the server so that Extract records.

function goToPage(page){

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

}

Or, if both parameters are specified by the user, the function can be written as:

function goToPage(page, numberPerPage){

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

}

3, servletReceive the parameters and organize them. Content (servlet file)

The servlet learns that the user wants to browse page X and how many records are displayed on one page by accepting the page and npp parameters in the request object from the jsp page.

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

4. The servlet calculates the displayed page list

Generally, about 10 pages are displayed at a time, that is, if you are on page 52 now, then the optional page list is 50 , 51, 52... Until 60.

The calculation method is, assuming that it is on page x, the starting value is x/10*10, the premise is that x>10. #

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

There are two special cases:

① The total number of pages is less than 10

② The number of pages is not an integral multiple of 10

The number of pages will appear If the list is less than 10, it is easy to handle. Just add if

conditional judgment

. The approximate code is as follows:

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. Display the page number list on the jsp page.

Through 4 we get a calculated page list pageArr, which shows which pages we should display for the current page so that users can directly click on it in the servlet. Put it into the response object, along with page (current page number) and totalPage (maximum page number) to help us make some judgments

##

<!-- 上一页 按钮 -->
<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>

The js function used.

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

6. CSS enhancement effect

In order to highlight the page number we are currently on, we specially made a judgment in the above code:

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

In this way, the current page number will be marked as the currentPage class, so that it can be emphasized in the CSS file. For example:

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

Or set the width of the following jump page input box

#jumpTo{
width:20px;
}

In this way, the current page will be marked in bold and orange:

7. Improvement

Although it is more convenient to use the a tag method to make links, underlines will appear, which feels very unstylish. You can use css to eliminate it, or add some changes when hovering.

#pageControl a {
  text-decoration:none;
}

The above is the entire content of this article, I hope it will be helpful to everyone’s study! !

Related recommendations:

JSP Basics Introduction

JsPlumb Flow Chart Experience Summary

jsp implements the paging function of upper and lower pages

The above is the detailed content of Simple implementation of JSP paging display effect. For more information, please follow other related articles on the PHP Chinese website!