jQuery ページ遷移で表示する件数を変更したい

Question

###実現したいこと
jQueryでリンクを押下した際、表示される項目を変更したいと思っています。

現ページに全件の100件表示している状態から10件のみshow()で表示していて、
<a>タグのページ番号（例えば２）を押下した時に次の10件がずれて一番上に来たような実装というのは可能でしょうか？
いわゆる1~10件（１ページ目）をhide()し、11-20件（２ページ目）をshow()で表示、一番上に持ってくる。
ということをしたいです。

###ソースコード

list.php
<script type="text/javascript" src="/js/search.js"></script><!-- 検索結果一覧 -->


<!-- paging -->
  <div class="paging">
     <div class="number">
          1～20&nbsp;/&nbsp; 100 件</li>
     </div>
     <ul class="pagination">
          <li class="disabled"><span>&laquo;</span></li>
          <li class="active"><span>1</span></li>
          <li><a href="">2</a></li>
          <li><a href="">3</a></li>
          <li><a href="">4</a></li>
          <li><a href="" rel="next">&raquo;</a></li>
       </ul>
</div><!-- /paging -->

@foreach($items as $item)
   <li class="item"><a href="/?item={{ $item }}> </a>{{ $item }}</li>
@endforeach
                

100件は固定なので、１ページ辺り10件で表示させたいと思っています。

var n = 10;
var contents = $('.item');
$(contents).slice(n).hide();

上記のように１ページあたりに表示される件数は制御できたのですが2ページ目のリンク先で次の10件を先頭に表示させる実装方法がわかりませんでした。

###補足情報
プラグインは導入しない予定です。（Bootstrapを使用せず実装できるならやりたいですがその方法もわかりません、、）

よろしくお願いします。

私の質問内容が悪く、みなさまにページネーションの実装サンプルコードをご回答いただいてしまいました。
すみません。
実現したいこととして修正しましたのでお力いただければと思います。

Comments

[m.ts10806]

HTML部分はSmartyを導入しているのでしょうか？でしたらタグに追加しておくとSmarty的な書き方の解答も得られやすくなりますよ。

[m.ts10806]

また、JqueryではなくPHP側で予め絞り込んでおきQueryStringなどを使ってPHPで行う検索位置を変えるような方法は考えてはおられないでしょうか？

[yuuuui]

HTML部分はLaravelを導入していました。タグを追加しました。ありがとうございます。PHPで行う検索位置を変えるような方法は今のところ考えていません。

Answer 1

テストもしてないので、載せるのどうかなあと思いましたが。以下サンプル。
以下が理解難しいようであれば、もう少しjQueryやjavascriptを色々なサンプル
などを動かし変更しという風に勉強なされた方が良いかと思います。

下のサンプルもいちいち毎回取得したり、リムーブしたり毎回文字列からDOMObect

jQueryObject化してるので、重いしいくらでも改良きくかと。

.item{
   display:none;
}
.item.show{
   display:block;// 表示させたいDisplay形式で。
}

// メニューをWrapしてるUL
var $menuIndexList = $(".pagination");
// 現在選択中の状態を表すクラス名
var activeClazzName = "active";
// 表示させる数
var n = 10;
// 表示させるアイテム全て
var $allItem = $(".item");
// 表示させるアイテムに付与するクラス名
var showClazzName = "show";
// メニューがクリックされたときに発火するイベント
$menuIndexList.on("click","a",function(e){
   e.preventDefault();
  // 前回のアクティブ要素
  var $prevActive = $menuIndexList.find("."+$activeClazzName );
  // 前回のアクティブ状態解除
  $prevActive.removeClass(activeClazzName);
  // 前回のアクティブの選択要素内テキスト取得
 var prevActiveText = $prevActive.text().trim();
  // span hide
 $span =  $prevActive.children().remove();
  // aタグでラップして子要素へ
  $prevActive.append("<a href=''>"+prevActiveText +"</a>")
  // 今回の要素をアクティブ状態に
  var $clickedLink = $(this);
  // li要素をactiveに
  $clickedLink.parents("li").addClass(activeClazzName);
  // 選択要素テキスト取得
  var targetIndex = $clickedLink.text().trim();
 // 表示させる最初の要素番号計算
  var firstIndex =  targetIndex*(n-1);
  // 表示させる最後の要素番号計算
  var endIndex =  targetIndex*(n)-1;
 // いったん全部消す
  $allItem.removeClass(showClazzName);
 // アイテムを表示
  $allItem.slince(firstIndex , endIndex).addClass(showClazzName);
  // 選択された要素のa要素削除
  $clickedLink.children("a").remove();
  // spanで囲ってアペンド
  $clickedLink.append("<span>"+targetIndex +"</span>")
})

Comments

[yuuuui]

ご回答ありがとうございます。
私の質問の仕方が悪く、ページネーションの内容のご回答をいただいてしまいました。
すみません。
質問内容を編集しましたのでご確認をよろしくお願いします。
もっと勉強するように精進して参ります。

Answer 2

ページ内の遷移でしたらlocation.searchを利用して頭出しをするとよいでしょう
次のページに移る場合は普通のページング処理になると思います
（最初のページと最終ページに普通のリンクをはる感じでしょうか）

Comments

[yuuuui]

ご回答ありがとうございます。
私の質問の仕方が悪く、ページネーションの内容のご回答をいただいてしまいました。
すみません。
質問内容を編集しましたのでご確認をよろしくお願いします。

Answer 3

こんな感じではどうでしょうか。
一応、1ページの件数やトータルが変わっても対応できるようにはしたつもりです。

※本当はもっとかっこよくスマートに書きたいです・・・

 <div class="paging">
     <div class="number">
     </div>
     <ul class="pagination">
      </ul>
</div><!-- /paging -->
<ul id="list">

@foreach($items as $item)
   <li class="item"><a href="/?item={{ $item }}"> </a>{{ $item }}</li>
@endforeach
</ul>

var list = $("#list");
var pagelist = $(".pagination");
var page_cnt = 10;//1ページのデータ数
var total = 100;//全件数
var now = 1;//現在のページ番号

$(function(){
	$(window).on('load',function(){
		paging(1);
	});

	//ページャーリンククリック時の処理
	$(document).on('click',".pagination li a",function(){
		//非活性時は無視
		if($(this).attr("class") != "disabled"){
			//前ページ
			if($(this).attr("rel") == "prev"){
				paging(now-1);
			//次ページ
			}else if($(this).attr("rel") == "next"){
				paging(now+1);
			//指定ページ
			}else{
				paging(parseInt($(this).attr("rel")));
			}
		}
	});
});

//ページング処理を行う
function paging(page){
	now = page;//現在のページを保管

	//リストを全て隠す
	list.children("li").hide();
	//ページャーリンクは全てリセット
	pagelist.children("li").remove();
	//ページ数によるページリンクを作成
	p = Math.ceil(total/page_cnt);
	//前ページリンク
	if(page == 1){
		 li = "<li class=\"disabled\"><span>&laquo;</span></li>";
	}else{
		 li = "<li><a href=\"#!\" rel=\"prev\">&laquo;</a></li>";
	}
	pagelist.append( li );

	//各ページのリンク
	for(i=1;i<p;i++){
		if(page == i){
			 li = "<li class=\"active\"><span>"+i+"</span></li>";
		}else{
			 li = "<li><a href=\"#!\" rel=\""+i+"\">"+i+"</span></li>";
		}
		pagelist.append(li);
	}
	//次ページリンク
	if(page == (p-1)){
		 li = "<li class=\"disabled\"><span>&raquo;</span></li>";
	}else{
		 li = "<li><a href=\"#!\" rel=\"next\">&raquo</a></li>";
	}
	pagelist.append( li );

	//指定ページのスタート番号
	start = 1;
	if(page > 1){
		start = page*page_cnt+ 1;
	}
	//指定ページの最終番号
	end = start+page_cnt;

	//指定ページのリストを出力
	$("#list li").slice(start,end).fadeIn();

	//件数など補足情報表示
	$(".number").html(start+"～"+(end-1)+"&nbsp;/&nbsp; "+total+" 件</li>");
}

Comments

[m.ts10806]

「1ページの件数やトータルが変わっても対応」部分は蛇足ですのであくまでサンプルとして、状況に応じて取っ払ってもらって構いません。

[yuuuui]

ページネーションの詳しい実装ソースコードまでありがとうございます。
ページネーションの機能も使用したいのですが
現ページに全件の100件表示している状態から10件のみshow()で表示していて、
<a>タグのページ番号（例えば２）を押下した時に次の10件がずれて一番上に来たような実装というのは可能でしょうか？
いわゆる1~10件（１ページ目）をhide()し、11-20件（２ページ目）をshow()で表示、一番上に持ってくる。
ということをしたいです。
よろしくお願いします。

[m.ts10806]

私が理解したイメージが合っているか分かりませんが、hideとshowのところで要素のアニメーションでうまいことすれば出来ると思います。
下記辺りを参考にすればできそうです。
http://semooh.jp/jquery/api/effects/animate/params%2C+%5Bduration%5D%2C+%5Beasing%5D%2C+%5Bcallback%5D/
http://www.webopixel.net/javascript/507.html

[yuuuui]

ありがとうございます。アニメーションで移動させれるようにやってみます。
参考サイトもありがとうございました。

Answer 4

「先に分類（クラス付け）してしまう方法」です。ページネーション部については手抜き。
10要素づつ「item_1」「item_2」などのクラスが付くのでそれを使って表示を切り替えます。

<ul class="pagination">
	<li class="disabled"><span>&laquo;</span></li>
	<li class="active"><span>1</span></li>
	<li><a href="">2</a></li>
	<li><a href="">3</a></li>
	<li><a href="">4</a></li>
	<li><a href="">5</a></li>
	<li><a href="">6</a></li>
	<li><a href="">7</a></li>
	<li><a href="">8</a></li>
	<li><a href="">9</a></li>
	<li><a href="">10</a></li>
</ul>

// 未テスト
var count = 0;
$( '.item' ).each( function( i ) {
	if ( i % 10 === 0 ) {
		count++;
	}
	$( this ).addClass( 'item_' + count );
} );
$( '.pagination a' ).each( function( i ) {
	$( this ).attr( 'data-index', ++i ).on( 'click' function() {
		$( '.item' ).hide();
		$( '.pagination a' ).removeClass( 'active' );
		$( '.item' ).filter( '.item_' + $( this ).attr( 'data-index' ) ).show();
		$( this ).addClass( 'active' );
		return false;
	} );
} ).get( 0 ).click();

Comments

[yuuuui]

ご回答ありがとうございます。
私の質問の仕方が悪く、ページネーションの内容のご回答をいただいてしまいました。
すみません。
質問内容を編集しましたのでご確認をよろしくお願いします。

[kei344]

編集後に追記した内容に対応していますよ。「10要素づつ「item_1」「item_2」などのクラスが付くのでそれを使って表示を切り替えます。 」これで処理できますよ。試して動かないなら確認しますのでコメントをお願いします。

[yuuuui]

コメントありがとうございます。
試させていただきましたがURLに""がずっと追加され（リダイレクトがずっと走っているような）調べたところ.get( 0 ).click();最後の一文が原因でした。
その一文を削除し、再度確認をしたのですが２（２ページ目）を押下しても何も変わらず100件表示されていました。

宜しくお願い致します。

Answer 5

皆様に教えていただいた内容で頑張ってみたのですが期待する動作が行えず、

<ul class="item">
     <li class="item_1"><span>1</span></li>
     <li class="item_2"><a href="">2</a></li>
     <li class="item_3"><a href="">3</a></li>
     <li class="item_4"><a href="">4</a></li>
</ul>

    $('.item_1').on('click', function() {
        $('.item:visible').hide();
        $(".item:lt(25)").show();

    });

    $('.item_2').on('click', function() {
        $('.item_1 a').prop('disabled', true);
        $('.item:visible').hide();
        $(".item:gt(24):lt(25)").show();

                     ・
                     ・
                     ・

と続けて書くことにしました。ご協力ありがとうございました。