シンプルなページング効果を実現する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");//レスポンスのデータ型と文字エンコーディングを設定します。PageBean<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 を応援していただければ幸いです。

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