質問編集履歴
1
使用したjQueryを変更しました
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -2,23 +2,57 @@
|
|
|
2
2
|
|
|
3
3
|
ex-table-filter（[https://github.com/cyokodog/jquery.ex-table-filter](https://github.com/cyokodog/jquery.ex-table-filter)）と
|
|
4
4
|
|
|
5
|
-
pagination（[http
|
|
5
|
+
pagination（[http://shanabrian.com/web/jquery/pagination.php](http://shanabrian.com/web/jquery/pagination.php)）を使用して、
|
|
6
6
|
|
|
7
|
-
文字列でフィルターをかけ、その結果に対して
|
|
7
|
+
文字列でフィルターをかけ、その結果に対してページネーションさせたいと思っています。
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
先日こちらで質問させていただきましたが、
|
|
12
12
|
|
|
13
13
|
|
|
14
14
|
|
|
15
|
-
【ページを開いたとき】すべての要素をページネーションさせる
|
|
16
|
-
|
|
17
|
-
|
|
15
|
+
jquery.pagination.jsのchangeEndCallback関数にフィルターを入れたら無事検索したものに対してページャーが出現しました。
|
|
18
16
|
|
|
19
17
|
|
|
20
18
|
|
|
19
|
+
【jquery.pagination.js内 changeEndCallback】
|
|
20
|
+
|
|
21
|
+
```ここに言語を入力
|
|
22
|
+
|
|
23
|
+
function() {
|
|
24
|
+
|
|
25
|
+
$(".filter-area").keyup(function(){
|
|
26
|
+
|
|
27
|
+
$(".filter-area").val($(this).val()); //1ページに検索窓を2つ設置しているため、同じ文字列が入力されるようにしています。
|
|
28
|
+
|
|
29
|
+
$('table.data').exTableFilter('.filter-area');
|
|
30
|
+
|
|
31
|
+
});
|
|
32
|
+
|
|
33
|
+
},
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
ところが、現在
|
|
40
|
+
|
|
41
|
+
・フォームの文字を削除するとページャーが機能しなくなる（絞り込まれていない検索結果が表示されている状態）。
|
|
42
|
+
|
|
43
|
+
・ページャーの次へ＆前へボタンを押すと検索で入力した言葉が無効（検索されていない状態のページネーション）になってしまう。
|
|
44
|
+
|
|
45
|
+
という問題が発生しています。
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
検索結果に対してページネーションさせる、という記述が出来ておらず、
|
|
50
|
+
|
|
21
|
-
考え方の
|
|
51
|
+
根本的に考え方が間違っているのだと思うのですが、どのように直したらよいかわかりませんのでご教授ください。
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
|
|
22
56
|
|
|
23
57
|
|
|
24
58
|
|
|
@@ -30,45 +64,25 @@
|
|
|
30
64
|
|
|
31
65
|
<script>
|
|
32
66
|
|
|
33
|
-
$(document).ready(function () {
|
|
67
|
+
$(document).ready(function () {
|
|
34
68
|
|
|
35
|
-
$(
|
|
69
|
+
$(".filter-area").keyup(function(){
|
|
36
70
|
|
|
37
|
-
|
|
71
|
+
$(".filter-area").val($(this).val());
|
|
38
72
|
|
|
39
|
-
$(d
|
|
73
|
+
$('table.data').exTableFilter('.filter-area');
|
|
40
74
|
|
|
41
|
-
|
|
75
|
+
});
|
|
42
76
|
|
|
43
|
-
|
|
77
|
+
$('.pager').pagination({
|
|
44
78
|
|
|
45
|
-
|
|
79
|
+
itemElement : '> .item',
|
|
46
80
|
|
|
47
|
-
|
|
81
|
+
displayItemCount : 3,
|
|
48
82
|
|
|
49
|
-
firstText : '<<',
|
|
50
|
-
|
|
51
|
-
lastText : '>>',
|
|
52
|
-
|
|
53
|
-
ellipsisText : '...',
|
|
54
|
-
|
|
55
|
-
|
|
83
|
+
});
|
|
56
|
-
|
|
57
|
-
pagerNum : 3,
|
|
58
|
-
|
|
59
|
-
ellipsis : true,
|
|
60
|
-
|
|
61
|
-
linkInvalid : true,
|
|
62
|
-
|
|
63
|
-
goTop : true,
|
|
64
|
-
|
|
65
|
-
firstLastNav : true,
|
|
66
|
-
|
|
67
|
-
prevNextNav : true
|
|
68
84
|
|
|
69
85
|
});
|
|
70
|
-
|
|
71
|
-
});
|
|
72
86
|
|
|
73
87
|
</script>
|
|
74
88
|
|
|
@@ -82,19 +96,19 @@
|
|
|
82
96
|
|
|
83
97
|
```ここに言語を入力
|
|
84
98
|
|
|
85
|
-
<input type="text" class="
|
|
99
|
+
<input type="text" class="filter-area form-control">
|
|
86
100
|
|
|
87
101
|
|
|
88
102
|
|
|
89
103
|
<div id="main">
|
|
90
104
|
|
|
91
|
-
<div class="
|
|
105
|
+
<div id="mainInner" class="pager">
|
|
92
106
|
|
|
93
107
|
|
|
94
108
|
|
|
95
109
|
<!-- 要素 -->
|
|
96
110
|
|
|
97
|
-
<table class="data tableBox list_item">
|
|
111
|
+
<table class="data tableBox list_item item">
|
|
98
112
|
|
|
99
113
|
<tbody>
|
|
100
114
|
|
|
@@ -112,13 +126,7 @@
|
|
|
112
126
|
|
|
113
127
|
|
|
114
128
|
|
|
115
|
-
<div class="pager"></div>
|
|
116
|
-
|
|
117
|
-
<div class="pageNum"><span class="nownum"></span>/<span class="totalnum"></span>pages</div>
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
</div><!-- /
|
|
129
|
+
</div><!-- /mainInner pager -->
|
|
122
130
|
|
|
123
131
|
</div><!-- /main -->
|
|
124
132
|
|