シンプルなページング効果を実現するjQuery+Ajax

シンプルなページング効果を実現するjQuery+Ajax

この記事では、ページング効果を実現するためのjquery+Ajaxの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

1. jsp ページの場合は、EL 式と JSTL タグを使用してページング ストリップを作成できます。これは難しくありません。 EL 式と JSTL タグを使用する場合の欠点は、非同期効果を実現できず、ページ全体が更新されることです。

2つ目に、通常のHTMLページであれば、当然EL式やJSTLタグは使えません。現時点では非同期Ajaxでしか実装できません。もちろん、どちらの方法も JSP ページには使用できます。

3. ページネーション バー。ここでは Ajax と Jquery を使用します。実装はかなり複雑で、コードも非常に長くなります。これは、一連の文字列を連結し、html() メソッドまたは append() メソッドを使用してドキュメントの内容を変更する必要があるためです。

4. 事前分析

ブラウザがサーバーに送信する必要があるパラメーターは 2 つあります。

①現在のページ番号 currentPage;
②ページサイズ(1ページに何件のレコードを表示するか)pageSize。

サーバーは、ページ エンティティ クラス PageBean であるデータを Json 形式でブラウザーに送信します。 PageBean には次のフィールドがあります。

①レコード総数 totalCount;
②総ページ数 totalPage;
③各ページのデータ一覧を表示します。
④現在のページ番号 currentPage;
⑤1ページあたりに表示するレコード数:pageSize。

この PageBean はジェネリックをサポートしており、コードは次のとおりです。

パブリッククラス PageBean<T> 
{
    private int totalCount; // レコードの総数private int totalPage; // 総ページ数private List<T> list; // ページあたりのデータprivate int currentPage; // 現在のページ番号private int rows;// ページあたりに表示されるレコード数、つまり pageSize

    パブリック int getTotalCount() 
    {
        totalCount を返します。
    }

    パブリック void setTotalCount(int totalCount)
    {
        this.totalCount = 合計カウント;
    }

    パブリック int getTotalPage() 
    {
        totalPage を返します。
    }

    パブリック void setTotalPage(int totalPage) 
    {
        this.totalPage = 合計ページ;
    }

    パブリックリスト<T> getList() 
    {
        リストを返します。
    }

    パブリック void setList(List<T> リスト) 
    {
        this.list = リスト;
    }

    パブリック int getCurrentPage() 
    {
        現在のページを返します。
    }

    パブリック void setCurrentPage(int currentPage) 
    {
        this.currentPage = 現在のページ;
    }

    パブリック int getRows() 
    {
        行を返します。
    }

    パブリック void setRows(int 行) {
        this.rows = 行;
    }

    @オーバーライド
    パブリック文字列toString() 
    {
        "PageBean{" を返す +
                "合計数=" + 合計数 +
                ", 合計ページ=" + 合計ページ +
                ", リスト=" + リスト +
                ", 現在のページ=" + 現在のページ +
                ", 行=" + 行 +
                '}';
    }
}

ページングを実現するには、SQL ステートメントで「limit」を使用する必要があります。意味を説明するために例を挙げてみましょう。

学生制限 2,5 から * を選択します。

具体的な意味: 学生テーブルから、インデックス「2」のレコードから開始して、その後 5 つのレコードをクエリしてデータをクエリします。

インデックスは 0 から始まるため、上記のステートメントは、3 番目、4 番目、5 番目、6 番目、7 番目のレコードの合計 5 つのレコードをクエリすることと同じです。

つまり、最初の数字は「検索を開始する場所」を意味し、2 番目の数字は「さらに検索するエントリの数」を意味します。

ここで「どこから検索を始めるか」を計算する必要があります。式は次のとおりです。

(現在のページ-1)×ページサイズ

つまり、現在のページ番号から 1 を引いて括弧に入れ、ページ サイズを掛けます。

したがって、クエリ ステートメントの疑似コードは次のようになります。

学生制限 (currentPage-1)×pageSize,pageSize から * を選択します。

総ページ数 totalPage は、レコードの総数 totalCount とページ サイズ pageSize によって計算できます。コードは次のとおりです。

totalPage=totalCount%pageSize==0?totalCount/pageSize:(totalCount/pageSize+1);

5. サーバー側のメインコード

com.fasterxml.jackson.databind.ObjectMapper をインポートします。
domain.PageBean をインポートします。
domain.RainFall をインポートします。
org.springframework.jdbc.core.BeanPropertyRowMapper をインポートします。
org.springframework.jdbc.core.JdbcTemplate をインポートします。
util.JDBCUtils をインポートします。

javax.servlet.ServletException をインポートします。
javax.servlet.annotation.WebServlet をインポートします。
javax.servlet.http.HttpServlet をインポートします。
javax.servlet.http.HttpServletRequest をインポートします。
javax.servlet.http.HttpServletResponse をインポートします。
java.io.IOException をインポートします。
java.util.List をインポートします。

@WebServlet("/ViewRainByPageServlet")
パブリッククラス ViewRainByPageServlet は HttpServlet を拡張します
{
    protected void doPost(HttpServletRequest リクエスト、HttpServletResponse レスポンス) は ServletException、IOException をスローします
    {
        JdbcTemplate テンプレート = 新しい JdbcTemplate (JDBCUtils.getDataSource());
        String sql="select * from rain_fall limit ?,?";//いくつかのタプルをクエリします String sql2="select * from rain_fall";//すべてのタプルをクエリします List<RainFall> countList = template.query(sql2, new BeanPropertyRowMapper<RainFall>(RainFall.class));
        int totalCount = countList.size(); //データベースからレコードの合計数を取得します。 int totalPage; //最初に合計ページ数を宣言します。これはクライアントから送信されたデータに基づいて計算する必要があります。 String currentPage = request.getParameter("currentPage");
        文字列 pageSize = request.getParameter("pageSize");
        int intCurrentPage = Integer.parseInt(currentPage); // ユーザーが送信した現在のページ番号 if (intCurrentPage==0) // ユーザーが前のページボタンをクリックすると、currentPage は 1 減少し、0 に減少する場合があります {
            intCurrentPage=1; // ユーザーの currentPage=0 の場合、ページ番号を直接 1 に設定し、最初のページのデータをクライアントに返します}

        int intPageSize = Integer.parseInt(pageSize); //ユーザーが送信したページサイズ totalPage = totalCount% intPageSize == 0? totalCount / intPageSize: (totalCount / intPageSize + 1); //ページの総数を計算する if (intCurrentPage > totalPage) //ユーザーが次のページボタンをクリックすると、currentPage が 1 増加し、ページの総数よりも大きくなる場合があります {
            intCurrentPage=totalPage; //現在のページ番号を総ページ数に設定します}

        int startIndex=(intCurrentPage-1)*intPageSize; // どのレコードインデックスからクエリを開始しますか?

        リスト<RainFall> リスト = template.query(sql、新しいBeanPropertyRowMapper<RainFall>(RainFall.class)、startIndex、intPageSize);
        ObjectMapper マッパー = 新しい ObjectMapper();
        response.setContentType("application/json;charset=utf-8");//レスポンスのデータ型と文字エンコーディングを設定します。Pag​​eBean<RainFall> pageBean=new PageBean<>();//PageBeanオブジェクトを作成します。//PageBeanオブジェクトをカプセル化します。pageBean.setTotalCount(totalCount);
        ページBean に合計ページ数を設定します。
        pageBean.setList(リスト);
        現在のページを設定します。
        ページサイズを設定します。
        // データをクライアントに書き戻します System.out.println(pageBean);
        mapper.writeValue(response.getOutputStream(),pageBean);

    }

    protected void doGet(HttpServletRequest リクエスト、HttpServletResponse レスポンス) は ServletException、IOException をスローします
    {

        this.doPost(リクエスト、レスポンス);

    }
}

6. フロントエンドコード(非常に長い)

<%--
  Yingyong Lao によって作成されました。
  ユーザー: laoyingyong
  日付: 2019-12-10
  時間: 19:28
--%>
<%@ ページ contentType="text/html;charset=UTF-8" language="java" %>
<html>
<ヘッド>
    <title>降雨情報を見る</title>
    <!-- 1. CSS グローバル スタイルをインポートする -->
    <link href="css/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="スタイルシート">
    <!-- 2. jQuery インポート、バージョン 1.9 以上の使用を推奨 -->
    <script src="js/jquery-2.1.0.min.js"></script>
    <!-- 3. Bootstrap の js ファイルをインポートします -->
    <script src="js/bootstrap.min.js"></script>
    <スクリプト>
        $(function () //エントリ関数{
            $.post("ViewRainByPageServlet",{currentPage:1,pageSize:5},function (data)//ページが読み込まれたら、最初の 5 つのレコードを要求する ajax リクエストを送信し、インターフェイスの初期化を完了します {
               var totalCount=data.totalCount;//レコードの総数var totalPage=data.totalPage;//ページの総数var currentPage=data.currentPage;//現在のページ番号if(currentPage==1)//現在のページ番号が 1 で、ユーザーが前のページをクリックした場合は、class="disabled" を設定して「無効」アイコンを表示します{
                    var str = ' <li class="disabled" onclick="findByPage('+(currentPage-1)+',5)">\n' +
                        ' <a href="#" aria-label="前へ">\n' +
                        ' <span aria-hidden="true">&laquo;</span>\n' +
                        ' </a>\n' +
                        ' </li>';

                }
                else // それ以外の場合は、前のページのボタンは通常のスタイルになります {
                    var str=' <li οnclick="findByPage('+(currentPage-1)+',5)">\n' +
                        ' <a href="#" aria-label="前へ">\n' +
                        ' <span aria-hidden="true">&laquo;</span>\n' +
                        ' </a>\n' +
                        ' </li>';

                }

                for(var i=1;i<=totalPage;i++)//ページ番号をトラバースします。ページ番号は、2つのアイコン(前のページと次のページ)の間の番号です。{
                    if(i==currentPage)//現在の番号が現在のページ番号 currentPage と等しい場合は、class="active" を設定します。つまり、ページ番号が強調表示されます {
                        var item='<li οnclick="findByPage('+i+',5);" class="active"><a href="#">'+i+'</a></li>';
                    }
                    それ以外
                    {
                        var item='<li οnclick="findByPage('+i+',5);"><a href="#">'+i+'</a></li>';
                    }
                    str=str+アイテム;

                }
                if(currentPage==totalPage)//現在のページ番号が最後のページで、ユーザーが次のページをクリックした場合は、class="disabled" を設定して「無効」アイコンが表示されるようにします {
                    var strend='<li class="disabled" onclick="findByPage('+(currentPage+1)+',5)">\n' +
                        ' <a href="#" aria-label="次へ">\n' +
                        ' <span aria-hidden="true">&raquo;</span>\n' +
                        ' </a>\n' +
                        ' </li>\n' +
                        ' <span style="font-size: 24px" id="total_sp">合計 '+totalCount+' レコード、合計 '+totalPage+' ページ</span>';

                }
                else //最後のページでない場合は通常のスタイルです {
                    var strend='<li οnclick="findByPage('+(currentPage+1)+',5)">\n' +
                        ' <a href="#" aria-label="次へ">\n' +
                        ' <span aria-hidden="true">&raquo;</span>\n' +
                        ' </a>\n' +
                        ' </li>\n' +
                        ' <span style="font-size: 24px" id="total_sp">合計 '+totalCount+' レコード、合計 '+totalPage+' ページ</span>';

                }

                str = str + strend;
                $("#fenyelan").html(str); //ページネーションバーの初期化 var array=data.list;
                for(var i=0;i<array.length;i++)
                {
                    var obj = 配列[i];
                    var id = obj.id;
                    var area=obj.area;
                    var 降水量 = obj.precipitation;
                    var 月 = obj. 月;
                    var releaseDate=obj.releaseDate;
                    // テーブルの初期化 $("#rain_table").append('<tr class="info">\n' +
                        ' <td style="text-align: center">'+id+'</td>\n' +
                        ' <td style="text-align: center">'+エリア+'</td>\n' +
                        ' <td style="text-align: center">'+降水量+'</td>\n' +
                        ' <td style="text-align: center">'+月+'</td>\n' +
                        ' <td style="text-align: center">'+リリース日+'</td>\n' +
                        ' </tr>');
                }

            });//ページが読み込まれた後にAjaxリクエストを送信します。終了

        });//エントリ関数終了



        //ページ ボタンのクリック コールバック関数は、エントリ関数に記述する必要はありません。この関数は、ページ ボタンがクリックされたときにのみ呼び出されるためです。function findByPage(curPage,paSize) //呼び出されるときは、現在のページ番号とページ サイズ (ページにあるレコードの数) の 2 つのパラメータを渡す必要があります。
        {
            $.post("ViewRainByPageServlet",{currentPage:curPage,pageSize:paSize},function (data) //ajaxリクエストを送信{
                var totalCount=data.totalCount;//レコードの総数var totalPage=data.totalPage;//ページの総数var currentPage=data.currentPage;//現在のページ番号if(currentPage==1)//現在のページ番号が 1 で、ユーザーが前のページをクリックした場合は、class="disabled" を設定して「無効」アイコンを表示します{
                    var str = ' <li class="disabled" onclick="findByPage('+(currentPage-1)+',5)">\n' +
                        ' <a href="#" aria-label="前へ">\n' +
                        ' <span aria-hidden="true">&laquo;</span>\n' +
                        ' </a>\n' +
                        ' </li>';

                }
                else //最初のページでない場合は、前のページボタンは通常のスタイルになります {
                    var str=' <li οnclick="findByPage('+(currentPage-1)+',5)">\n' +
                        ' <a href="#" aria-label="前へ">\n' +
                        ' <span aria-hidden="true">&laquo;</span>\n' +
                        ' </a>\n' +
                        ' </li>';

                }


                //ページングストリップの中央の数字部分 for(var i=1;i<=totalPage;i++)
                {
                    if(i==currentPage)//現在の番号が現在のページ番号 currentPage と等しい場合は、class="active" を設定します。つまり、ページ番号が強調表示されます {

                        var item='<li οnclick="findByPage('+i+',5);" class="active"><a href="#">'+i+'</a></li>';
                    }
                    それ以外
                    {
                        var item='<li οnclick="findByPage('+i+',5);"><a href="#">'+i+'</a></li>';
                    }


                    str=str+アイテム;

                }
                if(currentPage==totalPage)//現在のページ番号が最後のページで、ユーザーが次のページをクリックした場合は、class="disabled" を設定して「無効」アイコンが表示されるようにします {
                    var strend='<li class="disabled" onclick="findByPage('+(currentPage+1)+',5)">\n' +
                        ' <a href="#" aria-label="次へ">\n' +
                        ' <span aria-hidden="true">&raquo;</span>\n' +
                        ' </a>\n' +
                        ' </li>\n' +
                        ' <span style="font-size: 24px" id="total_sp">合計 '+totalCount+' レコード、合計 '+totalPage+' ページ</span>';

                }
                else //最後のページでない場合は通常のスタイルです {
                    var strend='<li οnclick="findByPage('+(currentPage+1)+',5)">\n' +
                        ' <a href="#" aria-label="次へ">\n' +
                        ' <span aria-hidden="true">&raquo;</span>\n' +
                        ' </a>\n' +
                        ' </li>\n' +
                        ' <span style="font-size: 24px" id="total_sp">合計 '+totalCount+' レコード、合計 '+totalPage+' ページ</span>';

                }
                str = str + strend;
                $("#fenyelan").html(str);//ページングストリップのコンテンツを変更する//テーブル文字列 var tableStr='<caption style="text-align: center;font-size: 24px">降雨情報の概要</caption>\n' +
                    ' <tr class="success">\n' +
                    ' <th style="text-align: center">id</th>\n' +
                    ' <th style="text-align: center">地域</th>\n' +
                    ' <th style="text-align: center">降水量 (mm)</th>\n' +
                    ' <th style="text-align: center">月</th>\n' +
                    ' <th style="text-align: center">リリース日</th>\n' +
                    ' </tr>';
                var array=data.list;//特定のコンテンツのオブジェクト配列 for(var i=0;i<array.length;i++)//オブジェクトグループを走査 {
                    var obj=array[i]; //配列の要素はオブジェクトです var id=obj.id;
                    var area=obj.area;
                    var 降水量 = obj.precipitation;
                    var 月 = obj. 月;
                    var releaseDate=obj.releaseDate;
                    //記録された文字列の行 var oneRecord = '<tr class="info">\n' +
                        ' <td style="text-align: center">'+id+'</td>\n' +
                        ' <td style="text-align: center">'+エリア+'</td>\n' +
                        ' <td style="text-align: center">'+降水量+'</td>\n' +
                        ' <td style="text-align: center">'+月+'</td>\n' +
                        ' <td style="text-align: center">'+リリース日+'</td>\n' +
                        ' </tr>';

                    tableStr=tableStr+oneRecord; //テーブル文字列を追加します。レコードを走査するたびに行が追加されます}
                $("#rain_table").html(tableStr);//テーブルの内容を変更する});//ajaxリクエストの終了

        }//ページボタンクリック関数終了

    </スクリプト>
</head>
<本文>
<div class="コンテナ">
    <div class="row">

        <table class="table table-bordered table-hover" id="rain_table">
            <caption style="text-align: center;font-size: 24px">降雨情報を一目で確認</caption>
            <tr class="成功">
                <th style="text-align: center">id</th>
                地域
                <th style="text-align: center">降水量(mm)</th>
                <th style="text-align: center">月</th>
                <th style="text-align: center">リリース日</th>
            </tr>
        </テーブル>


        <nav aria-label="ページナビゲーション">
            <ul class="pagination" id="fenyelan">
                <li>
                    <a href="#" aria-label="前へ">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li><a href="#">1</a></li>
                <li>
                    <a href="#" aria-label="次へ">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
                <span style="font-size: 24px" id="total_sp">合計 2 件のレコード、合計 1 ページ</span>
            </ul>
        </nav>



    </div>

</div>

</本文>
</html>

7. エフェクト表示

これは単純なページ区切りバーであり、Baidu のページ区切りバー「最初の 5 つと最後の 4 つ」の効果はありません。データ量が非常に大きくなると、このページング バーは多くのスペースを占有することになります。時間があれば最適化してください。 Jquery コードに関しては、コードコメントに明確に説明されているので、ここでは詳しく説明しません。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Ajax は CORS レスポンス ヘッダーを設定してクロスドメインの問題を解決し、クロスドメインのケース スタディを実現します。
  • 3レベルリンク省および市町村のAjaxコード
  • JSON、AJAX、Maven の基礎
  • Ajax ログイン検証実装コード
  • アヤックスは州、都市、地区間の連携を実現
  • Ajax の予備実装 (vscode+node.js+express フレームワークを使用)
  • AJAX を使用して Django バックエンド データを取得する方法
  • Ajax の JavaScript ソリューションにおける parsererror エラー ケースの詳細な説明

<<:  Linux自動ログイン例の説明

>>:  Ubuntu での mysql のインストールと使用 (一般版)

推薦する

MySQL ロック関連知識のまとめ

MySQL のロックロックは、並行環境におけるリソースの競合を解決する手段です。その中でも、楽観的並...

Vue再帰コンポーネントの簡単な使用例

序文多くの学生は既に再帰に精通していると思います。アルゴリズムの問​​題を解決するために再帰がよく使...

実行後にdocker nginxにアクセスできない問題の解決策

## 1最近、docker デプロイメントを学習しており、当初は nginx を docker 化す...

JavaScript parseInt() と Number() の違いのケーススタディ

学習目標: parseInt() と Number() という 2 つの関数は、文字列をデータ型に変...

MySql ストアド プロシージャ パラメータの初歩的な使用法の詳細な説明

パラメータでのストアドプロシージャの使用IN パラメータは、プロシージャに情報を渡すためにのみ使用さ...

メタ情報に基づいて時間指定のページ更新またはリダイレクトを実装する

メタを使用して、ページの時間指定更新またはジャンプを実装します。 XML/HTML コードコンテンツ...

JavaScript 配列の Reduce() メソッドの構文と例の分析

序文Reduce() メソッドは関数を累積器として受け取り、配列内の各値 (左から右へ) が単一の値...

Centos での TCPWrappers アクセス制御の実装

1. TCP ラッパーの概要TCP Wrappers は TCP サービス プログラムを「ラップ」し...

Linux で tcpdump コマンドを使用してデータ パケットをキャプチャおよび分析する方法の詳細な説明

序文tcpdump はよく知られたコマンドライン パケット分析ツールです。 tcpdump コマンド...

Debian システムでの自動パッケージ更新の問題を解決する方法

いつから始まったのかはわかりませんが、コンピュータの電源を入れてインターネットに接続するたびに、デー...

Ubuntu 20.04 に Python 3 仮想環境をインストールする詳細なチュートリアル

以下はすべて仮想マシン上で実行されます1. pip3をインストールするsudo apt で pyth...

大量のデータを含むエレメントのシャトルボックスで「すべて選択」をクリックするとスタックする問題の解決方法

目次解決策1: EUIの転送コンポーネントをコピーして変更し、プロジェクトディレクトリに導入する解決...

MySQL がユーザー名とパスワードの漏洩を引き起こす可能性のある Riddle の脆弱性を公開

MySQL バージョン 5.5 および 5.6 を標的とする Riddle 脆弱性により、中間者攻撃...

Angularの単一プロジェクトを複数プロジェクトにアップグレードするプロセス全体

目次序文開発環境新しいプロジェクトを作成するモバイルウェブプロジェクト角度付きJSONパブリックモジ...

IE8 ベータ 1 には注意が必要な 2 つの領域があります

<br />関連記事: Web スキル: 複数の IE バージョンを共存させるソリューシ...