ドロップダウンリストでデータを絞り込んだものに、ページャーをつけたい

Question

店舗リストを掲載したいのですが、店舗数が多いのでエリアごとにプルダウンで絞り込みをしたいと思っています。
さらに、絞り込んだリストにページャーもつけたいとクライアントから言われています。

テストページで実験をしているのですが、プルダウンで絞り込み＋件数表示はできたものの、ページャーだけが絞り込む前の全件を対象としてしまって困っています。

こちらが実装したページです。
http://trip-paris.jp/test/

jquery、javascript初心者です。
よろしくお願いします。

実現したいこと

・プルダウンリストで店舗のエリアを絞る
・絞った後の件数を表示させる
・店舗数が多い場合はページャーを表示する（現在実験なので1ページ3件までに設定しています）

現象

ページャーの対象項目が全体を対象としてしまって、一項目目の「東京都」を常に1ページ目と認識している。
その為、東京以外の県を選択しても店舗が表示されない。

jquery

// プルダウン　絞り込み
$(".js-filter-form").on("change", function(){
  var selected = [];
  $(".js-filter-form :selected").each(function(){
    selected.push($(this).val()); // push()は配列に値を追加します
  });
  console.log(selected);

  var count = 0;
  $(".js-filter-items li").each(function(){
    var cat = $(this).data("cat");
    var is_exist = $.inArray( cat, selected ); // inArray()は配列内に値があるかどうかを調べます
    if (is_exist != -1) {
      $(this).removeClass("hidden");
      count++;
    } else {
      $(this).addClass("hidden");
    }
  });

  if (count) {
    var str = "<span>全" + count + "件</span>";
  } else {
    var str = "該当するアイテムはありません";
  }
  $(".js-filter-status").html(str);

});


// ページャー
$('.js-filter-items').pagination({
    itemElement : '> li',
    displayItemCount: 3,
    prevNextPageBtnMode: true,
    onePageOnlyDisplay: false,
    paginationClassName: 'pager',
    paginationInnerClassName: 'pager_inner',
    pageNumberClassName: 'pager_num'
});

pagenation.jsというプラグインを使用しています。
https://shanabrian.com/web/jquery/pagination.php

HTML

<section>
    <select name="type"  class="js-filter-form list_checkbox">
        <option value="">都道府県を選択してください</option>
        <option value="tokyo">東京都</option>
        <option value="kanagawa">神奈川県</option>
        <option value="saitama">埼玉県</option>
        <option value="chiba">千葉県</option>
    </select>

    <p class="js-filter-status text_status">全<span>件</span></p>
    <ul class="js-filter-items flex-wrap">
      <li data-cat="tokyo">東京都 店舗01</li>
      <li data-cat="tokyo">東京都 店舗02</li>
      <li data-cat="tokyo">東京都 店舗03</li>
      <li data-cat="tokyo">東京都 店舗04</li>
      <li data-cat="tokyo">東京都 店舗05</li>
      <li data-cat="tokyo">東京都 店舗06</li>
      <li data-cat="kanagawa">神奈川県 店舗01</li>
      <li data-cat="kanagawa">神奈川県 店舗02</li>
      <li data-cat="kanagawa">神奈川県 店舗03</li>
      <li data-cat="kanagawa">神奈川県 店舗04</li>
      <li data-cat="kanagawa">神奈川県 店舗05</li>
      <li data-cat="saitama">埼玉県 店舗01</li>
      <li data-cat="saitama">埼玉県 店舗02</li>
      <li data-cat="saitama">埼玉県 店舗03</li>
      <li data-cat="saitama">埼玉県 店舗03</li>
      <li data-cat="chiba">千葉県 店舗01</li>
      <li data-cat="chiba">千葉県 店舗02</li>
      <li data-cat="chiba">千葉県 店舗03</li>
      <li data-cat="chiba">千葉県 店舗04</li>
    </ul>
  </section>

Answer 1

絞り込み時に表示したくないli要素にhiddenクラスを設定しているかと思います。
これをpagination初期化時のitemElementパラメータに織り込めば表示を絞り込めます。配下のli要素のうち.hiddenでないものを対象とするセレクタは>li:not(.hidden)です。

絞り込んだ後にpaginationをもう一度実行すればよいのですが、すでに作成されているページャーがずっと残るので削除しておきましょう。

  $('.pager').remove(); // 既に存在するページャーの削除
  $('.js-filter-items').pagination({
      itemElement : '>li:not(.hidden)', // 配下のli要素のうち.hiddenでないものを対象とする

また、このままでは表示が崩れます。paginationがliタグに設定しているdisplayスタイルが一覧の表示に悪影響を及ぼします。(noneやlist-itemをpaginationがつけている）
絞り込み時にcssのdisplay要素を削除しておきましょう。

  $(".js-filter-items li").each(function(){
    （略）
    $(this).css("display","");  // paginationがつけたdisplay要素を削除する
  });

Comments

[mariko76]

ご丁寧な解答ありがとうございます！
jsに入れ込んでみたのですが、入れた場所が間違っているのか、うまくいかないのです…。
現在この状態なのですが、どこを修正したらいいでしょうか。お手数をおかけしてすみません。
http://trip-paris.jp/test/

[hope_mucci]

- cssを削除する処理は、removeClass("hidden")した要素だけではなく、すべての要素に行ってください。paginationのナンバリングが誤作動します。
- paginationを作り直している処理がありません。セレクトボックスをon(change)している処理の最後のほうにもう一回pagination作成処理を追加してください。

[mariko76]

無事に理想の動作にできました！
ご教示ありがとうございました、助かりました。