得意ではないので簡単にご教授ください。
わかりずらいのでもう一度上げます。
図１(５件ずつ表示）
なまえ１
なまえ２
なまえ３
なまえ４
なまえ５
<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 ( ※ここがわかりません・・・) {
※５件ずつ表示？？
※XXXXX.style.display = "none";で非表示にするまではわかりましたが・・・
}
}
}
No.1
3
1
70pt
エッセンスだけを書いてみました。
エラー処理等はしていないので、改良して使ってください。
http://www.google.co.jp/ (URLはダミー)
36
33
<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>
No.1
31
ここでベストアンサー
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>
ありがとうございます。
さっそくカスタマイズして使用してみましたが、実際の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);
}
の処理を少し書き換えればと思っているのですが、どのようにすればと試行錯誤中です。
もう少し、ご教授いただけたらと思います。
No.2
20320
26pt
jQueryを使ってます。ライブラリの使用とかがNGだったら失礼。
<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);
// 上記２行は配列を用意しているだけ
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タグで整形されている状態ならどのようにすればよろしいですか？
もう少し、ご教授願います。
いけまさ
2010/05/09 00:05:21
1
1
2
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);
}
の処理を少し書き換えればと思っているのですが、どのようにすればと試行錯誤中です。
もう少し、ご教授いただけたらと思います。