快捷導(dǎo)航

React翻頁器的實現(xiàn)(包含前后端)

更新時間：2021年08月06日 10:25:57 作者：xiaoff

本文主要介紹了React翻頁器的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

前端

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

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

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

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

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

按照上面的思路去設(shè)計與寫翻頁器的函數(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)實現(xiàn)了翻頁器的前端的函數(shù)
那么就可以在table中的pagination中傳入pagination

后端（以java為例）

首先我們需要寫一條SQL

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

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

countSize是201 pageSize是20 你直接除結(jié)果是10 但是實際上需要的是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)
因為當(dāng)limit傳入10，10的時候才能真正將數(shù)據(jù)刷新一遍
否則前端傳入page=2的時候，我們只在后端更新了一條數(shù)據(jù)，而重疊了相當(dāng)于pageSize-1的數(shù)據(jù)量