Interaction in web design: A brief discussion on paging issues
 Elements: The basic elements of paging are: previous page + page number + next page (such as marked 1); total page number (such as marked 2); jump page (such as marked 3); "confirm" button (such as marked 4);  When the number of forum pages is large, it may reach thousands; most of the paginated content is top posts or original posts that are updated continuously, so most users will check the original posts on the homepage, and then selectively check some message pages. The chance of manually flipping through all of them is almost zero; therefore, forum-style paging will have the following features: 1. Most users will turn the page directly or choose to return to the post list after reading the original post, so in addition to the bottom, a page turn is added to the top and a "return to list" shortcut is set. 2. Therefore, the "1st" page is the home page, and there is always a "1st" page. "..." is used in the middle to indicate the page number that is not displayed; 3. Only provide "home page 1 + 5 consecutive page numbers + last page" page numbers; the developer should consider that the average user can view at most 5 pages of content in a row. Or you can jump directly to the last page to view, so the last page number and the shortcut button to jump directly to the last page are displayed;  The information that users browse is the information they are interested in, and they browse it page by page like reading a newspaper, so "previous page" and "next page" are used most often; the second is page jump. In order to reflect the concept of lightweight microblogs, the middle page number part of the traditional page turn is simplified into a drop-down menu, which can both mark the current page position and switch pages; Sina Weibo: 45 microblogs per page, more will turn the page, previous page, next page and page number, default push 10 pages  1. The search results only provide 10 pages for the first time; generally, users should change the search content if they still cannot find what they want within these 10 pages. The footprint graphic and the corresponding page number below can be clicked to turn the page, which increases the interest of the page. 2. Because users generally do not return to the homepage when searching for pages, the page only has shortcut buttons for the previous page and the next page. 3. Click any page number to continue browsing, and you will find that the subsequent page number provided is: current page + 9; this is convenient for users to expand the search range. 4. Provide up to 20 page numbers; more suitable for page width  1. Tencent Weibo: 45 microblogs per page, more than one button is displayed by default, click it and 45 more will be displayed below, and so on; Tencent also launched a page turning mode for users to choose, which is more user-friendly    |
<<: CSS eight eye-catching HOVER effect sample code
>>: Detailed explanation of the relationship between Vue and VueComponent
Recommend
Control the light switch with js
Use js to control the light switch for your refer...
About the usage and precautions of promise in javascript (recommended)
1. Promise description Promise is a standard buil...
Tomcat obtains the client domain name of Nginx reverse proxy
question After Nginx reverse proxy, the Tomcat ap...
HTML table markup tutorial (48): CSS modified table
<br />Now let's take a look at how to cl...
Detailed explanation of setting Context Path in Web application
URL: http://hostname.com/contextPath/servletPath/...
Summary of common problems in downloading and installing MySQL 5.7 on Win7 64-bit
1. Download MySQL from the official website: This...
An example of implementing a simple finger click animation with CSS3 Animation
This article mainly introduces an example of impl...
JavaScript to achieve all or reverse selection function
This article shares the specific code of JavaScri...
Summary of SQL deduplication methods
When using SQL to extract data, we often encounte...
HTML tag meta summary, HTML5 head meta attribute summary
Preface meta is an auxiliary tag in the head area...
vmware installation error VMware Workstation failed to start VMware Authorization Service
Background: I want to install a SAP ECC server an...
IDEA2021 tomcat10 servlet newer version pitfalls
Because the version I used when I was learning wa...
Detailed tutorial on setting up multiple instances of MySQL 8 on CentOS 7 (you can have as many as you want)
cause I recently started to refactor the project,...
Mysql get table comment field operation
I won't say much nonsense, let's just loo...
MySQL ID starts to increase from 1 to quickly solve the problem of discontinuous ID
mysql id starts from 1 and increases automaticall...