絞り込み検索（ソート）にページネーションを付けたい。

実現したいこと

▼参考ページ
https://cly7796.net/blog/javascript/implement-the-process-of-narrowing-down-the-list/?unapproved=105297&moderation-hash=b3c2ae97d4f6ebcee87bb106f5a4f0f8#comment-105297

発生している問題

絞り込み検索（ソート）にページネーションを付けたいが
うまく連動しません。
例えば、「種類を選択」→「哺乳類」で検索すると
１ページ目はきちんと絞り込まれていますが、
２ページ以降は該当していないものが表示されてしまいます。

ページネーションプラグインには下記の「paginathing.min.js」を使用しています。
https://github.com/alfrcr/paginathing

おそらく絞り込み検索で表示させたものに「current」などのクラスを付与し、
そのクラスがついたものだけ取得するようページネーション側で要素指定すれば
いけると思うのです。
しかし、クラス付与がリスト全部についてしまい、
絞り込みされたものだけ付与させることができず困っています。。

すみませんが、よろしくお願いいたします。

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />

<title>「リストを絞り込む処理を実装してみる」のデモページ4 | cly7796.net</title>
<meta name="keywords" content="javascript,jQuery,絞り込み,選択,複数,デモページ4" />
<meta name="description" content="「リストを絞り込む処理を実装してみる」のデモページ4です。" />

<link rel="stylesheet" href="./sample.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cly7796.net/blog/sample/implement-the-process-of-narrowing-down-the-list/sample4."></script>
<script src="paginathing.min.js"></script>
<script>
	$(function() {
	$('.news-container').paginathing({//親要素のclassを記述
		perPage: 20,//1ページあたりの表示件数
		prevText:'前へ',//1つ前のページへ移動するボタンのテキスト
		nextText:'次へ',//1つ次のページへ移動するボタンのテキスト
		activeClass: 'navi-active',//現在のページ番号に任意のclassを付与できます
	})
});
</script>


</head>
<body>
<div id="page">
	<div class="serchBox">
		<select name="type">
			<option value="">種類を選択</option>
			<option value="mammals">哺乳類</option>
			<option value="reptiles">爬虫類</option>
			<option value="birds">鳥類</option>
			<option value="other">その他</option>
		</select>
		<select name="live">
			<option value="">生活を選択</option>
			<option value="water">水中</option>
			<option value="land">陸上</option>
			<option value="water-and-land">水中と陸上</option>
			<option value="sky">空</option>
		</select>
		<select name="color">
			<option value="">色を選択</option>
			<option value="black">黒系</option>
			<option value="white">白系</option>
			<option value="green">緑系</option>
			<option value="brown">茶系</option>
		</select>
		<select name="size">
			<option value="">大きさを選択</option>
			<option value="small">小さい</option>
			<option value="middle">中くらい</option>
			<option value="large">大きい</option>
		</select>
		<select name="name">
			<option value="">名前を選択</option>
			<option value="dog">イヌ</option>
			<option value="cat">ネコ</option>
			<option value="monkey">サル</option>
			<option value="dolphin">イルカ</option>
			<option value="jellyfish">クラゲ</option>
			<option value="penguin">ペンギン</option>
			<option value="turtle">カメ</option>
			<option value="redstart">ジョウビタキ</option>
			<option value="myna">九官鳥</option>
			<option value="butterfly">蝶</option>
			<option value="crocodile">ワニ</option>
		</select>
		<button id="search">検索</button>
		<!-- <span id="count"></span>件 -->
		<button id="reset">リセット</button>
	</div>

	<p class="none">該当する項目がありません。</p>

	<ul class="list news-container">
		<li>
			<img src="01.jpg" width="240" height="155">
			<p class="name">名前:<span class="dolphin">イルカ</span></p>
			<p class="type">種類:<span class="mammals">哺乳類</span></p>
			<p class="live">生活:<span class="water">水中</span></p>
			<p class="color">色:<span class="black">黒系</span></p>
			<p class="size">大きさ:<span class="large">大きい</span></p>
		</li>
		<li>
			<img src="02.jpg" width="240" height="155">
			<p class="name">名前:<span class="jellyfish">クラゲ</span></p>
			<p class="type">種類:<span class="other">その他</span></p>
			<p class="live">生活:<span class="water">水中</span></p>
			<p class="color">色:<span class="white">白系</span></p>
			<p class="size">大きさ:<span class="small">小さい</span></p>
		</li>
		<li>
			<img src="03.jpg" width="240" height="155">
			<p class="name">名前:<span class="penguin">ペンギン</span></p>
			<p class="type">種類:<span class="birds">鳥類</span></p>
			<p class="live">生活:<span class="water-and-land">水中と陸上</span></p>
			<p class="color">色:<span class="black">黒系</span></p>
			<p class="size">大きさ:<span class="middle">中くらい</span></p>
		</li>
		<li>
			<img src="04.jpg" width="240" height="155">
			<p class="name">名前:<span class="turtle">カメ</span></p>
			<p class="type">種類:<span class="reptiles">爬虫類</span></p>
			<p class="live">生活:<span class="water-and-land">水中と陸上</span></p>
			<p class="color">色:<span class="green">緑系</span></p>
			<p class="size">大きさ:<span class="small">小さい</span></p>
		</li>
		<li>
			<img src="05.jpg" width="240" height="155">
			<p class="name">名前:<span class="redstart">ジョウビタキ</span></p>
			<p class="type">種類:<span class="birds">鳥類</span></p>
			<p class="live">生活:<span class="sky">空</span></p>
			<p class="color">色:<span class="brown">茶系</span></p>
			<p class="size">大きさ:<span class="small">小さい</span></p>
		</li>
		<li>
			<img src="06.jpg" width="240" height="155">
			<p class="name">名前:<span class="cat">ネコ</span></p>
			<p class="type">種類:<span class="mammals">哺乳類</span></p>
			<p class="live">生活:<span class="land">陸上</span></p>
			<p class="color">色:<span class="brown">茶系</span></p>
			<p class="size">大きさ:<span class="middle">中くらい</span></p>
		</li>
		<li>
			<img src="07.jpg" width="240" height="155">
			<p class="name">名前:<span class="butterfly">蝶</span></p>
			<p class="type">種類:<span class="other">その他</span></p>
			<p class="live">生活:<span class="sky">空</span></p>
			<p class="color">色:<span class="black">黒系</span></p>
			<p class="size">大きさ:<span class="small">小さい</span></p>
		</li>
		<li>
			<img src="08.jpg" width="240" height="155">
			<p class="name">名前:<span class="cat">ネコ</span></p>
			<p class="type">種類:<span class="mammals">哺乳類</span></p>
			<p class="live">生活:<span class="land">陸上</span></p>
			<p class="color">色:<span class="black">黒系</span></p>
			<p class="size">大きさ:<span class="middle">中くらい</span></p>
		</li>
		<li>
			<img src="09.jpg" width="240" height="155">
			<p class="name">名前:<span class="dog">イヌ</span></p>
			<p class="type">種類:<span class="mammals">哺乳類</span></p>
			<p class="live">生活:<span class="land">陸上</span></p>
			<p class="color">色:<span class="black">黒系</span></p>
			<p class="size">大きさ:<span class="middle">中くらい</span></p>
		</li>
		<li>
			<img src="10.jpg" width="240" height="155">
			<p class="name">名前:<span class="crocodile">ワニ</span></p>
			<p class="type">種類:<span class="reptiles">爬虫類</span></p>
			<p class="live">生活:<span class="water-and-land">水中と陸上</span></p>
			<p class="color">色:<span class="green">緑系</span></p>
			<p class="size">大きさ:<span class="large">大きい</span></p>
		</li>
		<li>
			<img src="11.jpg" width="240" height="155">
			<p class="name">名前:<span class="monkey">サル</span></p>
			<p class="type">種類:<span class="mammals">哺乳類</span></p>
			<p class="live">生活:<span class="land">陸上</span></p>
			<p class="color">色:<span class="brown">茶系</span></p>
			<p class="size">大きさ:<span class="middle">中くらい</span></p>
		</li>
		<li>
			<img src="12.jpg" width="240" height="155">
			<p class="name">名前:<span class="myna">九官鳥</span></p>
			<p class="type">種類:<span class="birds">鳥類</span></p>
			<p class="live">生活:<span class="sky">空</span></p>
			<p class="color">色:<span class="black">黒系</span></p>
			<p class="size">大きさ:<span class="small">小さい</span></p>
		</li>
		<li>
			<img src="13.jpg" width="240" height="155">
			<p class="name">名前:<span class="dog">イヌ</span></p>
			<p class="type">種類:<span class="mammals">哺乳類</span></p>
			<p class="live">生活:<span class="land">陸上</span></p>
			<p class="color">色:<span class="white">白系</span></p>
			<p class="size">大きさ:<span class="middle">中くらい</span></p>
		</li>
		<li>
			<img src="14.jpg" width="240" height="155">
			<p class="name">名前:<span class="dog">イヌ</span></p>
			<p class="type">種類:<span class="mammals">哺乳類</span></p>
			<p class="live">生活:<span class="land">陸上</span></p>
			<p class="color">色:<span class="brown">茶系</span></p>
			<p class="size">大きさ:<span class="middle">中くらい</span></p>
		</li>
	</ul>
</div>

</body>
</html>

補足

・できればJSのみで完結したいです。（PHPなどは苦手なので）
・ページネーションプラグインについては、他のものでも構いません。

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

回答1件

ベストアンサー

どっちもdisplay=noneで非表示したり非表示にしたりすることで絞り込んでいる関係でそのままでは競合してうまくいきません。
検索結果をdisplayの表示非表示ではなくて特定クラスのあるなしで設定し、特定クラスのある分だけ表示用のリストにコピーしてページネーションするとかどうでしょう？

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5	<meta charset="UTF-8" />
6
7	<title>「リストを絞り込む処理を実装してみる」のデモページ4 | cly7796.net</title>
8	<meta name="keywords" content="javascript,jQuery,絞り込み,選択,複数,デモページ4" />
9	<meta name="description" content="「リストを絞り込む処理を実装してみる」のデモページ4です。" />
10	<!-- paginating.jsのcssはbootstrap前提っぽい -->
11	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
12	<!-- 元となるリストは常に非表示 -->
13	<style>
14		.list {
15			display: none;
16		}
17	</style>
18
19	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
20	<script src="./paginathing.js"></script>
21	<script>
22		//参照元サイトのコードは変更する必要があるのでコードを貼り付け
23		$(function () {
24			var lists = $('.list li');
25			$('#search').on('click', function () {
26				//一旦全要素にhitクラスを付与
27				lists.addClass('hit');
28				//lists.show();
29				for (var i = 0; i < $('.serchBox select').length; i++) {
30					// 絞り込みの項目を取得
31					var item = $('.serchBox select').eq(i).attr('name');
32					// 絞り込みの対象を取得
33					var target = $('.serchBox select').eq(i).val();
34
35					if (target != '') {
36						for (var j = 0; j < lists.length; j++) {
37							// 絞り込み対象でない場合は非表示→クラス削除
38							if (!lists.eq(j).find('.' + item).find('span').hasClass(target)) {
39								//lists.eq(j).hide();
40								//条件に当てはまらなかったらhitクラスを削除
41								lists.eq(j).removeClass('hit');
42							}
43						};
44					}
45				};
46				pagination();
47			});
48
49			//ページロード直後は全体がヒットしたという形で表示
50			lists.addClass('hit');
51			pagination();
52		});
53
54		function pagination() {
55			//前回のページネーションバーがあれば削除
56			$('.pagination-container').remove();
57			//表示用要素のクリア
58			$('#result').html('');
59
60			if ($('.hit').length === 0) {
61				//.hitクラスの要素が0(該当項目なし)のばあいはメッセージを表示
62				$('.none').show();
63			} else {
64				$('.none').hide();
65
66				//.hitクラスが残った要素だけ表示用の要素にコピー
67				$('#result').html($('.hit').clone());
68
69				//ページネーション
70				$('.news-container').paginathing({//親要素のclassを記述
71					perPage: 2,//1ページあたりの表示件数　→　項目数が少ないからテスト用に1ページ2個で
72					prevText: '前へ',//1つ前のページへ移動するボタンのテキスト
73					nextText: '次へ',//1つ次のページへ移動するボタンのテキスト
74					activeClass: 'navi-active',//現在のページ番号に任意のclassを付与できます
75				});
76			}
77		}
78	</script>
79
80
81</head>
82
83<body>
84	<div id="page">
85		<div class="serchBox">
86			<select name="type">
87				<option value="">種類を選択</option>
88				<option value="mammals">哺乳類</option>
89				<option value="reptiles">爬虫類</option>
90				<option value="birds">鳥類</option>
91				<option value="other">その他</option>
92			</select>
93			<select name="live">
94				<option value="">生活を選択</option>
95				<option value="water">水中</option>
96				<option value="land">陸上</option>
97				<option value="water-and-land">水中と陸上</option>
98				<option value="sky">空</option>
99			</select>
100			<select name="color">
101				<option value="">色を選択</option>
102				<option value="black">黒系</option>
103				<option value="white">白系</option>
104				<option value="green">緑系</option>
105				<option value="brown">茶系</option>
106			</select>
107			<select name="size">
108				<option value="">大きさを選択</option>
109				<option value="small">小さい</option>
110				<option value="middle">中くらい</option>
111				<option value="large">大きい</option>
112			</select>
113			<select name="name">
114				<option value="">名前を選択</option>
115				<option value="dog">イヌ</option>
116				<option value="cat">ネコ</option>
117				<option value="monkey">サル</option>
118				<option value="dolphin">イルカ</option>
119				<option value="jellyfish">クラゲ</option>
120				<option value="penguin">ペンギン</option>
121				<option value="turtle">カメ</option>
122				<option value="redstart">ジョウビタキ</option>
123				<option value="myna">九官鳥</option>
124				<option value="butterfly">蝶</option>
125				<option value="crocodile">ワニ</option>
126			</select>
127			<button id="search">検索</button>
128			<!-- <span id="count"></span>件 -->
129			<button id="reset">リセット</button>
130		</div>
131
132		<!-- 表示用の要素を追加 -->
133		<ul class="news-container" id="result">
134		</ul>
135
136		<p class="none">該当する項目がありません。</p>
137
138		<!-- 元となるリストは常に非表示 -->
139		<ul class="list">
140			<li>
141				<img src="01.jpg" width="240" height="155">
142				<p class="name">名前:<span class="dolphin">イルカ</span></p>
143				<p class="type">種類:<span class="mammals">哺乳類</span></p>
144				<p class="live">生活:<span class="water">水中</span></p>
145				<p class="color">色:<span class="black">黒系</span></p>
146				<p class="size">大きさ:<span class="large">大きい</span></p>
147			</li>
148			<li>
149				<img src="02.jpg" width="240" height="155">
150				<p class="name">名前:<span class="jellyfish">クラゲ</span></p>
151				<p class="type">種類:<span class="other">その他</span></p>
152				<p class="live">生活:<span class="water">水中</span></p>
153				<p class="color">色:<span class="white">白系</span></p>
154				<p class="size">大きさ:<span class="small">小さい</span></p>
155			</li>
156			<li>
157				<img src="03.jpg" width="240" height="155">
158				<p class="name">名前:<span class="penguin">ペンギン</span></p>
159				<p class="type">種類:<span class="birds">鳥類</span></p>
160				<p class="live">生活:<span class="water-and-land">水中と陸上</span></p>
161				<p class="color">色:<span class="black">黒系</span></p>
162				<p class="size">大きさ:<span class="middle">中くらい</span></p>
163			</li>
164			<li>
165				<img src="04.jpg" width="240" height="155">
166				<p class="name">名前:<span class="turtle">カメ</span></p>
167				<p class="type">種類:<span class="reptiles">爬虫類</span></p>
168				<p class="live">生活:<span class="water-and-land">水中と陸上</span></p>
169				<p class="color">色:<span class="green">緑系</span></p>
170				<p class="size">大きさ:<span class="small">小さい</span></p>
171			</li>
172			<li>
173				<img src="05.jpg" width="240" height="155">
174				<p class="name">名前:<span class="redstart">ジョウビタキ</span></p>
175				<p class="type">種類:<span class="birds">鳥類</span></p>
176				<p class="live">生活:<span class="sky">空</span></p>
177				<p class="color">色:<span class="brown">茶系</span></p>
178				<p class="size">大きさ:<span class="small">小さい</span></p>
179			</li>
180			<li>
181				<img src="06.jpg" width="240" height="155">
182				<p class="name">名前:<span class="cat">ネコ</span></p>
183				<p class="type">種類:<span class="mammals">哺乳類</span></p>
184				<p class="live">生活:<span class="land">陸上</span></p>
185				<p class="color">色:<span class="brown">茶系</span></p>
186				<p class="size">大きさ:<span class="middle">中くらい</span></p>
187			</li>
188			<li>
189				<img src="07.jpg" width="240" height="155">
190				<p class="name">名前:<span class="butterfly">蝶</span></p>
191				<p class="type">種類:<span class="other">その他</span></p>
192				<p class="live">生活:<span class="sky">空</span></p>
193				<p class="color">色:<span class="black">黒系</span></p>
194				<p class="size">大きさ:<span class="small">小さい</span></p>
195			</li>
196			<li>
197				<img src="08.jpg" width="240" height="155">
198				<p class="name">名前:<span class="cat">ネコ</span></p>
199				<p class="type">種類:<span class="mammals">哺乳類</span></p>
200				<p class="live">生活:<span class="land">陸上</span></p>
201				<p class="color">色:<span class="black">黒系</span></p>
202				<p class="size">大きさ:<span class="middle">中くらい</span></p>
203			</li>
204			<li>
205				<img src="09.jpg" width="240" height="155">
206				<p class="name">名前:<span class="dog">イヌ</span></p>
207				<p class="type">種類:<span class="mammals">哺乳類</span></p>
208				<p class="live">生活:<span class="land">陸上</span></p>
209				<p class="color">色:<span class="black">黒系</span></p>
210				<p class="size">大きさ:<span class="middle">中くらい</span></p>
211			</li>
212			<li>
213				<img src="10.jpg" width="240" height="155">
214				<p class="name">名前:<span class="crocodile">ワニ</span></p>
215				<p class="type">種類:<span class="reptiles">爬虫類</span></p>
216				<p class="live">生活:<span class="water-and-land">水中と陸上</span></p>
217				<p class="color">色:<span class="green">緑系</span></p>
218				<p class="size">大きさ:<span class="large">大きい</span></p>
219			</li>
220			<li>
221				<img src="11.jpg" width="240" height="155">
222				<p class="name">名前:<span class="monkey">サル</span></p>
223				<p class="type">種類:<span class="mammals">哺乳類</span></p>
224				<p class="live">生活:<span class="land">陸上</span></p>
225				<p class="color">色:<span class="brown">茶系</span></p>
226				<p class="size">大きさ:<span class="middle">中くらい</span></p>
227			</li>
228			<li>
229				<img src="12.jpg" width="240" height="155">
230				<p class="name">名前:<span class="myna">九官鳥</span></p>
231				<p class="type">種類:<span class="birds">鳥類</span></p>
232				<p class="live">生活:<span class="sky">空</span></p>
233				<p class="color">色:<span class="black">黒系</span></p>
234				<p class="size">大きさ:<span class="small">小さい</span></p>
235			</li>
236			<li>
237				<img src="13.jpg" width="240" height="155">
238				<p class="name">名前:<span class="dog">イヌ</span></p>
239				<p class="type">種類:<span class="mammals">哺乳類</span></p>
240				<p class="live">生活:<span class="land">陸上</span></p>
241				<p class="color">色:<span class="white">白系</span></p>
242				<p class="size">大きさ:<span class="middle">中くらい</span></p>
243			</li>
244			<li>
245				<img src="14.jpg" width="240" height="155">
246				<p class="name">名前:<span class="dog">イヌ</span></p>
247				<p class="type">種類:<span class="mammals">哺乳類</span></p>
248				<p class="live">生活:<span class="land">陸上</span></p>
249				<p class="color">色:<span class="brown">茶系</span></p>
250				<p class="size">大きさ:<span class="middle">中くらい</span></p>
251			</li>
252		</ul>
253	</div>
254
255</body>
256
257</html>