質問編集履歴
1
使用したjQueryを変更しました
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,52 +1,59 @@
|
|
|
1
1
|
お世話になります。
|
|
2
2
|
ex-table-filter（[https://github.com/cyokodog/jquery.ex-table-filter](https://github.com/cyokodog/jquery.ex-table-filter)）と
|
|
3
|
-
pagination（[
|
|
3
|
+
pagination（[http://shanabrian.com/web/jquery/pagination.php](http://shanabrian.com/web/jquery/pagination.php)）を使用して、
|
|
4
|
-
文字列でフィルターをかけ、その結果に対して
|
|
4
|
+
文字列でフィルターをかけ、その結果に対してページネーションさせたいと思っています。
|
|
5
5
|
|
|
6
|
-
|
|
6
|
+
先日こちらで質問させていただきましたが、
|
|
7
7
|
|
|
8
|
-
【ページを開いたとき】すべての要素をページネーションさせる
|
|
9
|
-
|
|
8
|
+
jquery.pagination.jsのchangeEndCallback関数にフィルターを入れたら無事検索したものに対してページャーが出現しました。
|
|
10
9
|
|
|
11
|
-
|
|
10
|
+
【jquery.pagination.js内 changeEndCallback】
|
|
11
|
+
```ここに言語を入力
|
|
12
|
+
function() {
|
|
13
|
+
$(".filter-area").keyup(function(){
|
|
14
|
+
$(".filter-area").val($(this).val()); //1ページに検索窓を2つ設置しているため、同じ文字列が入力されるようにしています。
|
|
15
|
+
$('table.data').exTableFilter('.filter-area');
|
|
16
|
+
});
|
|
17
|
+
},
|
|
12
18
|
|
|
19
|
+
```
|
|
20
|
+
ところが、現在
|
|
21
|
+
・フォームの文字を削除するとページャーが機能しなくなる（絞り込まれていない検索結果が表示されている状態）。
|
|
22
|
+
・ページャーの次へ＆前へボタンを押すと検索で入力した言葉が無効（検索されていない状態のページネーション）になってしまう。
|
|
23
|
+
という問題が発生しています。
|
|
24
|
+
|
|
25
|
+
検索結果に対してページネーションさせる、という記述が出来ておらず、
|
|
26
|
+
根本的に考え方が間違っているのだと思うのですが、どのように直したらよいかわかりませんのでご教授ください。
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
13
30
|
【jQuery】
|
|
14
31
|
|
|
15
32
|
```ここに言語を入力
|
|
16
33
|
<script>
|
|
17
|
-
|
|
34
|
+
$(document).ready(function () {
|
|
35
|
+
$(".filter-area").keyup(function(){
|
|
36
|
+
$(".filter-area").val($(this).val());
|
|
18
|
-
|
|
37
|
+
$('table.data').exTableFilter('.filter-area');
|
|
19
|
-
|
|
38
|
+
});
|
|
20
|
-
$(document).ready(function () {
|
|
21
|
-
|
|
39
|
+
$('.pager').pagination({
|
|
22
|
-
|
|
40
|
+
itemElement : '> .item',
|
|
23
|
-
prevText : '<',
|
|
24
|
-
nextText : '>',
|
|
25
|
-
firstText : '<<',
|
|
26
|
-
lastText : '>>',
|
|
27
|
-
ellipsisText : '...',
|
|
28
|
-
|
|
41
|
+
displayItemCount : 3,
|
|
29
|
-
|
|
42
|
+
});
|
|
30
|
-
ellipsis : true,
|
|
31
|
-
linkInvalid : true,
|
|
32
|
-
goTop : true,
|
|
33
|
-
firstLastNav : true,
|
|
34
|
-
prevNextNav : true
|
|
35
43
|
});
|
|
36
|
-
});
|
|
37
44
|
</script>
|
|
38
45
|
```
|
|
39
46
|
|
|
40
47
|
【html】
|
|
41
48
|
|
|
42
49
|
```ここに言語を入力
|
|
43
|
-
<input type="text" class="
|
|
50
|
+
<input type="text" class="filter-area form-control">
|
|
44
51
|
|
|
45
52
|
<div id="main">
|
|
46
|
-
<div class="
|
|
53
|
+
<div id="mainInner" class="pager">
|
|
47
54
|
|
|
48
55
|
<!-- 要素 -->
|
|
49
|
-
<table class="data tableBox list_item">
|
|
56
|
+
<table class="data tableBox list_item item">
|
|
50
57
|
<tbody>
|
|
51
58
|
<tr>
|
|
52
59
|
<td></td>
|
|
@@ -55,10 +62,7 @@
|
|
|
55
62
|
</table>
|
|
56
63
|
<!-- /要素 -->
|
|
57
64
|
|
|
58
|
-
<div class="pager"></div>
|
|
59
|
-
<div class="pageNum"><span class="nownum"></span>/<span class="totalnum"></span>pages</div>
|
|
60
|
-
|
|
61
|
-
</div><!-- /
|
|
65
|
+
</div><!-- /mainInner pager -->
|
|
62
66
|
</div><!-- /main -->
|
|
63
67
|
|
|
64
68
|
```
|