HRS--Human Resources System (Springboot+vue)--Basic Upgrade--(6) Paging Query + Reset Button

1: First get a simple reset button

1. The interface design is placed in the same column as the search box.

 2. When clicking the reset button, the content in the search box is cleared and an unconditional query is triggered ( this writing method has a bug, which will be explained below)

 Two: do paging

In MyBatis, there are many ways to implement paging. Here are some common methods:

  • Native SQL keyword limit
  • Interceptor
  • PageHelper plugin

3. Front-end page design:

4. The value returned by the backend (the total number that meets the conditions, actual data information) 

 5. Switch the number of pieces of data on each page, and follow the page jump event of the previous page and the next page.

Here you can see the definition of the official document for yourself

 The documentation indicates that all four operations will have callback parameters, and the parameter is the page number. The value of the page number. So listen to these two events, dynamically modify these two values ​​to trigger the query function, and pass the parameter values ​​into the back-end interface as paging parameters.

 bug1: What is returned here is the Result object. The result data extends the Page object, so in the returned data, except for total, other pagination data is the default value of 0.

Solution: To be determined, we will integrate it later and make a unified process

Bug2: Found that after querying, I clicked the reset button and the data could no longer be found.

The original reset button function is written like this. Set the query condition workId to empty, and then re-adjust the query. The boss can see the problem at a glance.

 Check whether the parameters have been passed in. F12 shows that the request interface has a value, and the backend has also received this value.

 The problem lies here. The reset changed the paging parameters to 0, and the sql changed to limit 0,0. No data can be found. 

Solution: Just add the original paging parameter settings to the reset method.

 

Guess you like

Origin blog.csdn.net/weixin_42450130/article/details/132526337