React ページターナーの実装 (フロントエンドとバックエンドを含む)

フロントエンド

まず、フロントエンドReactのテーブル内の属性ページネーションに慣れる必要があります。

<ページネーション onChange={onChange} total={50} />

<テーブル境界 columns={columns} rowKey={record => record.id} dataSource={dataSource}
       ページネーション={ページネーション}/>

このうち、ページネーションは私たちが独自に実装した機能です。Reactでは静的なサンプルしか提供されていないため、Reactのドキュメントを確認してください。提供されている例は次のとおりです。

関数のパラメータはcurrentとpageSizeであることを思い出させます
次に、ドキュメントの指示に従って、現在のページとページあたりの最大データ量を関数に渡すことができるかどうかを検討します。

上記のアイデアに従って、ページめくり機能を設計して記述します。

const ページネーション = {
    表示QuickJumper:true,
    表示サイズチェンジャー:[],
    合計: this.example.total,
    デフォルトCurrent: this.example.page、
    現在のページ: this.example.page、
    ページサイズ: this.example.pageSize、
    hasNextPage: this.example.hasNextPage、
    onShowSizeChange: (現在のサイズ) => {
         // ページあたりの最大データ量 self.example.pageSize = size;
        //現在のページ self.example.page = current;
        // 2つのパラメータをテンプルにカプセル化します let temple = {
            ページ: self.example.page,
            ページサイズ: self.example.pageSize
        };
        // 最後に、関数を再リクエストし、現在のページと各ページの最大データ量を再リクエスト パラメータに渡します。self.onFetch(temple);
    },
    onChange(現在のページサイズ) {
        ページサイズをページサイズに変換します。
        現在のページ
        
        寺院 = {
            ページ: self.data.search.page、
            ページサイズ: self.data.search.pageSize、
        };
        self.onFetch(テンプル);
    }
};

この時点で、ページャのフロントエンド関数を実装したので、ページネーションをテーブルのページネーションに渡すことができます。

バックエンド（Javaを例に挙げる）

まずSQLを書く必要があります

stu 制限 ${(page - 1)*(pageSize)}、${pageSize + 1} から ID を選択

SQLを解釈すると、pageSizeが1増加する理由を尋ねる人もいるかもしれない。
例えば

countSizeは201、pageSizeは20なので直接割ると結果は10になるが、実際は11必要である。

mybatis-helperを使用するか、バックエンドでPageListをカプセル化することができます。
最後に、データベースから取得したデータを PageList に格納し、フロントエンドに返すことができます。フロントエンドは、バックエンドから渡されたデータの合計数 (total) と最大ページ数 (pageSize) を受け取ります。

SQLパラメータの受け渡しの問題について

私たちが書くとき

選択
 id
から
 スチュ
制限 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 を渡すと、バックエンドで 1 つのデータのみが更新され、pageSize-1 に相当するデータがオーバーラップされます。

知らせ

SQL を (page-1) として記述する場合、フロントエンドのデフォルトのページ値は 1 から始まる必要があります。そうでない場合、0 が渡されると負の数が表示され、バックエンドでエラーが発生します。

制限を最適化する方法の詳細については、私の別の記事「MySQL Select最適化の詳細な研究」を参照してください。

React ページターナーの実装 (フロントエンドとバックエンドを含む) に関するこの記事はこれで終わりです。React ページターナーに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: