In Web development, paging is one of the most common features. However, to be simple, flexible, convenient to solve the problem of paging, or need to move a bit of brains.
today, briefly combing through the past 6 years, personally encountered paging problems and solutions.
1. Defining the problem
The original: In the page need to show some data, but it is not possible to show all at once, want to show only a few bars at a time. The number of pages, PageNo, is to mark where the content is currently being accessed.
Backend needs to do: The backend needs paging query data, the data back to the front-end
Front-end needs to do: According to the back-end data, the construction of "1, 2, 3" sub-page panel, and to respond to events, such as Click on "2", Jump to the 2nd page
2.2 Ways of Thinking
There are a number of solutions, and I just want to list several typical solutions based on several indicators.
2.1 Paging All related logic, all by "backend implementation"
A. Getting data from a database
The total number of totalpage is calculated based on totalpage (the database needs to be queried first) and pagesize.
Then generate the front-end JS paging, front-end directly display the paging JS code ${pagejs}.
When you click on the front page paging link, the backend is then pagesize to get the data based on the current page PageNo and the number of bars displayed per page.
The 1th page is displayed by default.
Note: This method, which is all made up of back-end component pages, I have seen, however, I do not like this approach. From the backend to generate front-end paging JS, it feels too awkward.
My point of view: The front-end is responsible for the front end, the backend responsible for the back end of the matter, try not to influence each other.
2.2 Backend is only responsible for data query, the front-end is responsible for constructing paging JS.
The backend calculates count, which gets a page of data list. If you use MyBatis, you can write an interceptor, or tool method, to automatically query count. Because Count's SQL can be constructed based on the SQL of the list, it can be automated.
The front end is based on paging complete information page, constructs JS.
3. Synchronous or asynchronous
Front-end paging, you can select "Sync Refresh", each time you open a new page (may directly overwrite the current page, so that people do not seem to refresh the page).
You can also select asynchronous Refresh, send an AJAX request, and replace the paging content.
The difference is that, synchronous refresh, you need to construct a "url", url with paging information pageno,pagesize, may also need to bring a variety of query parameters, such as user name username.
Asynchronous flush, you need to give the paging "1" binding event response function, paging component needs to have this "callback function", extracted, can be passed by paged callers. In another point, the paging component automatically remembers query parameters and paging information. This is a bit simpler than constructing URLs synchronously.
4. Table type or content type
The contents of the page display may be tabular, such as "UID uname time Money", a user's fund record, or a page of content, such as an article showing 10 comments below.
Tabular layouts are relatively more "standardized", while content types vary greatly, often requiring their own construction.
Alternatively, the tabular component is improved to extract the "Render line" into a function, allowing the caller to pass in the "rendering method" to achieve the purpose of "reuse".
5. My Practice and Choice
A. Front-end and back-end separation, back-end query data, the front-end is responsible for displaying the data, the backend will not generate the front-end required JS and HTML and other content.
B. Tabular type-Asynchronous
St-grid, the most popular standardized tabular grid paging component on the Web, was written by colleagues before the second hand.
or from the Internet, such as jquery, such as a variety of front-end framework, there will be this component
C. Table Type-synchronization
Front End with Jstl, freemarker, struts tags, jsp tags and other template technology, raw material page bar, table content write a for loop.
This place of the page bar, can also use JS to achieve, but a bit of trouble.
Synchronous type, need to be in the URL with a variety of paging parameters and query conditions, want to make general, there is a certain difficulty.
D. Content Type-Asynchronous
The backend is the same, the front end writes Ajax methods, constructs the HTML, and then renders.
This is the "new scene" that I encountered when I was writing my personal website, and all the code was transformed by the code of other ways.
Showing 1 articles, showing several comments below, click Next page, comment refresh, article not refreshed.
E. Content Type-synchronization
Similar to "tabular-synchronous," The only difference is that the For loop produces not a table, but a div, which looks better.
6. Pull something else.
Code, I will not post, typesetting is cumbersome, and the code a lot. So many scenes, the actual code of each scene, are quite a lot. Have the opportunity to elaborate again in the future.
By paging this thing, I once again found that a difficult point of technology is that the actual business or demand there are many kinds of scenarios, different scenarios of technical implementation of ideas are different. It's very difficult to "write once, use everywhere." The feasible way is, "a scene, try to write only once the code, to ensure that the scene is omnipotent is very powerful".
After writing this article, I suddenly found that it may have been found, in some areas, I am more than a lot of "senior engineer" to be serious. Why is it? Each technical worker in the actual work encountered the problem is different, "the industry has specialized", everyone in their own interests and work within the scope of things more adept.
This is the point today, more about the "technical perspective", will be placed in the "Thunder View" elaborated in detail.
In short, I was a lot stronger than I was when I graduated 2 years ago. Youth has passed, and I have grown.
Ray fansunion-knowledgeable internet technology worker
Personal website: http://FansUnion.cn
December 6, 2014
Hubei-Wuhan-courtesy Gate
Original starting: http://fansunion.cn/article/detail/541.html
Web Development Paging algorithm, N (n>=3) solution
