jQuery 絞り込みとページネーションの共存

いつもお世話になっております。

反応が明日になるかもしれませんが取り急ぎ質問させて頂きます。

実装したいこと

絞り込み検索

　自由記述タイプの検索ではなく「すべて」「東京」「大阪」「名古屋」のボタンがあって
そのボタンを押下すると下部のリストが絞り込まれる

ページネーション

　「すべて」「東京」「大阪」「名古屋」それぞれ検索結果が5つ以上の場合は
ページネーションが設置される

以上です。

絞り込み検索とページネーション、個々に作成はできたのですが
実装すると競合するのかページネーションは起動しますが、ボタンを押しても絞り込まれません。

ページネーションに使用しているのはjPagesです。
https://luis-almeida.github.io/jPages/

HTMLやCSS、JSはCodePenにて記載しましたのでご確認頂ければと思います。
https://codepen.io/uicco/pen/gOMMGVJ

※jPagesのCDNが見当たらなかったので直書きしてあり見辛いと思いますがご了承ください。

行動規範の内容に同意します

回答1件

ベストアンサー

jPagesは使用したことがないので、これが正解かはわかりません。
動作をみたところ、ページング（ページの切替）するとliタグに直接display:list-itemを書き込むため、
is-hideのcssが効かなくなります。なのでまず、is-hideを優先させるようにします。

css
1.is-hide {
2    display: none !important;
3}

次に、タブを切り替えた際に表示されているliタグの数が変わる為、ページネーションをリセットする必要があります。
jPagesにはjQureyのプラグインによくあるrefreshが用意されていない為、
一度、ページネーションを破棄(destroy)してから、もう一度作り直せば良いと思います。

javascript
1var searchItem = '.search_item';   // 絞り込む項目を選択するエリア
2var listItem = '.list_item';       // 絞り込み対象のアイテム
3var hideClass = 'is-hide';         // 絞り込み対象外の場合に付与されるclass名
4var activeClass = 'is-select';     // 選択中のグループに付与されるclass名
5
6$(function () {
7    // 絞り込みを変更した時
8    $(searchItem).on('click', function () {
9        $(searchItem).removeClass(activeClass);
10        var group = $(this).addClass(activeClass).data('group');
11        search_filter(group);
12    });
13    
14    setPagenation(); //ページネーションの初期化
15});
16
17/**
18 * リストの絞り込みを行う
19 * @param {String} group data属性の値
20 */
21function search_filter(group) {
22    // 非表示状態を解除
23    $(listItem).removeClass(hideClass);
24    destroyPagenation();// ページネーションの破棄
25    // 値が空の場合はすべて表示
26    if (group === '') {
27    		setPagenation(); //ページネーションの初期化
28        return;
29    }
30    // リスト内の各アイテムをチェック
31    for (var i = 0; i < $(listItem).length; i++) {
32        // アイテムに設定している項目を取得
33        var itemData = $(listItem).eq(i).data('group');
34        // 絞り込み対象かどうかを調べる
35        if (itemData !== group) {
36            $(listItem).eq(i).addClass(hideClass);
37        }
38    }
39    setPagenation(); //ページネーションの初期化
40}
41// ページネーションの破棄
42function destroyPagenation() {
43	$("#Information .holder").jPages("destroy");
44}
45// ページネーションの初期化を使いまわすので関数化
46function setPagenation() {
47  /* Info */
48    $("#Information .holder").jPages({
49        containerID: "InfoContainer",
50        perPage: 5,
51        startPage: 1,
52        startRange: 1,
53        midRange: 5,
54        endRange: 1
55    });
56}

投稿2020/10/20 01:20

storm3

総合スコア330

samiA

2020/10/20 01:43

ご回答ありがとうございます！なるほど、絞り込みが効かなくなる理由はCSSの優先順位に付随してたのですね。 jQueryのプラグインにはrefreshがよく用意されているのも初耳でした。勉強になります。実装してみると、絞り込みはできたのですが li.list_itemが5以上の際、「2ページ目以降」が生成されないようになってしまいました…