JSPページング表示効果の簡易実装-＆＃＆チュートリアル-php.cn

JSPページング表示効果の簡易実装

韦小宝

リリース： 2018-01-18 09:46:11

オリジナル

2977 人が閲覧しました

この記事では主に 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){

　　$(&#39;body&#39;).load("getComments.do?page=" + page);

}

ログイン後にコピー

5. JSPページにページ番号リストを表示します

4を介して、計算されたページ番号リストpageArrを取得します。これは、ユーザーがサーブレット内で直接クリックできるように、現在のページにどのページを表示する必要があるかを示します。pageArr リストは、page (現在のページ番号) と totalPage (最大ページ番号) とともに応答オブジェクトに入れられます。いくつかの判断を行う

function goToPage(page, numberPerPage){

　　$(&#39;body&#39;).load("getComments.do?page=" + page + "&npp=" + numberPerPage);

}

ログイン後にコピー

使用される js 関数

int page = Integer.parseInt(req.getParameter("page"));

ログイン後にコピー

6. CSS の拡張効果

現在のページ番号を強調表示するために、上記のコードで特別な判断を行いました:

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{
    $(&#39;body&#39;).load(&#39;checkComments.do?page=&#39; + page);
  }
}

ログイン後にコピー

以上がこの記事の全内容です、皆様の勉強に少しでもお役に立てれば幸いです！！