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

javascript での ページング処理について質問です。
得意ではないので簡単な処理でお願いします。

data[20] の データを持っています。5件ずつ表示していきたいと思います。
function hoge1(max) {
hoge.document.createElement('div');
for ( i=0; i<MAX; i++) {
if (?????) { ← どうすれば??
hoge.style.display = 'none';
}
hoge.appendChild(sidebarEntry);
}
}
それと onclickで(next 5)(back 5) などでのfunctionもつけてご教授いただけたら
ありがたいです。
ちょっとお手上げ状態なのでよろしくお願いします。


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

▽最新の回答へ

1 ● f-ikesan
●27ポイント

ささっと書いたものですので、「考え方が変、リファクタリングの余地が多々ある」など色々あるかと思いますが、ご了承ください。

タグを半角に置き換えて使用してください。

<html>

<head>

<script language="JavaScript" type="text/JavaScript">

<!--

var data = Array("t1","t2","t3","t4","t5","t6","t7","t8","t9","t10","t11","t12","t13","t14","t15","t16","t17","t18","t19","t20");

var w = 5; // 1ページに表示させる項目数

var bs = 0;

var be = 0;

var ns = 0;

var ne = 0;

function page( s, e ) {

var rlt = "";

for( var i=s; i<=e; i++) {

rlt += data[i] + "<br>";

}

document.getElementById("main").innerHTML = rlt;

(s-w)<0? bs = 0 : bs = s-w;

(s-1)<0? be = w-1 : be = s-1;

ns = e+1;

(e+w)>data.length? ne = data.length-1 : ne = e+w;

var eleBack = document.getElementById("back");

if( s == 0) {

eleBack.style.display = "none";

} else {

eleBack.style.display = "inline";

}

var eleNext = document.getElementById("next");

if( e == data.length-1) {

eleNext.style.display = "none";

} else {

eleNext.style.display = "inline";

}

}

window.onload = function() {

page(0, w-1);

}

//-->

</script>

</head>

<body>

<div id="main"></div>

<span id="back"><a href="#" onClick="page(eval('bs'), eval('be'))">back</a> </span>

<span id="next"><a href="#" onClick="page(eval('ns'), eval('ne'))">next</a></span>

</body>

</html>

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

◎質問者からの返答

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

一列で表示させるところまでは行ったのですが・・・・

(s-w)<0? bs = 0 : bs = s-w;

(s-1)<0? be = w-1 : be = s-1;

ns = e+1;

(e+w)>data.length? ne = data.length-1 : ne = e+w;

上記は何をしているのか理解できませんでした。申し訳ないです。

図1(5件ずつ表示)

なまえ1

なまえ2

なまえ3

なまえ4

なまえ5

<back> <naxt>

現在は、20件ただたんに表示されています。

もう少しご教授いただけたら幸いです。


2 ● f-ikesan
●27ポイント

(s-w)<0? bs = 0 : bs = s-w;

(s-1)<0? be = w-1 : be = s-1;

ns = e+1;

(e+w)>data.length? ne = data.length-1 : ne = e+w;


下記のように書きかえることが出来ます。

表示対象のデータが格納されている配列の添え字の範囲(今回は0?19)を超えないように制御しています。


if( (s-w)<0 ) {

bs = 0;

} else {

bs = s-w;

}


if( (s-1)<0 ) {

be = w-1;

} else {

be = s-1;

}


ns = e+1;


if( (e+w)>data.length ) {

ne = data.length-1;

} else {

ne = e+w;

}


始めのは「三項演算子」という書き方です。

用途にもよると思いますが、可読性が良くなりますので、覚えておいて損はないかと思います。

http://ja.wikibooks.org/wiki/JavaScript_If%E6%96%87%E3%81%AE%E5%...

◎質問者からの返答

なるほど。

ありがとうございます。

それと、先ほどのロジックなのですが、htmlに

<script type="text/javascript" language="JavaScript" src="/js/hoge.js"></script>

とし呼ぶ形をとっています。

5件表示されましたが

next と back のonclickが動作してくれません。

html側でのonclickの際に何か別の方法はありますでしょうか?

すみません、試行錯誤しておりまして。

ご教授のほどお願いします。


3 ● f-ikesan
●26ポイント ベストアンサー

外部jsファイルには、どのような記述をしてあるのでしょうか?

またnext と back が動作しないとはエラーが出ているのでしょうか?


一番始めに回答させていただいたコードのJavaScriptのコードのみを外部jsファイルに抜粋して

検証しましたが問題ありませんでした。


現在使用しているコードを掲載してくだされば、原因がすぐにわかるかと思います。


ダミー:http://www.google.co.jp/

◎質問者からの返答

ありがとうございます。

ページング処理が可能になりました。

最後にひとつだけご教授いただきたいのですが

next と back を inputタグに変更しまして

初期表示でbackを非表示にnextをいれたときに表示などしていきたいのですが・・・

どのようにすればよろしいでしょうか?

関連質問


●質問をもっと探す●



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