目錄

• 前端
  
• 按照上面的思路去設計與寫翻頁器的函式
  
• 後端（以為例）
  
• 注意

前端

首先需要熟悉前端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,p
 
ageSize : self.example.pageSize
        };
        // 最終重新去請求函式，將當前頁與每頁的資料最大量傳入重新請求的引數
        self.onFetch(temple);
    },onChange(current,pageSizeHoVNDyckE) {
        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，就會出現負數
我們的後端就會產生報錯

關於如何優化limit，可以參考我的另一篇文章「深究之select優化」

到此這篇關於React翻頁器的實現(包含前後端)的文章就介紹到這了,更多相關React翻頁器內容請搜尋我們以前的文章或繼續瀏覽www.cppcns.com下面的相關文章希望大家以後多多支援我們！