jQuery チェックボックスによる絞り込みとページネーションの組み合わせにおける不具合

Question

質問失礼いたします。

前提・実現したいこと

下記記事を参考に、絞り込み検索+ページネーションを作成しております。
https://teratail.com/questions/158985
上記とは違い複数条件での絞り込みを行いたく、
チェックボックスを用いているのですがページ数の値の取り方で苦戦しており..
ご教授頂けますと幸いです；

発生している問題

• ページネーションの表示数が変化しない

下記コードで、「カテゴリ1」のみ選択している場合はページ数は「1」となってほしいのですが
常に1、2と全ページ表示されてしまいます。

該当のソースコード

  <div class="serchBox">
    <div class="checkboxArea">
      <label for="small">
        <input type="checkbox" name="category" value="category1" id="category1" />カテゴリ1
      </label>
      <label for="middle">
        <input type="checkbox" name="category" value="category2" id="category2" />カテゴリ2
      </label>
      <label for="large">
        <input type="checkbox" name="category" value="category3" id="category3" />カテゴリ3
      </label>
    </div>
    <button id="reset">リセット</button>
  </div>

  <ul class="list">
    <li><p class="category"><span class="category1">カテゴリ1</span></p></li>
    <li><p class="category"><span class="category1">カテゴリ1</span></p></li>
    <li><p class="category"><span class="category1">カテゴリ1</span></p></li>
    <li><p class="category"><span class="category1">カテゴリ1</span></p></li>
    <li><p class="category"><span class="category1">カテゴリ1</span></p></li>
    <li><p class="category"><span class="category2">カテゴリ2</span></p></li>
    <li><p class="category"><span class="category2">カテゴリ2</span></p></li>
    <li><p class="category"><span class="category2">カテゴリ2</span></p></li>
    <li><p class="category"><span class="category2">カテゴリ2</span></p></li>
    <li><p class="category"><span class="category2">カテゴリ2</span></p></li>
    <li><p class="category"><span class="category3">カテゴリ3</span></p></li>
    <li><p class="category"><span class="category3">カテゴリ3</span></p></li>
    <li><p class="category"><span class="category3">カテゴリ3</span></p></li>
    <li><p class="category"><span class="category3">カテゴリ3</span></p></li>
    <li><p class="category"><span class="category3">カテゴリ3</span></p></li>
    <li><p class="category"><span class="category3">カテゴリ3</span></p></li>
    <li><p class="category"><span class="category3">カテゴリ3</span></p></li>
    <li><p class="category"><span class="category3">カテゴリ3</span></p></li>
  </ul>
  <ul id="pager"></ul>

var page_item_count = 10;//1ページ最大表示数
var page_num = 1;//ページ番号

$(function () {
  paging();
  
  //ページ切り替え
  $(document).on("click","#pager li",function(){
    page_num = $(this).data("page");
    paging();
  });
  
  
  $(function() {
    page_num = 1;
    
    $(document).on('change', '.serchBox input[type=checkbox]', function() {
      filter_list();
	});
    
    // リセットボタン
	$('#reset').on('click', function() {
      $('.serchBox input[type=checkbox]:checked').prop('checked', false);
      filter_list();
      paging();
	});
    
	
	// リストを絞り込む関数
	function filter_list() {
      var lists = $('.list li');
      lists.show();
      paging();
      
      // checkboxの絞り込み
      for (var i = 0; i < $('.serchBox .checkboxArea').length; i++) {

        var item = $('.serchBox .checkboxArea').eq(i).find('input:checkbox').attr('name');

        var target = [];
        $('[name=' + item + ']:checked').each(function() {
          target.push($(this).val());
        });
        
        if(target.length) {
          for (var j = 0; j < lists.length; j++) {

            var showCheck = false;
            for (var k = 0; k < target.length; k++) {
              if(lists.eq(j).find('.' + item).find('span').hasClass(target[k])) {
                showCheck = true;
              }
            }

            if(!showCheck) {
              lists.eq(j).hide();
            }
          };
        }
      }
    }
  });

  function display(){
    $(".list li").show();  

  }
  
  function paging(){
    display();
    var paging = $("#pager");
    paging.empty();
    var list_data = $(".list li:visible");
    var page_count = Math.ceil( list_data.length / page_item_count);
    for(var i = 1;i <= page_count;i++){
      var pg = $("<li></li>",{"text":i,"data-page":i})
      if(i == page_num){
        pg.addClass("active");
      }
      paging.append(pg);
    }
    
    var start = ((page_num-1)*page_item_count);
    var end = start + page_item_count-1;
    for(var i = 0;i < list_data.length;i++){
      if(start > i || end < i){
        $(list_data[i]).hide(); 
      }
    }
  }

});

補足情報

絞り込みは下記を参考にさせて頂いております。
http://cly7796.net/wp/javascript/implement-the-process-of-narrowing-down-the-list/

おそらく？ページ数をカウントするためのlist数が取得出来てないせいかと思うのですが、
どのように記述すればよいのかわからず...
まだまだjQuery勉強中のため、お見苦しい点が多々あるかと思いますが
何卒よろしくお願いいたします。

Comments

[cerfweb]

htmlに#pagerが見当たりませんが。

[salmonsalmon]

ご指摘ありがとうございます。
記載漏れがあり大変失礼しました；
#pager追記いたしました。

Answer 1

一旦全て表示させたところで:visibleをカウントしているのが原因です。
以下のように修正してみてください。

    function filter_list() {
        var lists = $('.list li');
        lists.show();
        // paging();    これを下へ移動

      // checkboxの絞り込み
        for (var i = 0; i < $('.serchBox .checkboxArea').length; i++) {
            // （中略）
        }

        paging();    // ここに移動
    }

    function paging(){
      // display();    削除（以下、省略）

Comments

[salmonsalmon]

ご連絡遅くなり申し訳ありません。ご回答いただきありがとうございます！
ご指摘頂きましたようにソースを修正したところ、ページングが挙動しなくなってしまい..；
お手数ですが下記コードご確認頂けますでしょうか；
※リセットボタン押下時、ページングが反映せずでしたので「paging();」外してみました。
--------------------------------------------------------------------------------
var page_item_count = 10;//1ページ最大表示数
var page_num = 1;//ページ番号

$(function () {
paging();

//ページ切り替え
$(document).on("click","#pager li",function(){
page_num = $(this).data("page");
paging();
});

$(function() {
page_num = 1;

$(document).on('change', '.serchBox input[type=checkbox]', function() {
filter_list();
});

// リセットボタン
$('#reset').on('click', function() {
$('.serchBox input[type=checkbox]:checked').prop('checked', false);
filter_list();
});

// リストを絞り込む関数
function filter_list() {
var lists = $('.list li');
lists.show();

// checkboxの絞り込み
for (var i = 0; i < $('.serchBox .checkboxArea').length; i++) {

var item = $('.serchBox .checkboxArea').eq(i).find('input:checkbox').attr('name');

var target = [];
$('[name=' + item + ']:checked').each(function() {
target.push($(this).val());
});

if(target.length) {
for (var j = 0; j < lists.length; j++) {

var showCheck = false;
for (var k = 0; k < target.length; k++) {
if(lists.eq(j).find('.' + item).find('span').hasClass(target[k])) {
showCheck = true;
}
}

if(!showCheck) {
lists.eq(j).hide();
}
};
}
}
paging();
}
});

function display(){
$(".list li").show();

}

function paging(){
var paging = $("#pager");
paging.empty();
var list_data = $(".list li:visible");
var page_count = Math.ceil( list_data.length / page_item_count);
for(var i = 1;i <= page_count;i++){
var pg = $("<li></li>",{"text":i,"data-page":i})
if(i == page_num){
pg.addClass("active");
}
paging.append(pg);
}

var start = ((page_num-1)*page_item_count);
var end = start + page_item_count-1;
for(var i = 0;i < list_data.length;i++){
if(start > i || end < i){
$(list_data[i]).hide();
}
}
}

});

[cerfweb]

#pager li をクリックした時の動作ですが、paging(); じゃなくてfilter_list(); ですね。
あと、$(function(){...}の中に$(function(){...}がありますが、最初の1回だけで全部を括って、中のやつは削除しましょう。コードを少し整理した方がいいかもしれません。