Today is the 109th day for Liu Xiaoai to learn Java by herself.

Thank you for watching. Thank you.

Without further ado, let’s begin today’s lesson:


Saw a few small needs, the in the mind inexplicably feel itch, want to figure them out, in the end is specific how to achieve?

At the beginning, I thought that I could spend more than 20 minutes to fix it, and then learn the knowledge points behind it.

The result light these a few small problem made me one night, alas, as expected oneself still too stupid.

How many small needs? Let me say it slowly:

I. Business requirements and analysis

There are six small requirements that seem super simple at first glance, and they are, but are easy to overlook.

The requirements are sorted out as follows:


① There are a total of 10 buttons on the page bar. When the button is selected, it is dynamically set to a special color.

② The principle of ensuring the first five and the last four buttons:

  • When the selected button is less than 6, the page displays the ten buttons from 1 to 10.

  • When the selected button is greater than 6, the displayed button must change dynamically.

③ When the button is 1, the home page and the previous page are hidden.

④ When the button is selected as the last page: The last page and the next page are hidden.

⑤ Click on the home page to return to page 1, click on the last page to return to the last page.

⑥ Click on the previous page to move forward one page, click on the next page to move back one page.

These features are certainly simple to use, but how does it actually work in code?

Before writing the code, do a little analysis to get your thoughts straight:


The four parameters in ①

These parameters were specified in detail two days ago and the corresponding data has been responded to from the server.

The four parameters in ②

These are the four variables that are closely related to the six small features we need to implement.

In Java, it’s all about variables and methods.

When you encounter a requirement, the first consideration is to define the parameters of the requirement as a variable in Java.

Through the use of these variables and methods to achieve a specific demand, such a process of thinking.

Second, Java code writing

Because you extend these capabilities on a paging basis, you only need to add code in the Service layer.

These are simple math calculations, but that’s what made me realize the importance of math in programming:


① Count the previous and next pages

To put it bluntly, this is the classification discussion in elementary school mathematics:

  • If the current page number is not 1, then the previous page is the current page number -1.
  • If the current page number is 1, then the previous page remains 1.
  • If the current page is not the last, then the next page is the current page +1.
  • If the current page number is the last page, the next page remains the last page.

These can be represented in Java by ternary operators, and of course by if conditional statements.

② Calculate the start and end pages

This should be considered more, the page is displayed in 10 pages and ensure the first five and the last four principle, then:

If the total number of pages is less than 10, you can’t show 10, the start page is 1, the end page is the total number of pages.

If the total number of pages is greater than 10, the start page is equal to the current page -5, and the end page is equal to the current page +4. But be warned:

  • If the start page is less than 1, the start page is 1 and the end page is 10.
  • If the calculation result of the end page is greater than the total number of pages, the end page is the total number of pages, and the start page is the total number of pages -9.

These can be determined in Java using if conditional statements.

Finally, the data is encapsulated in a map in the form of key-value pairs, and then converted into JSON data responses for the front end.

Third, JavaScript code writing

1 Static Resources


This is the most primitive static page, the data is written dead, the buttons have no special effects, and the data cannot change dynamically.

Here’s what we need to do: dynamically concatenate the data from the server’s response into the page.

Once the page is stitched together, use a selector to find the <ul> tag and add the stitched page to the tag.

How to locate the tag? There are two kinds of selectors available:

  • You can define an ID in the <ul> tag and locate the tag accurately through the ID selector.

  • The label can also be located through a hierarchy selector.

2 Obtain response data


Pull out the data from the server’s response one by one in the form of key-value pairs and dynamically concatenate the data into the page.

3 Splicing pages

We do not need to type a letter, copy the corresponding code in the static resource, and then use “+” to complete the dynamic splicing.

GetPageData () is a custom function that sends a request to the server to get the data we need to know above.

The function, which was explained in detail the day before yesterday, takes two arguments: the number of pages to start with, and the amount of data to display per page.


① Home page and previous page

The first page and the previous page will appear only when the current page number is greater than 1, which can be realized by using the if statement, where:

  • The home page is getPageData (1,8)
  • The previous page is getPageData (prePage,8)

② Use the for loop to complete dynamic stitching

Start with beginPage and end with endPage, which correspond to the number of buttons displayed on the page bar.

Then we need to use the for loop, where the value of each loop is I and increments by 1:

  • The corresponding function is getPageData (I,8)
  • The label content, I, corresponds to the value displayed on the button.
  • When a loop is equal to the current page number, it is styled using CSS’s class selector to dynamically change it.

④ Last and next page

Only when the number of current pages is less than the total number of pages, the last page and the next page will appear, using the same if statement, where:

  • So the last page is getPageData (totalPage,8)
  • So the nextPage is getPageData (nextPage,8)

So that is the idea analysis of the first six small requirements, and a complete process of code writing.

The last

Thanks for watching.

If you can, please give it a thumbs up. Thank you.