reactjs - 如何使用 Material ui 实现服务器端分页并使用react？

Question

目前，您可以使用下一个和上一个选项向后端分页，但我不能使用每页行数选项来做到这一点，如何让这两个选项起作用？谢谢

这是选项的图片

Answer 1

对于分页你需要:

1. 知道记录的数量。
2. 页面上显示的记录数。
3. 页码。

从客户端发送到服务器:页面记录数和页码)

从服务器发送到客户端:records between from, to

const count = 20; // for example we have 20 records
const size = 7;   // there are 7 records on each page

// number of pages
const countPages = Math.ceil (20/7);

//show records on page 2:
const page = 2; // display 2nd page

const from = (page - 1) * size;
const to = Math.min (from + size- 1, count);

console.log(`we have ${count} records, ${size} per page` )
console.log('number of pages', countPages);
console.log(`on page ${page} records from ${from} to ${to}`);