React翻页器的实现(包含前后端)

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

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

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) => {
         // 每页的最大数据量
        self.example.pageSize = size;
        // 当前页
        self.example.page = current;
        // 将两个参数封装在一个temple中
        let temple = {
            page : self.example.page,
            pageSize : self.example.pageSize
        };
        // 最终重新去请求函数，将当前页与每页的数据最大量传入重新请求的参数
        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);
    }
};

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

SELECT
 id
FROM
 stu
LIMIT 1,10