質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.06%

jQueryを用いたページング処理について

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 4,180

score 49

jQueryを用いたページング処理についての質問です。

開発環境は、
Windows7
ブラウザ:IE
Java:1.6
eclipce:3.6
Tomcat:7.0
Oracle11g
となります。

以下のjspページに、ページング処理を施したいと考えています 
現在は登録された情報が際限なく追加されていくので、10件毎に 
「前ページへ」(ページ数)「次ページへ」 
というような実装を盛り込みたいです。 

<%@ page language="java" contentType="text/html; charset=Shift_JIS" 
pageEncoding="Shift_JIS"%> 
<%@ page import="java.util.*" %> 
<%@ page import="java.io.*" %> 
<%@ page import="bean.BookBean" %> 
<%@ page import="operator.*" %> 
<%@ page import="servlet.*" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> 
<title>書籍情報一覧画面</title> 
<link rel="stylesheet" href="./css/design.css" type="text/css"> 
<script type="text/javascript" src="./js/function.js"></script> 
</head> 
<body> 
<table id="contents" summary="body"> 
<tr id="header"><td> 

<table width="100%"><tr><td>システム</td><td align="right"><a href="TopSrv">TOP</a></td></tr></table> 

</td></tr> 
<tr id="body"> 
<td align="center" valign="top"> 
<!-- 内容ココカラ --> 
<font size="7">一覧</font> 

<% List<BookBean> list_ = (ArrayList<BookBean>)session.getAttribute("GENRESERCH_LIST"); %> 

<form name = "form_serchList" method ="post" action ="BookSrv" > 
書籍名検索 
<br> 
書籍名をどうぞ<input type = "text" name = "serchWord" > 
<input type = "hidden" name = "serch" value = "serch"> 
<input type="submit" value="検索"> 
</form> 

<% List<BookBean> list = (ArrayList<BookBean>)request.getAttribute("BOOK_LIST"); %> 
<%if(list.size() == 0){%> 
<br> 
<h1>書籍情報はありません</h1>

<br> 
<%}%> 


<%String error = (String)request.getAttribute("error");%> 
<%if(error != null){%> 
<font size = "5"><%=error %></font> 
<%}%> 

<table summary="regist" id="list" > 
<tr class ="title"> 
<td width="100px">名前</td> 
<td width="80px">ジャンル</td> 
<td width="120px">発売日</td> 
<td width="120px">人気</td> 
<td width="60px">在庫</td> 
<td width="200px">コメント</td> 
<td></td> 
</tr> 

<%CharOperator co = new CharOperator(); %> 
<%for(BookBean bbean:list){ %> 
<tr class ="sample" > 

<td><%= co.replace(bbean.getName()) %></td> 
<td><%= co.replace(bbean.getGenre()) %></td> 
<td><%= bbean.getReleaseDay() %></td> 
<td width="110px" > 
<% int i = 1; %>    
<% int j = bbean.getPopularity(); %>    
<% while(i <= j){ %> 
★ 
<% i++; %> 
<%}%> 
</td> 
<td> 
<%if("1".equals(bbean.getStock())){%> 
あり 
<%}else if("0".equals(bbean.getStock())){ %> 

<%}%> 
</td> 
<td><%= co.replace(bbean.getComment()) %></td> 
<td> 
<form method="post" name="form_delete" action ="ListSrv"> 
<input type="submit" value="削除" onclick="return deleteList()" style="margin:2px; float:left;"> 
<input type="hidden" name="id" value="<%=bbean.getId()%>"> 
</form> 
<form method="post" name="form_update" action ="UpdateSrv" style="margin:2px; float:left;"> 
<input type="submit" value="更新" > 
<input type="hidden" name="id" value="<%=bbean.getId()%>"> 
</form> 
</td> 
</tr> 
<% } %> 

</table> 


<!-- 内容ココマデ --> 
</td> 
</tr> 
<tr id="footer"><td> 

</td></tr> 
</table> 
</body> 
</html> 


当初はSQL文を追加してDAOとservletを用いた方法を模索していたのですが、 
jQueryでも出来る、というような内容の記述を見つけ、以下のHTMLでインチキページング処理を記述してみました。 

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<title>jQueryによるテーブルのページ送り</title> 
<script> 
$(function() { 
var page = 0; 
function draw() { 
$('#page').html(page + 1); 
$('tr').hide(); 
$('tr:first,tr:gt(' + page * 10 + '):lt(10)').show(); 

$('#prev').click(function() { 
if (page > 0) { 
page--; 
draw(); 

}); 
$('#next').click(function() { 
if (page < ($('tr').size() - 1) / 10 - 1) { 
page++; 
draw(); 

}); 
draw(); 
}); 
</script> 
<style> 
td, th { 
border: 1px solid black; 
padding: 2px; 

#prev, #next { 
color: red; 
cursor: pointer; 

</style> 
</head> 
<body> 
<table> 
<tr><th>MS</th><th>パイロット</th></tr> 
<tr><td>RX-78-2ガンダム</td><td>アムロ・レイ</td></tr> 
<tr><td>Zガンダム</td><td>カミーユ・ビダン</td></tr> 
<tr><td>ガンダムMk-2</td><td>エマ・シーン</td></tr> 
<tr><td>ハンブラビ</td><td>ヤザン・ゲーブル</td></tr> 
<tr><td>ジ・O</td><td>パプテマス・シロッコ</td></tr> 
<tr><td>ZZガンダム</td><td>ジュドー・アーシタ</td></tr> 
<tr><td>νガンダム</td><td>アムロ・レイ</td></tr> 
<tr><td>サザビー</td><td>キャスバル・レム・ダイクン</td></tr> 
<tr><td>ユニコーンガンダム</td><td>バナージ・リンクス</td></tr> 
<tr><td>シナンジュ</td><td>フル・フロンタル</td></tr> 
<tr><td>クシャトリヤ</td><td>マリーダ・クルス</td></tr> 
<tr><td>バンシィ</td><td>リディ・マーセナス</td></tr> 
<tr><td>ローゼン・ズール</td><td>アンジェロ・ザウパー</td></tr> 
<tr><td>ロト</td><td>ダグザ・マックール</td></tr> 
<tr><td>ガンダムF91</td><td>シーブック・アノー</td></tr> 
<tr><td>クロスボーンガンダムX1</td><td>キンケドゥ・ナウ</td></tr> 
<tr><td>クロスボーンガンダムX2</td><td>ザビーネ・シャル</td></tr> 
<tr><td>フリーダム</td><td>キラ・ヤマト</td></tr> 
<tr><td>プロヴィデンス</td><td>ラウ・ル・クルーゼ</td></tr> 
<tr><td>デスティニー</td><td>シン・アスカ</td></tr> 
<tr><td>レジェンド</td><td>レイ・ザ・バレル</td></tr> 
<tr><td>ゴールドフレーム天ミナ</td><td>ロンド・ミナ・サハク</td></tr> 
<tr><td>ソードカラミティ</td><td>エドワード・ハレルソン</td></tr> 
<tr><td>ガンダムエクシア</td><td>刹那・F・セイエイ</td></tr> 
<tr><td>ガンダムサバーニャ</td><td>ロックオン・ストラトス</td></tr> 
<tr><td>ガンダムハルート</td><td>アレルヤ・ハプティズム</td></tr> 
<tr><td>ラファエルガンダム</td><td>ティエリア・アーデ</td></tr> 
</table> 
前へ 次へ 
</body> 
</html> 


サイトの見様見真似ですが、この中で一応ページング処理が出来ています。 
これをjspページにも導入したいのですが、それは可能なのでしょうか? 
そしてもし可能であるなら、方法を教えて頂けないでしょうか? 
どうかよろしくお願い致します。
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • K_S_

    2015/04/16 21:56

    コードの部分をちゃんとコードの表記にした方がわかりやすいですよ。
    編集時に「</>」というアイコンのボタンがありますので、それを押してください。
    以下のように書けば、非常に見やすくなるでしょう。

    ```lang-HTML
    <!DOCTYPE html> ...
    ```

    キャンセル

回答 1

checkベストアンサー

0

単に、tableの部分をjspを使って吐き出すようにすればそれで動くと思いますよ。

但し、ページング処理というのはデータを取得・転送するコストが嵩むのを避けるために行うモノなので、そもそもjQueryによるインチキページングじゃだなんじゃないですか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.06%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る