Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use jquery+Ajax to achieve simple page bar related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that after reading this article on how to use jquery+Ajax to achieve simple page bar will have a harvest, let's take a look at it.

First, if it is a jsp page, you can use EL expressions and JSTL tags to make a paging bar without any difficulty. The disadvantage of using EL expressions and JSTL tags is that the asynchronous effect cannot be achieved, and the entire page is refreshed.

Second, if it is an ordinary html page, of course, it is not possible to use EL expressions and JSTL tags, so it can only be achieved through asynchronous Ajax. Of course, JSP pages can be used in both ways.

Third, paging, here I use Ajax and Jquery to do. The implementation is tedious and the code is particularly long because it is all about concatenating a lot of strings, and then using the html () method or the append () method to change the contents of the document.

IV. Prior analysis

The browser side needs to send two parameters to the server side:

① 's current page number currentPage

The size of the ② page (showing several records per page) pageSize.

The data sent by the server to the browser is in Json format, which is a page entity class PageBean. PageBean has the following fields:

Total number of ① records totalCount

② total page number totalPage

③ data per page List list

④ current page number currentPage

The number of records displayed by ⑤ per page pageSize.

This PageBean supports generics with the following code:

Public class PageBean {private int totalCount; / / Total records private int totalPage; / / Total page number private List list; / / data private int currentPage per page; / / number of records per page displayed by the current page number private int rows;//, that is, pageSize public int getTotalCount () {return totalCount;} public void setTotalCount (int totalCount) {this.totalCount = totalCount } public int getTotalPage () {return totalPage;} public void setTotalPage (int totalPage) {this.totalPage = totalPage;} public List getList () {return list;} public void setList (List list) {this.list = list;} public int getCurrentPage () {return currentPage } public void setCurrentPage (int currentPage) {this.currentPage = currentPage;} public int getRows () {return rows;} public void setRows (int rows) {this.rows = rows @ Override public String toString () {return "PageBean {" + "totalCount=" + totalCount + ", totalPage=" + totalPage + ", list=" + list + ", currentPage=" + currentPage + ", rows=" + rows +'}';}}

To do paging, you must use the "limit" in the SQL statement. Give an example to illustrate what it means.

Select * from student limit 2 and 5

Specific meaning: query data from the student table, start with the record with index "2", and then look up 5 items.

The index starts at 0, so the above statement is equivalent to querying 3, 4, 5, 6, 7 records, a total of 5 records.

All in all, the first number means "where to start", and the second number means "check a few items back".

The "where to start" here needs to be calculated. The formula is as follows:

(currentPage-1) × pageSize

That is, the current page number minus one parenthesis, multiplied by the page size.

So the pseudo code of the query statement is as follows:

Select * from student limit (currentPage-1) × pageSize,pageSize

For the total page number totalPage, it can be calculated from the total number of records totalCount and page size pageSize. The code is as follows:

TotalPage=totalCount%pageSize==0?totalCount/pageSize: (totalCount/pageSize+1)

Fifth, server-side main code

Import com.fasterxml.jackson.databind.ObjectMapper;import domain.PageBean;import domain.RainFall;import org.springframework.jdbc.core.BeanPropertyRowMapper;import org.springframework.jdbc.core.JdbcTemplate;import util.JDBCUtils;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.IOException;import java.util.List @ WebServlet ("/ ViewRainByPageServlet") public class ViewRainByPageServlet extends HttpServlet {protected void doPost (HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {JdbcTemplate template=new JdbcTemplate (JDBCUtils.getDataSource ()); String sql= "select * from rain_fall limit?,?"; / query some tuples String sql2= "select * from rain_fall"; / / query all tuples List countList = template.query (sql2, new BeanPropertyRowMapper (RainFall.class); int totalCount=countList.size () / / get the total number of records from the database int totalPage;// first declare the total page number. The total page number needs to be calculated based on the data sent by the client: String currentPage = request.getParameter ("currentPage"); String pageSize = request.getParameter ("pageSize"); int intCurrentPage = Integer.parseInt (currentPage) / / the current page number sent by the user if (intCurrentPage==0) / / when the user clicks the previous page button, currentPage will be reduced by 1, and it will be reduced to 0 {intCurrentPage=1;// if the user's currentPage=0, directly set the page number to 1 and return the data of the first page to the client} int intPageSize = Integer.parseInt (pageSize) / / the page size sent by the user totalPage=totalCount%intPageSize==0?totalCount/intPageSize: (totalCount/intPageSize+1); / / calculate the total number of pages if (intCurrentPage > totalPage) / / when the user clicks the next page button, currentPage will be increased by 1, and there will be situations where the current page number is greater than the total number of pages. {intCurrentPage=totalPage;// sets the current page number to the total number of pages} int startIndex= (intCurrentPage-1) * intPageSize / / start the query with a record with an index? List list = template.query (sql, new BeanPropertyRowMapper (RainFall.class), startIndex,intPageSize); ObjectMapper mapper=new ObjectMapper (); response.setContentType ("application/json;charset=utf-8"); / / set response data type and character encoding PageBean pageBean=new PageBean (); / / create PageBean object / / encapsulate PageBean object pageBean.setTotalCount (totalCount); pageBean.setTotalPage (totalPage); pageBean.setList (list) PageBean.setCurrentPage (intCurrentPage); pageBean.setRows (intPageSize); / / write data back to the client System.out.println (pageBean); mapper.writeValue (response.getOutputStream (), pageBean);} protected void doGet (HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doPost (request, response);}}

VI. Front-end code (very long)

Check the rainfall information $(function () / / entry function {$.post ("ViewRainByPageServlet", {currentPage:1,pageSize:5}, function (data) / / send an ajax request after the page is loaded, request the first five records, and complete the initialization of the interface {var totalCount=data.totalCount). / / Total records var totalPage=data.totalPage;// total pages var currentPage=data.currentPage / / current page number if (currentPage==1) / / if the current page number is 1 and the user clicks on the previous page, set class= "disabled" A "disable" icon {var str='\ n' +'\ n' + «\ n' +'\ n '+' } else// otherwise the button on the previous page is the normal style {var str='\ n' +'\ n' + «\ n' + '\ n' +'' } for (var iTune1)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.