Implementation of React page turner (including front and back ends)

front end

First, you need to be familiar with the attribute pagination in the table in the front-end react

<Pagination onChange={onChange} total={50} />

<Table bordered columns={columns} rowKey={record => record.id} dataSource={dataSource}
       pagination={pagination}/>

Among them, pagination is a function that we implement ourselves. Since only static samples are given in react, we can check the react documentation. The example given is as follows

It reminds us that the function parameters are current and pageSize
Then we can follow the instructions in the document to think about whether we can pass the current page and the maximum amount of data per page to the function

According to the above ideas, design and write the page turner function

const pagination = {
    showQuickJumper:true,
    showSizeChanger:[],
    total: this.example.total,
    defaultCurrent: this.example.page,
    current: this.example.page,
    pageSize: this.example.pageSize,
    hasNextPage: this.example.hasNextPage,
    onShowSizeChange: (current, size) => {
         // Maximum amount of data per page self.example.pageSize = size;
        //Current page self.example.page = current;
        // Encapsulate two parameters in a temple let temple = {
            page : self.example.page,
            pageSize : self.example.pageSize
        };
        // Finally, re-request the function and pass the current page and the maximum amount of data for each page into the re-request parameters self.onFetch(temple);
    },
    onChange(current, pageSize) {
        self.example.pageSize = pageSize;
        self.example.page = current;
        
        let temple = {
            page : self.data.search.page,
            pageSize : self.data.search.pageSize,
        };
        self.onFetch(temple);
    }
};

At this point we have implemented the front-end function of the pager, so we can pass the pagination into the pagination in the table

Backend (taking Java as an example)

First we need to write a SQL

select id from stu limit ${(page - 1)*(pageSize)}, ${pageSize + 1}

Interpreting SQL, some people may ask why pageSize is increased by 1
Because for example

countSize is 201 pageSize is 20 you divide directly the result is 10 but actually need 11

We can use mybatis-helper or encapsulate PageList ourselves on the backend
Finally, the data retrieved from the database can be put into PageList and then returned to the front end. The front end will receive the total number of data (total) and the maximum number of pages (pageSize) passed in by the back end.

Regarding the issue of SQL parameter passing

When we write

SELECT
 id
FROM
 Stu
LIMIT 1,10

The data found is 218 222 220 217 219 221 8 9 10 12
If we change 1 to 2, the data we find is 222 220 217 219 221 8 9 10 12 14
This is why we write (page - 1)*(pageSize) in sql
Because when limit is passed in as 10, 10, the data can be refreshed. Otherwise, when the front-end passes in page=2, we only update one piece of data in the back-end, and overlap the data equivalent to pageSize-1.

Notice

When we write SQL as (page-1), the default page value of the front end must start from 1. Otherwise, if 0 is passed in, a negative number will appear and our back end will generate an error.

For more information on how to optimize limit, please refer to my other article "In-depth Study of MySQL Select Optimization"

This is the end of this article about the implementation of React page turner (including front-end and back-end). For more relevant React page turner content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!