JSP pagination display Instance code _jsp programming

1, the MySQL limit keyword (DAO)

SELECT * FROM tablename limit startpoint, numberperpage;

TableName is the name of the table to be paged;

StartPoint is the starting position-1;

Numberperpage is the number of bars displayed on a page.

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

The 21~25 comment is extracted from the comment table:

2, JQuery Load function (page js)

MySQL's limit keyword extracts a range of n,n+m records, which means that you need two parameters to determine what the page will display, that is, "page X" and the number of pages displayed.

The number of displays per page can be set in the program or set by the user. However, the "page X" parameter must be given by the user. When the user clicks the page, the next page/Previous button, or jumps to a certain point, the "x page" parameter needs to be passed on to the server for record extraction.

Copy Code code as follows:

function GoToPage (page) {

$ (' body '). Load ("getcomments.do?page=" + page);

}

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

Copy Code code as follows:

function GoToPage (page, numberperpage) {

$ (' body '). Load ("getcomments.do?page=" + page + "&npp=" + numberperpage);

}

3. servlet receives parameters and organizes content (servlet file)

The servlet learns from the page and NPP parameters in the request object from the JSP page that the user wants to browse to page x and how many records a page displays.

Copy Code code as follows:

int page = Integer.parseint (req.getparameter ("page"));

4, the servlet calculates the list of pages displayed

Usually show about 10 pages at a time, that is, if now on page 52nd, then the optional page list is 50, 51, 52 ... Until 60.

The method of calculation is that, assuming that it is now on X page, the starting value is x/10*10, if x>10. Written in code is:

Copy Code code as follows:

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

There are two special cases:

① a total of less than 10 pages

② pages are not integral multiples of 10

This will appear in the page list is less than 10 of the situation, but also very easy to handle, plus if conditions to judge a bit better. The approximate code is as follows:

Copy Code code 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 list of pages in the JSP page

Through 4 we get a computed list of page numbers Pagearr, which explains what pages we should show to the current page so that users can click directly. In the servlet, put the Pagearr list into the response object, putting the page (current page) and totalpage (the maximum number of pages) to help us make some judgments.

Copy Code code as follows:

<!--prev Button-->
<div id= "Pagecontrol" >
<c:choose>
<c:when test= "${page!= 1}" >
<a href= "Checkcomments.do?page=${page-1}" ><input type= "button" Name= "LastPage" value= "Previous page"/></a>
</c:when>
<c:otherwise>
<input type= "button" disabled= "true" Name= "LastPage" value= "prev"/><!--to get that gray button-->
</c:otherwise>
</c:choose>

<!--page List-->
<c:foreach items= "${pagelist}" var= "Item" >
<c:choose>
<c:when test= "${item = = page}" >
<a href= "Checkcomments.do?page=${item}" class= "CurrentPage" >${item}</a>
</c:when>
<c:otherwise>
<a href= "Checkcomments.do?page=${item}" >${item}</a>
</c:otherwise>
</c:choose>
</c:forEach>

<!--next Page button-->
<c:choose>
<c:when test= "${page!= totalpages}" >
<a href= "Checkcomments.do?page=${page+1}" >
<input type= "button" Name= "NextPage" value= "next page"/>
</a>
</c:when>
<c:otherwise>
<input type= "button" Disabled=true name= "NextPage" value= "Next"/><!--to get that gray button-->
</c:otherwise>
</c:choose>

<!--direct Jump-->
Total ${totalpages} page-to <input type= "text" id= "jumpto"/> page <input type= "button" value= "Jump" onclick= "Jumpto (${ TotalPages}) "/>
</div>

The JS function to use

Copy Code code as follows:

function Jumpto (maxpage) {
var page = $ ("#jumpTo"). Val ();
if (Page > Maxpage | | Page < 1) {
Alert ("Sorry, can't get to this page")
}else{
$ (' body '). Load (' checkcomments.do?page= ' + page);
}
}

6, CSS enhancement effect

In order to highlight the number of pages we are in, we have made a deliberate judgment in the above code:

Copy Code code as follows:

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

In this way, the current number of pages will be marked as the CurrentPage class, so you can highlight it in the CSS file. Like what:

Copy Code code as follows:

. currentpage{
Font-weight:bold;
Color: #ff9a00;
}

or set the width of the following jump page input box

Copy Code code as follows:

#jumpTo {
width:20px;
}

The page for the current page is then marked in bold, Orange:

7, improve

Using a label method to do the link is more convenient, but there will be an underscore appears, it is not brim. You can use CSS to eliminate it, or hover time to add some changes or something.

Copy Code code as follows:

#pageControl a {
Text-decoration:none;
}