Design and implementation of e-commerce system (13): Pagination component, from front to back, from JS to Java

I. Overview
Learning to practice web development for more than 5 years, until today, I really realized the most basic and most commonly used paging components.

include:
A. Front-end JS asynchronous loading and rendering;
B. Front-end JSP, Freemarker, struts tag rendering;
c. Back end paging
Write your own page-specific paging algorithms and logic.
Use the MyBatis page plug-in.

Today, focus on the next front JS asynchronous paging, a short introduction to the next back-end Java to provide data.

Ii. Key Data Structures

public class Pagevo {     /** total number of records */protected integer totalcount = 0;/** Total number of pages */protected integer totalpage = 0;/** page */protected integer PageNo = 1;/** shows the number of bars per page */protected integer pageSize = ten;        The data in the/** table is */protected list<?> rows;}  

third, back-end Java to provide paging data source ideas：
Control layer

@RequestMapping ("list") public void list (Pagevo Pagevo, httpservletresponse response) {Pagevo page = Admingoodsservice.page (Pagevo); super.jsonpage (page, response);}

The service layer is the Pagevo object that contains the data for the paging and list collections.
Persistent layer, get list and totalcount, totalpage, such as count number, the specific idea is to use MyBatis Interceptor, block List query, intercept list of SQL, stitching into count.
Key rules: List of SQL and Count of SQL, the latter part is exactly the same, such as
Listsql = "SELECT * from goods";
Countsql = "SELECT count (*) from goods":

Iv. Front Page Paging component

HTML Content Section

This section solves 2 problems, and 1 is the table header section that determines that 2 is set aside for 2 Div, "Bodyholder" and "Pageholder".
Bodyholder finally puts the HTML content of the dynamically generated table body, pageholder the dynamically generated page bar.

invoking the JS component part

<script> (function () {var fupage = new Fupage ({"url": "/goods/list.html", "params": {"PageNo": 1, "PageSize": 1}, "b Odyholder ":" Bodyholder "," Pageholder ":" Pageholder "," tabletemplate ":" <tr><td>{id}</td><td >{goodsId}</td></tr> "}); Fupage.send ();}) ();</script>

URL: Provides the URL of the data source
Params: parameter parts such as paging parameters, query parameters, etc.
Bodyholder and Pageholder Please refer to the above introduction
Tabletemplate: The template of the row row of the table body.

structure of JS component

The above is the main idea, front-end asynchronous, back-end to provide a solution for data. To be perfected.

Time is not early, to continue to write, thank you for "watching" ~

Ray fansunion-knowledgeable internet technology worker

January 7, 2015-Early morning

Hubei-Wuhan-courtesy Gate

Design and implementation of e-commerce system (13): Pagination component, from front to back, from JS to Java