JSP pagination shows how to implement

Source: Internet
Author: User
Tags foreach integer prev

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.

function GoToPage (page) {

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

}

Or, two 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. 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.

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:

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:

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.

<!--prev button-->

<div id= "Pagecontrol" >

<c:choose>

<c:when test= "${page!= 1}" >

<a href= "Checkcomments.do?page=${page-1}" ><in put type= "button" Name= "LastPage" value= "Previous page"/></a>

</c:when>

<c:otherwise>

<in put 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}" >

<in put type= "button" Name= "NextPage" value= "next page"/>

</a>

</c:when>

<c:otherwise>

<in put type= "button" Disabled=true name= "NextPage" value= "Next"/><!--to get that gray button-->

</c:otherwise>

</c:choose>

<!--Direct Jump-->

Total ${totalpages} page-to <in put type= "text" id= "jumpto"/> page <in Add type= "button" value= "Jump" on Click= "Jumpto (${totalp Ages}) "/>

</div>

The JS function to use

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:

<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:

. currentpage{

Font-weight:bold;

Color: #ff9a00;

}

or set the width of the following jump page input box

#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.

#pageControl a {

Text-decoration:none;

}

  

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.