質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

Q&A

解決済

5回答

4929閲覧

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

yuuuui

総合スコア59

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

0グッド

0クリップ

投稿2017/06/15 03:45

編集2017/06/15 08:28

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

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

###ソースコード

php

1list.php 2<script type="text/javascript" src="/js/search.js"></script><!-- 検索結果一覧 --> 3 4 5<!-- paging --> 6 <div class="paging"> 7 <div class="number"> 8 120&nbsp;/&nbsp; 100</li> 9 </div> 10 <ul class="pagination"> 11 <li class="disabled"><span>&laquo;</span></li> 12 <li class="active"><span>1</span></li> 13 <li><a href="">2</a></li> 14 <li><a href="">3</a></li> 15 <li><a href="">4</a></li> 16 <li><a href="" rel="next">&raquo;</a></li> 17 </ul> 18</div><!-- /paging --> 19 20@foreach($items as $item) 21 <li class="item"><a href="/?item={{ $item }}> </a>{{ $item }}</li> 22@endforeach 23

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

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

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

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

よろしくお願いします。

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2017/06/15 04:08

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

2017/06/15 04:16

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

2017/06/15 04:58

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

回答5

0

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

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

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

CSS

1.item{ 2 display:none; 3} 4.item.show{ 5 display:block;// 表示させたいDisplay形式で。 6}

javascript

1// メニューをWrapしてるUL 2var $menuIndexList = $(".pagination"); 3// 現在選択中の状態を表すクラス名 4var activeClazzName = "active"; 5// 表示させる数 6var n = 10; 7// 表示させるアイテム全て 8var $allItem = $(".item"); 9// 表示させるアイテムに付与するクラス名 10var showClazzName = "show"; 11// メニューがクリックされたときに発火するイベント 12$menuIndexList.on("click","a",function(e){ 13 e.preventDefault(); 14 // 前回のアクティブ要素 15 var $prevActive = $menuIndexList.find("."+$activeClazzName ); 16 // 前回のアクティブ状態解除 17 $prevActive.removeClass(activeClazzName); 18 // 前回のアクティブの選択要素内テキスト取得 19 var prevActiveText = $prevActive.text().trim(); 20 // span hide 21 $span = $prevActive.children().remove(); 22 // aタグでラップして子要素へ 23 $prevActive.append("<a href=''>"+prevActiveText +"</a>") 24 // 今回の要素をアクティブ状態に 25 var $clickedLink = $(this); 26 // li要素をactiveに 27 $clickedLink.parents("li").addClass(activeClazzName); 28 // 選択要素テキスト取得 29 var targetIndex = $clickedLink.text().trim(); 30 // 表示させる最初の要素番号計算 31 var firstIndex = targetIndex*(n-1); 32 // 表示させる最後の要素番号計算 33 var endIndex = targetIndex*(n)-1; 34 // いったん全部消す 35 $allItem.removeClass(showClazzName); 36 // アイテムを表示 37 $allItem.slince(firstIndex , endIndex).addClass(showClazzName); 38 // 選択された要素のa要素削除 39 $clickedLink.children("a").remove(); 40 // spanで囲ってアペンド 41 $clickedLink.append("<span>"+targetIndex +"</span>") 42})

投稿2017/06/15 04:32

編集2017/06/15 04:33
kanimaru

総合スコア1013

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yuuuui

2017/06/15 08:45

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

0

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

投稿2017/06/15 04:08

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yuuuui

2017/06/15 08:45

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

0

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

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

HTML

1 <div class="paging"> 2 <div class="number"> 3 </div> 4 <ul class="pagination"> 5 </ul> 6</div><!-- /paging --> 7<ul id="list"> 8 9@foreach($items as $item) 10 <li class="item"><a href="/?item={{ $item }}"> </a>{{ $item }}</li> 11@endforeach 12</ul> 13

javascript

1var list = $("#list"); 2var pagelist = $(".pagination"); 3var page_cnt = 10;//1ページのデータ数 4var total = 100;//全件数 5var now = 1;//現在のページ番号 6 7$(function(){ 8 $(window).on('load',function(){ 9 paging(1); 10 }); 11 12 //ページャーリンククリック時の処理 13 $(document).on('click',".pagination li a",function(){ 14 //非活性時は無視 15 if($(this).attr("class") != "disabled"){ 16 //前ページ 17 if($(this).attr("rel") == "prev"){ 18 paging(now-1); 19 //次ページ 20 }else if($(this).attr("rel") == "next"){ 21 paging(now+1); 22 //指定ページ 23 }else{ 24 paging(parseInt($(this).attr("rel"))); 25 } 26 } 27 }); 28}); 29 30//ページング処理を行う 31function paging(page){ 32 now = page;//現在のページを保管 33 34 //リストを全て隠す 35 list.children("li").hide(); 36 //ページャーリンクは全てリセット 37 pagelist.children("li").remove(); 38 //ページ数によるページリンクを作成 39 p = Math.ceil(total/page_cnt); 40 //前ページリンク 41 if(page == 1){ 42 li = "<li class=\"disabled\"><span>&laquo;</span></li>"; 43 }else{ 44 li = "<li><a href=\"#!\" rel=\"prev\">&laquo;</a></li>"; 45 } 46 pagelist.append( li ); 47 48 //各ページのリンク 49 for(i=1;i<p;i++){ 50 if(page == i){ 51 li = "<li class=\"active\"><span>"+i+"</span></li>"; 52 }else{ 53 li = "<li><a href=\"#!\" rel=\""+i+"\">"+i+"</span></li>"; 54 } 55 pagelist.append(li); 56 } 57 //次ページリンク 58 if(page == (p-1)){ 59 li = "<li class=\"disabled\"><span>&raquo;</span></li>"; 60 }else{ 61 li = "<li><a href=\"#!\" rel=\"next\">&raquo</a></li>"; 62 } 63 pagelist.append( li ); 64 65 //指定ページのスタート番号 66 start = 1; 67 if(page > 1){ 68 start = page*page_cnt+ 1; 69 } 70 //指定ページの最終番号 71 end = start+page_cnt; 72 73 //指定ページのリストを出力 74 $("#list li").slice(start,end).fadeIn(); 75 76 //件数など補足情報表示 77 $(".number").html(start+"~"+(end-1)+"&nbsp;/&nbsp; "+total+" 件</li>"); 78} 79

投稿2017/06/15 06:31

編集2017/06/15 07:01
m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2017/06/15 06:54 編集

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

2017/06/15 08:26

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

2017/06/15 09:27

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

0

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

HTML

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

JavaScript

1// 未テスト 2var count = 0; 3$( '.item' ).each( function( i ) { 4 if ( i % 10 === 0 ) { 5 count++; 6 } 7 $( this ).addClass( 'item_' + count ); 8} ); 9$( '.pagination a' ).each( function( i ) { 10 $( this ).attr( 'data-index', ++i ).on( 'click' function() { 11 $( '.item' ).hide(); 12 $( '.pagination a' ).removeClass( 'active' ); 13 $( '.item' ).filter( '.item_' + $( this ).attr( 'data-index' ) ).show(); 14 $( this ).addClass( 'active' ); 15 return false; 16 } ); 17} ).get( 0 ).click();

投稿2017/06/15 05:22

編集2017/06/15 09:29
kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yuuuui

2017/06/15 08:45

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

2017/06/15 09:16

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

2017/06/15 09:26

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

0

自己解決

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

html

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

JavaScript

1 2 $('.item_1').on('click', function() { 3 $('.item:visible').hide(); 4 $(".item:lt(25)").show(); 5 6 }); 7 8 $('.item_2').on('click', function() { 9 $('.item_1 a').prop('disabled', true); 10 $('.item:visible').hide(); 11 $(".item:gt(24):lt(25)").show(); 12 13141516

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

投稿2017/06/23 11:40

編集2017/06/23 11:41
yuuuui

総合スコア59

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問