質問編集履歴

2

ソースの追加

2018/12/11 01:17

投稿

ms5025
ms5025

スコア292

test CHANGED
File without changes
test CHANGED
@@ -229,3 +229,91 @@
229
229
 
230
230
 
231
231
  ```
232
+
233
+
234
+
235
+ 追記★
236
+
237
+ 上記tplではclass名を削除してありますが、
238
+
239
+ sectionのclassをhogeMenuとしてあります。
240
+
241
+ cssで'selected'classに対してshow状態を設定してあります。
242
+
243
+ 初回1ページ目のsection以外は'selected'のclassがないためhide状態です。
244
+
245
+ 下記は必要部分だけ抜き出してありますが
246
+
247
+ これに最大ページ数の制御などが追加されています。
248
+
249
+
250
+
251
+ ```css
252
+
253
+
254
+
255
+ /*pager*/
256
+
257
+ .hogeMenu { display: none; }
258
+
259
+ .hogeMenu.selected { display: block; }
260
+
261
+ ```
262
+
263
+
264
+
265
+
266
+
267
+ ```js
268
+
269
+ // 改ページ制御
270
+
271
+ $(document).on('click', '.改ページclass', function () {
272
+
273
+
274
+
275
+ var current = parseInt($('.hogeMenu.selected').index('.hogeMenu'));
276
+
277
+ if ($(this).is('.prev') && current !== 0) {
278
+
279
+ current = current - 1;
280
+
281
+ $('.hogeMenu').removeClass('selected').eq(current).addClass('selected');
282
+
283
+ $('body,html').animate({scrollTop: 0}, 0);
284
+
285
+ } else if ($(this).is('.next')) {
286
+
287
+ current = current + 1;
288
+
289
+ $('.hogeMenu').removeClass('selected').eq(current).addClass('selected');
290
+
291
+ $('body,html').animate({scrollTop: 0}, 0);
292
+
293
+ }
294
+
295
+ current = current + 1;
296
+
297
+
298
+
299
+ // ページボタン制御
300
+
301
+ $('.prev').show();
302
+
303
+ $('.next').show();
304
+
305
+ if (current == 1)
306
+
307
+ {
308
+
309
+ $('.prev').hide();
310
+
311
+ }
312
+
313
+
314
+
315
+ });
316
+
317
+
318
+
319
+ ```

1

コード追加

2018/12/11 01:17

投稿

ms5025
ms5025

スコア292

test CHANGED
File without changes
test CHANGED
@@ -39,3 +39,193 @@
39
39
  また、そもそもこのようなデータ量の場合非同期通信でデータを取得すること自体が誤りなのでしょうか?
40
40
 
41
41
  (改ページや項目選択でsubmitさせないでほしいという要件があったためこうなりました)
42
+
43
+
44
+
45
+
46
+
47
+ ```php
48
+
49
+
50
+
51
+ class HagehageController extends AbstractActionController {
52
+
53
+
54
+
55
+ /**
56
+
57
+ * @return View 情報取得
58
+
59
+ */
60
+
61
+ public function hogehogeAction() {
62
+
63
+
64
+
65
+ // 共通処理
66
+
67
+ require_once('共通処理.php');
68
+
69
+
70
+
71
+ // 情報取得
72
+
73
+ $results['itemList'] = LibsHoge::getSearchItem($params['paramCD1'], $params['paramCD2'], $$params['searchText']);
74
+
75
+
76
+
77
+ // smartyのview表示
78
+
79
+ Smarty::render($params, $results);
80
+
81
+
82
+
83
+ }
84
+
85
+
86
+
87
+ }
88
+
89
+
90
+
91
+ 共通処理.php内で$paramsにポストデータをセットしていたり
92
+
93
+ Actionに対応するtplや表示に必要な物が共通処理として$resultsにセットしてあります。(フレームワークはzendを使用)
94
+
95
+ ```
96
+
97
+
98
+
99
+ ```js
100
+
101
+
102
+
103
+ // 〇〇コード
104
+
105
+ var paramCD1 = $('#paramCD1').val();
106
+
107
+ // 〇〇コード
108
+
109
+ var paramCD2 = $('#paramCD2').val();
110
+
111
+ // キーワード
112
+
113
+ var searchText = $('#searchText').val();
114
+
115
+
116
+
117
+
118
+
119
+ $.ajax({
120
+
121
+ type: 'GET',
122
+
123
+ url: "hogehoge",
124
+
125
+ dataType: 'html',
126
+
127
+ data: {"paramCD1": paramCD1, "paramCD2": paramCD2, "searchText": searchText}
128
+
129
+ }).done(function (html) {
130
+
131
+ var $list = $(".itemList");
132
+
133
+ // リスト内クリア
134
+
135
+ $list.empty();
136
+
137
+ // レスポンス結果アペンド
138
+
139
+ $list.append(html);
140
+
141
+
142
+
143
+ }).fail(function(jqXHR, textStatus, errorThrown) {
144
+
145
+ //エラー処理
146
+
147
+ });
148
+
149
+ ```
150
+
151
+
152
+
153
+ ```js
154
+
155
+
156
+
157
+ <section class="">
158
+
159
+ <div>
160
+
161
+ <assid >
162
+
163
+ <h4>
164
+
165
+   <span id="prev" data-action="prev"><<前回</span>
166
+
167
+ <span id="next" data-action="next">次回>></span>
168
+
169
+ </h4>
170
+
171
+ </assid>
172
+
173
+ </div>
174
+
175
+ <section >
176
+
177
+ {foreach from=$results.itemList key=key item=items}
178
+
179
+ <li class="">
180
+
181
+ <section class="">
182
+
183
+ <!-- 商品画像 -->
184
+
185
+ <figure">
186
+
187
+ <img src="{$items.商品画像}"/>
188
+
189
+ </figure>
190
+
191
+ <dl class="itemInfo">
192
+
193
+ <dt>
194
+
195
+ 品番:{$items.品番}
196
+
197
+ </dt>
198
+
199
+ <dt class="">
200
+
201
+ {$items.商品名}
202
+
203
+ </dt>
204
+
205
+ <dt class="">
206
+
207
+ {$items.価格}
208
+
209
+ </dt>
210
+
211
+ <!-- 以下商品の情報続く・・・ -->
212
+
213
+ </dl>
214
+
215
+ </section>
216
+
217
+ </li>
218
+
219
+ <!-- 最大商品数ごとにセクション区切り -->
220
+
221
+ {if (($key+1)%{$smarty.const.1ページ最大商品数} ==0)}</section><section>{/if}
222
+
223
+ {/foreach}
224
+
225
+ {/if}
226
+
227
+ </section >
228
+
229
+
230
+
231
+ ```