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

パブリッククラス 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{" を返す +
                "合計数=" + 合計数 +
                ", 合計ページ=" + 合計ページ +
                ", リスト=" + リスト +
                ", 現在のページ=" + 現在のページ +
                ", 行=" + 行 +
                '}';
    }
}

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

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

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

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(リクエスト、レスポンス);

    }
}

<%--
  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>