jQueryでページング処理をしたいと思います。

プラグイン(jquery.pager.js)での実装だと[BACK][NEXT]だけの表示はできますでしょうか?
できるならご教授ください。

できないと思い自作で作成しました。
[BACK][NEXT]のonclick処理も書いてもらうと助かります。
var data = [a,b,c];
for (var i=0; i<data.length; i++) {
hogeHtml = "<div>"+data[i]+"</div>";

$(document).ready(function(){
$("#hoge_list").html(hogeHtml);
});
 ※5件ずつ表示の処理を入れたいのですが、アクティブ以外は非表示
  jQueryがあまり得意ではありません。
}

ご教授よろしくお願いいたします。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2012/02/13 19:27:06
  • 終了:2012/02/14 18:56:13

ベストアンサー

id:TransFreeBSD No.1

TransFreeBSD回答回数668ベストアンサー獲得回数2682012/02/14 00:45:10

ポイント100pt

こんな感じでしょうか?
http://jsdo.it/TransFreeBSD/g4Dg
ページ番号の表示は空文字("")にしました。
コメントの機能はなかったのでjquery.pager.jsを変更して使っています。
http://jsdo.it/TransFreeBSD/jquery.pager2

他3件のコメントを見る
id:TransFreeBSD

変えておきました。highlight()に6行加わっています。
あと、いまさらなのですが、ライセンス的にjsdo.itに置いておくのはまずい気がするので、しばらくしたら消しておきます。
代わりにdiffはっておきます。

--- jquery.pager.js	2012-02-14 21:57:15.000000000 +0900
+++ jquery.pager2.js	2012-02-14 21:53:50.000000000 +0900
@@ -10,7 +10,7 @@
 		linkText: null,
 		linkWrap: null,
 		height: null
-	}
+	};
 	if(options) $.extend(settings, options);
 	
 		
@@ -23,7 +23,7 @@
 		
 		function init () {
 			size = $(clas, me).not(navid).size();
-			if(settings.height == null) {			
+			if(settings.height === null) {			
 				settings.height = getHighest();
 			}
 			if(size > 1) {
@@ -31,8 +31,8 @@
 				show();
 				highlight();
 			}			
-			sizePanel();
-			if(settings.linkWrap != null) {
+			// sizePanel();
+			if(settings.linkWrap !== null) {
 				linkWrap();
 			}
 		}
@@ -42,7 +42,7 @@
 			for(var i = 0; i < size; i++) {
 				var j = i+1;
 				str += '<a href="#" rel="'+j+'">';
-				str += (settings.linkText == null) ? j : settings.linkText[j-1];				
+				str += (settings.linkText === null) ? j : settings.linkText[j-1];				
 				str += '</a>';
 			}
 			str += '<a href="#" rel="next">'+settings.nextText+'</a>';
@@ -64,13 +64,22 @@
 		}
 		function show () {
 			$(me).find(clas).not(navid).hide();
-			var show = $(me).find(clas).not(navid).get(i);
-			$(show).show();
+			for (var j=i; j>=0; j--) {
+				var show = $(me).find(clas).not(navid).get(j);
+				$(show).show();
+			}
 		}		
 		function highlight () {
 			$(me).find(navid).find('a').removeClass(settings.highlightClass);
 			var show = $(me).find(navid).find('a').get(i+1);			
 			$(show).addClass(settings.highlightClass);
+			if(i + 1 == size) {
+				$($(me).find(navid).find('a').get(size+1)).hide();
+			} else if(i === 0) {
+				$($(me).find(navid).find('a').get(0)).hide();
+			} else {
+				$(me).find(navid).find('a').show();
+			}
 		}
 
 		function sizePanel () {
@@ -122,4 +131,4 @@
 			return false;
 		});
 	});	
-}
+};
2012/02/14 22:19:49
id:xv1700

実現できました。
ありがとうございました。
大変すばらしい、回答で感謝しています。完璧です。
100ptでは少なかった気がします。すみません、ありがとうございます。

2012/02/15 09:33:28
  • id:xv1700
    追加します。
    ページングは縦に表示したいと思います。
    はじめに5件 表示して [NEXT]を押すと 10件表示になります。
    プラス5件増えた縦に表示になることになります。

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

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

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

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