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

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があまり得意ではありません。
}

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


●質問者: xv1700
●カテゴリ:コンピュータ ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● TransFreeBSD
●100ポイント ベストアンサー

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


xv1700さんのコメント
ありがとうございます。 すばらしいです。 ただ、下記のように6件の場合[BACK][NEXT]の間に空きがでます。 これはどうしようもないですかね? data1 data2 data3 data4 data5 data6 [BACK][NEXT]

TransFreeBSDさんのコメント
変更してみました。 jquery.pager.jsの34行目にあるsizePanel()の呼び出しをコメントアウトしてください。 // かなり不要コードが出てるのでブラッシュアップしたい所ですがとりあえずそのままで...

xv1700さんのコメント
ありがとうございます。 大変すばらしいです。 sizePanel呼び出しとfunction sizePanel()をコメントアウトしました。 最後に最初と最後の[BACK][NEXT]の表示を消したいと試行錯誤しています。 できればここまでご教授していただけたらと思いますが、よろしくお願いします。

TransFreeBSDさんのコメント
変えておきました。highlight()に6行加わっています。 あと、いまさらなのですが、ライセンス的にjsdo.itに置いておくのはまずい気がするので、しばらくしたら消しておきます。 代わりにdiffはっておきます。 >|| --- jquery.pager.js2012-02-14 21:57:15.000000000 +0900 +++ jquery.pager2.js2012-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; }); }); -} +}; ||<

xv1700さんのコメント
実現できました。 ありがとうございました。 大変すばらしい、回答で感謝しています。完璧です。 100ptでは少なかった気がします。すみません、ありがとうございます。
関連質問

●質問をもっと探す●



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