この記事では主に JSP のページング表示効果の簡単な実装を詳しく紹介します。JSP に興味のある友人はこの記事を参照してください。この記事の例は、JSP を共有します。ページング表示効果の具体的なコードは次のとおりです。
1. MySQL の制限キーワード (DAO)select * from tablename limit startPoint, numberPerPage;
tablename はページングで表示されるテーブルの名前です。開始点 Position -1;
numberPerPage は 1 ページに表示される項目の数です。
例: コメント制限 20,5 から * を選択;
コメント テーブルからコメント 21 ~ 25 を抽出します:
2. jQuery ロード関数 (ページ JS)
MySQL 制限キー Word で完了できます。特定の範囲 (n, n+m] 内のレコードの抽出。これは、特定のページに表示されるコンテンツを決定するために 2 つのパラメーター、つまり「ページ x」と各ページに表示される番号が必要であることを意味します。表示される番号はプログラムで設定することも、ユーザーが設定することもできますが、ユーザーがページ番号、次のページ/前のページのボタンをクリックするとき、またはジャンプするときに、パラメーター「ページ x」をユーザーが指定する必要があります。特定のページがある場合、この「ページ」を送信する必要があります。サーブレットはパラメータを受け取り、コンテンツ (サーブレット ファイル) を整理します
サーブレットは、ユーザーがページ X を閲覧したいこと、および 1 ページに表示されるレコードの数を、
4. サーブレットは、表示されるページ数を計算しますは、一度に約 10 ページ、つまり、52 ページの場合は、利用可能なページ数を表示します。リストは 50、51、52 です。
。ページ x にいると仮定すると、コードは次のように記述されており、開始値は x/10*10 です。は 2 つの特殊なケースです: ① ページの合計数が 10 未満です。それぞれ ② ページ数が 10 の整数倍ではありません
これにより、ページ リストが 10 未満になります。処理は簡単です。 if
条件を追加して判断するだけです おおよそのコードは次のとおりです:function goToPage(page){
$('body').load("getComments.do?page=" + page);
}
4を介して、計算されたページ番号リストpageArrを取得します。これは、ユーザーがサーブレット内で直接クリックできるように、現在のページにどのページを表示する必要があるかを示します。pageArr リストは、page (現在のページ番号) と totalPage (最大ページ番号) とともに応答オブジェクトに入れられます。いくつかの判断を行う
function goToPage(page, numberPerPage){ $('body').load("getComments.do?page=" + page + "&npp=" + numberPerPage); }使用される js 関数
int page = Integer.parseInt(req.getParameter("page"));現在のページ番号を強調表示するために、上記のコードで特別な判断を行いました:
int start = 1; if(page >= 10){ start = page/10 * 10; }このようにして、現在のページ番号が currentPage クラスとしてマークされ、CSS ファイルに追加できるようになります。 例:
int total = sm.getCommentCount(); int totalPage = total/itemsPerPage; if(total % itemsPerPage != 0){ totalPage += 1; } Vector<Integer> pageArr = new Vector<Integer>(); int start = 1; if(page >= 10){ start = page/10 * 10; } int num = start; while(!(num > totalPage || num > start + 10)){ pageArr.add(new Integer(num)); ++num; }または、ジャンプ ページ入力ボックスの幅を
<!-- 上一页 按钮 --> <p id="pageControl"> <c:choose> <c:when test="${page != 1}"> <a href="checkComments.do?page=${page-1}" rel="external nofollow" ><input type="button" name="lastPage" value="上一页" /></a> </c:when> <c:otherwise> <input type="button" disabled="true" name="lastPage" value="上一页" /><!-- 为了要那个灰掉的button --> </c:otherwise> </c:choose> <!-- 页数列表 --> <c:forEach items="${pageList}" var="item"> <c:choose> <c:when test="${item == page}"> <a href="checkComments.do?page=${item}" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="currentPage">${item}</a> </c:when> <c:otherwise> <a href="checkComments.do?page=${item}" rel="external nofollow" rel="external nofollow" rel="external nofollow" >${item}</a> </c:otherwise> </c:choose> </c:forEach> <!-- 下一页 按钮 --> <c:choose> <c:when test="${page != totalPages}"> <a href="checkComments.do?page=${page+1}" rel="external nofollow" > <input type="button" name="nextPage" value="下一页" /> </a> </c:when> <c:otherwise> <input type="button" disabled=true name="nextPage" value="下一页" /><!-- 为了要那个灰掉的button --> </c:otherwise> </c:choose> <!-- 直接跳转 --> 共${totalPages}页 -向<input type="text" id="jumpTo" />页 <input type="button" value="跳转" onclick="jumpTo(${totalPages})" /> </p>の下に設定して、現在のページは太字とオレンジ色でマークされます:
7, 改善
リンクを張るにはaタグ方式を使用した方が便利ですが、下線が表示されてしまい非常に野暮ったい感じがします。 CSSを使用してそれを削除したり、ホバー時にいくつかの変更を追加したりできます。function jumpTo(maxPage){ var page = $("#jumpTo").val(); if(page > maxPage || page < 1){ alert("对不起,无法到达该页") }else{ $('body').load('checkComments.do?page=' + page); } }
以上がこの記事の全内容です、皆様の勉強に少しでもお役に立てれば幸いです! !
関連おすすめ:
JSP基本入門
jsPlumbフローチャート体験まとめ
jspは上位ページと下位ページのページング機能を実現します
以上がJSPページング表示効果の簡易実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。