Sample Code displayed by JSP page

1. mysql limit keyword (DAO)

Select * from tablename limit startPoint, numberPerPage;

Tablename is the name of the table to be displayed by page;

StartPoint is the starting position-1;

NumberPerPage is the number of entries displayed on a page.

Example: select * from comment limit 20, 5;

Then 21 ~ is extracted from the comment table ~ Comment on the 25 th:

2. jQuery load function (page JS)

The MySQL limit keyword can be used to extract records of a certain range (n, n + m]. That is to say, two parameters are required to determine the content displayed on a page, that is, "page x" and the number of entries displayed on each page.

The number of entries displayed on each page can be set in the program or by the user. However, the "page x" parameter must be provided by the user. When a user clicks the page number, next page/Previous Page button, or jumps to a page, the "page x" parameter needs to be sent to the server for record extraction.

Copy codeThe Code is as follows: function goToPage (page ){

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

}

Alternatively, if both parameters are specified by the user, the function can be written:Copy codeThe Code is as follows: function goToPage (page, numberPerPage ){

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

}

3. servlet receives parameters and organizes the content (servlet File)

By accepting the page and npp parameters in the request object sent from the jsp page, the servlet learns the page X you want to browse and the number of records displayed on the page.

Copy codeThe Code is as follows: int page = Integer. parseInt (req. getParameter ("page "));

4. servlet computing page list

Generally, 10 pages are displayed at a time, that is, if the page number is 52nd, the available page lists are 50, 51, and 52... Until 60.

The calculation method is as follows: assume that the current page is on page x, the starting value is x/10*10, provided that x> 10. The written code is:

Copy codeThe Code is as follows: int start = 1;
If (page> = 10 ){
Start = page/10*10;
}

There are two special cases:

① A total of less than 10 pages

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

In this case, the page number list is smaller than 10, and it is easy to process. Just add the if condition to judge. The rough code is as follows:

Copy codeThe 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

4. We get a calculated page number list pageArr, which indicates which pages should be displayed for the current page for users to click directly. Add the pageArr list in the servlet to the response object and the page (current page number) and totalPage (maximum page number) to help us make some judgments.

Copy codeThe Code is as follows: <! -- Previous page 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 = "Previous Page"/> <! -- To get the 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 page"/> <! -- To get the gray button -->
</C: otherwise>
</C: choose>

<! -- Jump directly -->
$ {TotalPages} pages in total-to the <input type = "text" id = "jumpTo"/> page <input type = "button" value = "jump" onclick = "jumpTo ($ {totalPages }) "/>
</Div>

Js functions used

Copy codeThe Code is as follows: function jumpTo (maxPage ){
Var page = $ ("# jumpTo"). val ();
If (page> maxPage | page <1 ){
Alert ("sorry, this page cannot be reached ")
} Else {
$ ('Body'). load ('checkcomments. do? Page = '+ page );
}
}

6. CSS Enhancement

To highlight the current page number, we made a special judgment in the above Code:

Copy codeThe Code is as follows: <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 you can emphasize it in the CSS file. For example:Copy codeThe Code is as follows:. currentPage {
Font-weight: bold;
Color: # ff9a00;
}

Or set the width of the following jump page input boxCopy codeThe Code is as follows: # jumpTo {
Width: 20px;
}

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

7. Improvement

Although it is convenient to use the method of a label for Link, it may not feel bad if there is an underscore. You can use css to remove it, or add some changes to the hover.

Copy codeThe Code is as follows: # pageControl {
Text-decoration: none;
}