如何實現React翻頁器

這篇文章主要為大家展示了“如何實現React翻頁器”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“如何實現React翻頁器”這篇文章吧。

前端

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

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

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

其中pagination我們自己去實現的函數，因為在react中只給出靜態樣例
我們可以去查看react文檔中，給的示例的是如下圖

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

按照上面的思路去設計與寫翻頁器的函數

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);
    }
};

此刻我們已經實現了翻頁器的前端的函數
那么就可以在table中的pagination中傳入pagination

后端（以java為例）

首先我們需要寫一條SQL

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

解讀SQL，有人可能會問pageSize為什么會加1
因為例如

countSize是201 pageSize是20 你直接除結果是10 但是實際上需要的是11

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

對于SQL傳參的問題

當我們寫

SELECT
 id
FROM
 stu
LIMIT 1,10

查出的數據是 218 222 220 217 219 221 8 9 10 12
如果我們把1改成2，那么查出的數據為 222 220 217 219 221 8 9 10 12 14
這就是我們為什么在sql里面寫的是(page - 1)*(pageSize)
因為當limit傳入10，10的時候才能真正將數據刷新一遍
否則前端傳入page=2的時候，我們只在后端更新了一條數據，而重疊了相當于pageSize-1的數據量

注意

當我們SQL寫成(page-1)的時候，前端的默認頁一定要傳入的值從1開始，否則傳入0，就會出現負數
我們的后端就會產生報錯。

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