質問編集履歴

4 修正

退会済みユーザー

退会済みユーザー

2020/03/20 23:48  投稿

jQueryの絞り込み検索にページ送り機能を追加したい
質問質問質問質問質問
初めまして。JS初心者です。
下記サイトを参考にjQueryの絞り込み検索(カテゴリ間はAND検索、カテゴリ内はOR検索)までお陰様で問題なく実装することができました。この状態にページ送り機能を追加したいです。
https://teratail.com/questions/119008
**●実現したいこと**
・常に3件表示にしたい(チェックボックスまたはリセットボタンをクリック後に3件表示になるよう調整済み)
・例えば「a-1」「a-2」のチェックボックスを選択した場合、「1,3,4,6,7,9,10,12」が絞り込まれます。
「1,3,4」→ページ送り→「6,7,9」→ページ送り→「10,12」
「10,12」→ページ戻し→「6,7,9」ページ戻し→「1,3,4」
となるようにしたい
https://codepen.io/anon/pen/PvXrZZ
どなたか方法をご教示いただけますと幸いです。
何卒よろしくお願い申し上げます。
質問質問質問質問質問質問質問質問質問質問質問質問質問質問質問
  • JavaScript

    31769 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    11938 questions

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

3

退会済みユーザー

退会済みユーザー

2019/06/02 23:58  投稿

jQueryの絞り込み検索にページ送り機能を追加したい
初めまして。JS初心者です。
下記サイトを参考にjQueryの絞り込み検索(カテゴリ間はAND検索、カテゴリ内はOR検索)までお陰様で問題なく実装することができました。この状態にページ送り機能を追加したいです。
https://teratail.com/questions/119008
**●実現したいこと**
・絞り込み結果が3件以下の場合はページャーは非表示にしたい
・ページを開いたときはデフォルトで3件表示にしたい(チェックボックスまたはリセットボタンをクリック後に3件表示になるよう調整済み)
・常に3件表示にしたい(チェックボックスまたはリセットボタンをクリック後に3件表示になるよう調整済み)
・例えば「a-1」「a-2」のチェックボックスを選択した場合、「1,3,4,6,7,9,10,12」が絞り込まれます。
「1,3,4」→ページ送り→「6,7,9」→ページ送り→「10,12」
「10,12」→ページ戻し→「6,7,9」ページ戻し→「1,3,4」
となるようにしたい
https://codepen.io/anon/pen/PvXrZZ
どなたか方法をご教示いただけますと幸いです。
何卒よろしくお願い申し上げます。
  • JavaScript

    31769 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    11938 questions

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

2 概要変更

退会済みユーザー

退会済みユーザー

2019/06/02 20:56  投稿

初めまして。JS初心者です。
下記サイトを参考にjQueryの絞り込み検索(カテゴリ間はAND検索、カテゴリ内はOR検索)までお陰様で問題なく実装することができました。この状態にページ送り機能を追加したいです。
https://teratail.com/questions/119008
**●実現したいこと**
・絞り込み結果が3件以下の場合はページャーは非表示にしたい
・ページを開いたときはデフォルトで3件表示にしたい(チェックボックスまたはリセットボタンをクリック後に3件表示になるよう調整済み)
・例えば「a-1」「a-2」のチェックボックスを選択した場合、「1,3,4,6,7,9,10,12」が絞り込まれます。
「1,3,4」→ページ送り→「6,7,9」→ページ送り→「10,12」
「10,12」→ページ戻し→「6,7,9」ページ戻し→「1,3,4」
となるようにしたい
https://codepen.io/anon/pen/PvXrZZ
どなたか方法をご教示いただけますと幸いです。
何卒よろしくお願い申し上げます。
  • JavaScript

    31769 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    11938 questions

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

1 概要を変更いたしました

退会済みユーザー

退会済みユーザー

2019/06/02 20:53  投稿

jQueryの絞り込み検索とページ送り機能併用による不具合
初めまして。JS初心者です。
https://teratail.com/questions/119008
どなたか解決策をご教示いただけますと幸いです。
何卒よろしくお願い申し上げます。
**●実現したいこと**
・絞り込み結果が3件以下の場合はページャーは非表示にしたい
・ページを開いたときはデフォルトで3件表示にしたい(チェックボックスまたはリセットボタンをクリック後に3件表示になるよう調整済み)
・例えば「a-1」「a-2」のチェックボックスを選択した場合、「1,3,4,6,7,9,10,12」が絞り込まれます。
「1,3,4」→ページ送り→「6,7,9」→ページ送り→「10,12」
「10,12」→ページ戻し→「6,7,9」ページ戻し→「1,3,4」
となるようにしたい
**●問題点**
・絞り込まなければ、ページ送りは問題なく動作可能
![イメージ説明](5ca1efb37a8c130ed2e313287ad75399.png)
https://codepen.io/anon/pen/PvXrZZ
・絞り込みをすると、ページ送りのデフォルト表示件数(例の場合は3件)が無視され表示される
![イメージ説明](856fd6406eb5f8cba7d4fbca328ae561.png)
・リセットボタンを押すと、ページ送りのデフォルト表示件数(例の場合は3件)が無視され表示される
![イメージ説明](16410cec900f5d9ade0cbc435cbd08ee.png)
**●実現したいこと**
絞り込みまたはリセット後もページ送りのデフォルト表示件数(例の場合は3件)を維持したまま表示し、ページ送りをしたい
```
<body>
<form>
 <div id="select">
   <!--all(ページリロード)ボタン-->
   <input type="button" value="選択を解除する" onclick="allselect()">
   
   <!--検索-->
   <div id="category1">
     <label for="a-1">
       <input type="checkbox" id="a-1">
       a-1</label>
     <label for="a-2">
       <input type="checkbox" id="a-2">
       a-2</label>
     <label for="a-3">
       <input type="checkbox" id="a-3">
       a-3</label>
   </div>
   <div id="category2">
     <label for="b-1">
       <input type="checkbox" id="b-1">
       b-1</label>
     <label for="b-2">
       <input type="checkbox" id="b-2">
       b-2</label>
     <label for="b-3">
       <input type="checkbox" id="b-3">
       b-3</label>
   </div>
   <div id="category3">
     <label for="c-1">
       <input type="checkbox" id="c-1">
       c-1</label>
     <label for="c-2">
       <input type="checkbox" id="c-2">
       c-2</label>
     <label for="c-3">
       <input type="checkbox" id="c-3">
       c-3</label>
   </div>
 </div>
</form>
<!--検索結果-->
<div class="result">
 <ul>
   <li class="a-1 b-2 c-3">a-1 b-2 c-3</li>
   <li class="a-3 b-1 c-2">a-3 b-1 c-2</li>
   <li class="a-2 b-3 c-1">a-2 b-3 c-1</li>
   <li class="a-1 b-2 c-3">a-1 b-2 c-3</li>
   <li class="a-3 b-1 c-2">a-3 b-1 c-2</li>
   <li class="a-2 b-3 c-1">a-2 b-3 c-1</li>
 </ul>
 <div class="pager"></div>
</div>
<script>
$(function() {
   $('.result ul li').pagination({
       pager       : $('.pager'),
       prevText    : '<',
       nextText    : '>',
       firstText   : '≪',
       lastText    : '≫',
       viewNum     : 3,
       pagerNum    : 3,
       ellipsis    : false,
       linkInvalid : true,
       goTop       : true,
       firstLastNav : true,
       prevNextNav : false
   });
});
</script>
<script>
   function allselect() {
 $('.result ul li').show();
 $('#select input[type="checkbox"]').prop('checked', false);
}
</script>
</body>
```
```
$(function () {
   $('[type=checkbox]').on('change', function () {
       if ($('#category1,#category2,#category3').find('[type=checkbox]:checked').length == 0) {
           $('.result ul li').show();
       } else {
           var myList = [];
           ["category1", "category2", "category3"].forEach(function (x) {
               if ($('#' + x + ' [type=checkbox]:checked').length > 0) {
                   myList.push($('#' + x + ' [type=checkbox]:checked').map(function () {
                       return '.' + $(this).attr('id');
                   }).get());
               }
           });
           var classList = [];
           for (var i = 0; i < myList.length; i++) {
               if (classList.length == 0) classList = myList[i];
               if (i >= myList.length - 1) break;
               var tmp = [];
               for (var j = 0; j < classList.length; j++) {
                   for (var k = 0; k < myList[i + 1].length; k++) {
                       tmp.push(classList[j] + myList[i + 1][k]);
                   }
               }
               classList = tmp;
           }
           $('.result ul li').hide().filter(classList.join(",")).show();
       }
   }).eq(0).trigger('change');
   $("input[type=checkbox]").change(function () {
       $("input[type=checkbox]").each(function () {
           if ($(this).is(":checked")) {
               $(this).parent().addClass("selected");
           } else {
               $(this).parent().removeClass("selected");
           }
       });
   });
   
});
```
```
$.fn.pagination = function(config) {
   // オプション
   var o = $.extend({
       pager       : $('.pager'),
       prevText    : 'prev',
       nextText    : 'next',
       firstText   : 'first',
       lastText    : 'last',
       ellipsisText : '…',
       viewNum     : 3,
       pagerNum    : 3,
       ellipsis    : true,
       linkInvalid : false,
       goTop       : true,
       firstLastNav : true,
       prevNextNav : true
   }, config);
   // セレクタ
   var $element = $(this);
   var $pager = o.pager;
   if(o.ellipsis){
       var $ellipsisFirst= $('<span class="ellipsis"/>').text(o.ellipsisText);
       var $ellipsisLast= $('<span class="ellipsis"/>').text(o.ellipsisText);
   }
   // 値取得
   var tatalItemNum =$element.length;
   var tatalpageNum = Math.ceil(tatalItemNum /o.viewNum);
   var ellipsisFlag = false;
   // 変数設定
   var currentIndex = 0;
   // 省略記号フラグ判定
   if(tatalpageNum > o.pagerNum) { ellipsisFlag = true;}
   // ページャーの生成
   for (var i=0; i < tatalpageNum; i++) {
       $('<span/>').text(i + 1).appendTo($pager);
   };
   if(o.firstLastNav){
       $('<span class="prev"/>').text(o.prevText).prependTo($pager);
       $('<span class="next"/>').text(o.nextText).appendTo($pager);
   }
   if(o.prevNextNav){
       $('<span class="first"/>').text(o.firstText).prependTo($pager);
       $('<span class="last"/>').text(o.lastText).appendTo($pager);
   }
   var $pagerInner = $pager.find('span').not('.prev, .next, .first, .last');
   // コンテンツの初期表示
   $element.hide();
   for (var i=0; i < o.viewNum; i++) {
       $($element[i]).show();
   };
   // ページャーの初期表示
   $pagerInner.hide();
   for (var i=0; i < o.pagerNum; i++) {
       $($pagerInner[i]).show();
   };
   $($pagerInner[0]).addClass('current');
   if (o.linkInvalid) {
       $('.prev').addClass('invalid');
       $('.first').addClass('invalid');
   }
   if(o.ellipsis) {
       if(ellipsisFlag){
           if(tatalpageNum - o.pagerNum > 1) {
               $($pagerInner[tatalpageNum-1]).before(function() {
                 return $ellipsisLast;
               });
           }
           $($pagerInner[tatalpageNum-1]).show();
       }
   }
   // 最初のボタンをクリック
   $('.first').on('click', function(){
       var current = 0;
       if(currentIndex == 0){
           if (o.linkInvalid) {
               return false;
           }
       }
       change(current);
   });
   // 最後のボタンをクリック
   $('.last').on('click', function(){
       var current = tatalpageNum - 1;
       if(currentIndex == $pagerInner.length-1){
           if (o.linkInvalid) {
               return false;
           }
       }
       change(current);
   });
   // 前のボタンをクリック
   $('.prev').on('click', function(){
       var current = currentIndex - 1;
       if(currentIndex == 0){
           if (o.linkInvalid) {
               return false;
           } else {
               current = currentIndex;
           }
       }
       change(current);
   });
   // 次のボタンをクリック
   $('.next').on('click', function(){
       var current = currentIndex + 1;
       if(currentIndex == $pagerInner.length-1){
           if (o.linkInvalid) {
               return false;
           } else {
               current = currentIndex;
           }
       }
       change(current);
   });
   // 番号をクリック
   $pagerInner.each(function (current) {
       $(this).on('click', function(){
           if($(this).hasClass('current')){
               if (o.linkInvalid) {
                   return false;
               }
           }
           change(current);
       });
   });
   // 切り替え実行
   var change = function (current) {
       // コンテンツの表示
       $element.hide();
       for(var i = (current * o.viewNum) ; i < ((current + 1) * o.viewNum) ; i++){
           $($element[i]).show();
       }
       // ページャーの表示
       $pagerInner.hide();
       if(o.ellipsis) {
           if(ellipsisFlag){
               $ellipsisFirst.remove();
               $ellipsisLast.remove();
           }
       }
       var num = current -1;
       if(num > (tatalpageNum - o.pagerNum)){
           num = tatalpageNum - o.pagerNum;
       }
       for(var i = num ; i < (num + o.pagerNum) ; i++){
               $($pagerInner[i]).show();
       };
       // 省略記号の表示
       if(o.ellipsis) {
           if(ellipsisFlag){
               // 前の省略記号
               $($pagerInner[0]).show();
               if(num > 1){
                       $($pagerInner[0]).after(function() {
                         return $ellipsisFirst;
                       });
               }
               // 後ろの省略記号
               if(num < (tatalpageNum - o.pagerNum -1)) {
                   $($pagerInner[tatalpageNum -1]).before(function() {
                     return $ellipsisLast;
                   });
               }
               $($pagerInner[tatalpageNum -1]).show();
           }
       }
       // 現在位置設定
       currentIndex = current;
       // デザイン
       $pagerInner.removeClass('current');
       $($pagerInner[current]).addClass('current');
       if (o.linkInvalid) {
           if(current == 0 ) {
               $('.prev').addClass('invalid');
               $('.first').addClass('invalid');
           } else {
               $('.prev').removeClass('invalid');
               $('.first').removeClass('invalid');
           }
           if(current == tatalpageNum - 1 ) {
               $('.next').addClass('invalid');
               $('.last').addClass('invalid');
           } else {
               $('.next').removeClass('invalid');
               $('.last').removeClass('invalid');
           }
       }
       if(o.goTop){
           $('html,body').scrollTop(0);
       }
   }
}
```
どなたか方法をご教示いただけますと幸いです。
何卒よろしくお願い申し上げます。
  • JavaScript

    31769 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    11938 questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る