This is the fifth day of my participation in the August More text Challenge. For details, see:August is more challenging

The front end

First, familiarize yourself with the Pagination attribute in the table in the react front end

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

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

Copy the code
  • Pagination is a function we implement ourselves, because only static examples are given in React
  • We can go to the React document and see the following example

  • It tells us that the parameters of the function are current and pageSize
  • So we can follow the instructions in the document
  • Whether the function can be passed the current page and the maximum amount of data per page

Follow the above ideas to design and write the page turning 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) = > {/ / each page of the self. The largest amount data example. The pageSize = size; Self.example. page = current; self.example.page = current; Let temple = {page: self.example.page, pageSize: self.example.pagesize}; // Finally re-request the function, pass the current page and the maximum amount of data per page re-request argument 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); }};Copy the code
  • At this point we have implemented the function on the front end of the page-turner
  • So we can pass pagination in the table pagination

Back end (Java as an example)

First we need to write a piece of SQL

select id from stu limit ${(page - 1)*(pageSize)}, ${pageSize + 1}
Copy the code
  • Reading SQL, one might ask why pageSize increases by 1
  • Because such as
CountSize is 201 and pageSize is 20 and you divide it by 10 but you really need 11Copy the code
  • We can use myBatis – Helper for the back end or encapsulate PageList ourselves
  • Finally, you can put the data retrieved from the database into PageList and return it to the front end
  • The maximum amount of data per page that the front end will receive from the back end (total)

For SQL pass parameter problem

  • When we write
SELECT
	id
FROM
	stu
LIMIT 1,10
Copy the code
  • The data found is 218 222 220 217 219 221 8 9 10 12
  • If we change 1 to 2, we get 222, 220, 217, 219, 221, 8, 9, 10, 12, 14
  • That’s why we wrote (pageSize) *(pageSize) in SQL
  • Because when the limit is passed in 10,10, it really refreshes the data
  • Otherwise, when the front end passes in page=2, we only update one piece of data on the back end, overlapping the amount of data equivalent to Pagesize-1

Pay attention to

  • When we write (page-1) in SQL, the default page of the front end must be passed with a value starting from 1, otherwise 0 will appear negative
  • Our back end will report an error

For more information on how to optimize limits, see my other article, “Digging into MySQL select Optimization.”