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";で非表示にするまではわかりましたが・・・
}
}
}

回答の条件
  • URL必須
  • 1人5回まで
  • 13歳以上
  • 登録:2010/05/07 21:36:06
  • 終了:2010/05/08 18:28:52

ベストアンサー

id:ikemasa No.1

いけまさ回答回数3ベストアンサー獲得回数12010/05/08 01:52:27

ポイント70pt

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

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

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>
id:xv1700

ありがとうございます。

さっそくカスタマイズして使用してみましたが、実際の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);

}

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

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

2010/05/08 14:19:47

その他の回答(1件)

id:ikemasa No.1

いけまさ回答回数3ベストアンサー獲得回数12010/05/08 01:52:27ここでベストアンサー

ポイント70pt

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

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

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>
id:xv1700

ありがとうございます。

さっそくカスタマイズして使用してみましたが、実際の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);

}

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

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

2010/05/08 14:19:47
id:Mars No.2

Mars回答回数203ベストアンサー獲得回数202010/05/08 10:56:16

ポイント26pt

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>
id:xv1700

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

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

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

2010/05/08 16:39:49
  • id:ikemasa
    data が div 要素の配列ということでしょうか?
    >||
    function init() {
    // データ生成
    var data = [];
    for(var i = 0; i < 20; i++) {
    var div = document.createElement('div');
    div.appendChild(document.createTextNode("なまえ" + (i+1)));
    data.push(div);
    }

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

    その場合は、単純に次のように記述します。
    >||
    var viewData = this.data.slice((this.pageIndex-1)*this.viewCount, this.pageIndex*this.viewCount);
    for(var i = 0; i < viewData.length; i++) {
    this.view.appendChild(viewData[i]);
    }
    ||<
  • id:xv1700
    ありがとうございます。
    data が div 要素の配列です。

    this.view.appendChild(viewData[i]);
    土曜に上記のように変更しました。
    確認といった意味でも同じだったので、安心しました。
    諸々とご教授ありがとうございました。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません