人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

javascriptでのページングでの質問です。
得意ではないので簡単にご教授ください。
わかりずらいのでもう一度上げます。

図1(5件ずつ表示)
なまえ1
なまえ2
なまえ3
なまえ4
なまえ5
<back> <naxt>
現在は、20件ただたんに表示されています。
<back> <next>のonclick処理も記述頂くとありがたいです。

●呼び出し元
pager(data); //dataはなまえが入った配列です。

function pager(data) {
hoge = document.getElementById('hoge');

for( var i=0; i<=data.length; i++) {
hoge.appendChild(data[i]); //この関数で20件表示させています。
if ( ※ここがわかりません・・・) {
※5件ずつ表示??
※XXXXX.style.display = "none";で非表示にするまではわかりましたが・・・
}
}
}

●質問者: xv1700
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:hoge JavaScript ジン 教授 現在
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● いけまさ
●70ポイント ベストアンサー

エッセンスだけを書いてみました。

エラー処理等はしていないので、改良して使ってください。

http://www.google.co.jp/ (URLはダミー)

<html>
<head>
<script type="text/javascript">
 // Pagerクラスの定義
 function Pager(data, viewID, viewCount) {
 this.data = data;
 this.viewCount = viewCount;
 this.pageIndex = 1;
 this.maxPageIndex = Math.ceil(this.data.length / this.viewCount);
 this.view = document.getElementById(viewID);

 this.show(0); // 1ページ目を初期表示
 }

 // 表示内容をクリア
 Pager.prototype.clear = function() {
 while(this.view.lastChild){
 this.view.removeChild(this.view.lastChild);
 }
 }

 // ページング
 Pager.prototype.paging = function(step) {
 var i = this.pageIndex + step;
 this.pageIndex = i < 1 ? 1 : i > this.maxPageIndex ? this.maxPageIndex : i;
 }

 // ページ内容を表示
 Pager.prototype.show = function(step) {
 this.paging(step);
 this.clear();

 var viewData = this.data.slice((this.pageIndex-1)*this.viewCount, this.pageIndex*this.viewCount);
 for(var i = 0; i < viewData.length; i++) {
 var p = document.createElement('p');
 p.appendChild(document.createTextNode(viewData[i]));
 this.view.appendChild(p);
 }
 }

 // 戻る
 Pager.prototype.back = function() {
 this.show(-1);
 }

 // 進む
 Pager.prototype.next = function() {
 this.show(1);
 }

 function init() {
 // データ生成
 var data = [];
 for(var i = 0; i < 20; i++) data.push("なまえ" + (i+1));

 // Pager生成 (dateを、hogeに、5件ずつ表示)
 window.pager = new Pager(data, 'hoge', 5);
 }
</script>
</head>

<body onload="init()">
<div id="hoge"></div>
<form>
 <input type="button" value="back" onclick="pager.back()">
 <input type="button" value="next" onclick="pager.next()">
</form>
</body>
</html>
◎質問者からの返答

ありがとうございます。

さっそくカスタマイズして使用してみましたが、実際のdataに格納されている値はDIVで整形されているタグが配列で入っている状態です。すみません、書き忘れました。

for(var i = 0; i < viewData.length; i++) {

var p = document.createElement('p');

p.appendChild(document.createTextNode(viewData[i]));

this.view.appendChild(p);

}

の処理を少し書き換えればと思っているのですが、どのようにすればと試行錯誤中です。

もう少し、ご教授いただけたらと思います。


2 ● Mars
●26ポイント

jQueryを使ってます。ライブラリの使用とかがNGだったら失礼。

http://semooh.jp/jquery/

<html>
<head>
<title>さんぷる</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
var data = new Array();
for(i=1;i<21;i++) data.push('Name' + i);
// 上記2行は配列を用意しているだけ

pager('#result',data,5);//出力先、データ配列、表示数


function pager(result,data,pg){
jQuery.each(data,function(i,val){
var LI = $('<li>'+val+'</li>');
$(result).append(LI);
if(i>=pg) LI.hide();
});

function back(){
j=$(result+' li:visible:eq(0)').prev();
if(! j.size()) return;
$(result+' li:visible').hide();
for(i=0;i<pg && j;j=j.prev(),i++) j.show();
}
function next(){
j=$(result+' li:visible:last').next();
if(! j.size()) return;
$(result+' li:visible').hide();
for(i=0;i<pg && j;j=j.next(),i++) j.show();
}
$("input[value='back']").click(back);
$("input[value='next']").click(next);
}
});
</script>
</head>
<body>

<ul id="result"></ul>
<p>
<input type="button" value="back">
<input type="button" value="next">
</p>

</body>
</html>
◎質問者からの返答

ご回答ありがとうございます。

data の中がdivタグで整形されている状態ならどのようにすればよろしいですか?

もう少し、ご教授願います。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ