如何實(shí)現(xiàn)React翻頁器

這篇文章主要為大家展示了“如何實(shí)現(xiàn)React翻頁器”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何實(shí)現(xiàn)React翻頁器”這篇文章吧。

前端

首先需要熟悉前端react中table中的屬性pagination

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

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

其中pagination我們自己去實(shí)現(xiàn)的函數(shù)，因?yàn)樵趓eact中只給出靜態(tài)樣例
我們可以去查看react文檔中，給的示例的是如下圖

其中提示我們函數(shù)的參數(shù)為current及pageSize
那么我們可以按照文檔中的提示去思考
是否可以給函數(shù)傳入當(dāng)前頁和每頁的最大數(shù)據(jù)量

按照上面的思路去設(shè)計(jì)與寫翻頁器的函數(shù)

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) => {
         // 每頁的最大數(shù)據(jù)量
        self.example.pageSize = size;
        // 當(dāng)前頁
        self.example.page = current;
        // 將兩個參數(shù)封裝在一個temple中
        let temple = {
            page : self.example.page,
            pageSize : self.example.pageSize
        };
        // 最終重新去請求函數(shù)，將當(dāng)前頁與每頁的數(shù)據(jù)最大量傳入重新請求的參數(shù)
        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);
    }
};

此刻我們已經(jīng)實(shí)現(xiàn)了翻頁器的前端的函數(shù)
那么就可以在table中的pagination中傳入pagination

后端（以java為例）

首先我們需要寫一條SQL

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

解讀SQL，有人可能會問pageSize為什么會加1
因?yàn)槔?/p>

countSize是201 pageSize是20 你直接除結(jié)果是10 但是實(shí)際上需要的是11

我們后端可以使用mybatis-helper或者自己封裝PageList
最終可以將從數(shù)據(jù)庫中查出的數(shù)據(jù)放到PageList中，再返回給前端
前端會收到后端傳入的數(shù)據(jù)總數(shù)(total)每頁的最大數(shù)量(pageSize)

對于SQL傳參的問題

當(dāng)我們寫

SELECT
 id
FROM
 stu
LIMIT 1,10

查出的數(shù)據(jù)是 218 222 220 217 219 221 8 9 10 12
如果我們把1改成2，那么查出的數(shù)據(jù)為 222 220 217 219 221 8 9 10 12 14
這就是我們?yōu)槭裁丛趕ql里面寫的是(page - 1)*(pageSize)
因?yàn)楫?dāng)limit傳入10，10的時候才能真正將數(shù)據(jù)刷新一遍
否則前端傳入page=2的時候，我們只在后端更新了一條數(shù)據(jù)，而重疊了相當(dāng)于pageSize-1的數(shù)據(jù)量

注意

當(dāng)我們SQL寫成(page-1)的時候，前端的默認(rèn)頁一定要傳入的值從1開始，否則傳入0，就會出現(xiàn)負(fù)數(shù)
我們的后端就會產(chǎn)生報(bào)錯。

以上是“如何實(shí)現(xiàn)React翻頁器”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！