teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問jquery　リストからデータ抽出+ページングをしたい

編集履歴

質問編集履歴

8

誤字

2018/11/19 03:48

投稿

rokutaku
rokutaku

スコア9

test CHANGED
@@ -1 +1 @@
1
- jquery　リストから$_GETで抽出+ページングをしたい
1
+ jquery　リストからデータ抽出+ページングをしたい
test CHANGED
File without changes

7

タイトル修正

2018/11/19 03:48

投稿

rokutaku
rokutaku

スコア9

test CHANGED
@@ -1 +1 @@
1
- jquery　$_GETで抽出+ページングをしたい
1
+ jquery　リストから$_GETで抽出+ページングをしたい
test CHANGED
File without changes

6

タイトル編集

2018/11/19 03:41

投稿

rokutaku
rokutaku

スコア9

test CHANGED
@@ -1 +1 @@
1
- $_GETで抽出+ページングをしたい
1
+ jquery　$_GETで抽出+ページングをしたい
test CHANGED
File without changes

5

誤字

2018/11/19 03:41

投稿

rokutaku
rokutaku

スコア9

test CHANGED
File without changes
test CHANGED
@@ -30,29 +30,49 @@
30
30
 
31
31
  ```
32
32
 
33
+ <!DOCTYPE html>
34
+
35
+ <html lang="ja">
36
+
37
+ <head>
38
+
39
+ <meta charset="UTF-8">
40
+
41
+ <title>サンプル</title>
42
+
43
+
44
+
45
+
46
+
47
+ <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
48
+
33
49
  <script>
34
50
 
35
51
  $(function () {
36
52
 
37
- var item = decodeURIComponent(location.search.match(/key=(.*?)(&|$)/)[1]);
53
+ var item = decodeURIComponent(location.search.match(/item=(.*?)(&|$)/)[1]);
38
54
 
39
55
 
40
56
 
41
- if ( item == "all" || item == "") {
57
+ if ( item == "all" || item == "") {
42
58
 
43
- $("ul.list li").css("display","block");
59
+ $("ul.list li").css("display","block");
44
60
 
45
- } else {
61
+ } else {
46
62
 
47
- $("ul.list li." + item).siblings("li").css("display","none");
63
+ $("ul.list li." + item).siblings("li").css("display","none");
48
64
 
49
- $("ul.list li." + item).css("display","block");
65
+ $("ul.list li." + item).css("display","block");
50
66
 
51
- }
67
+ }
52
68
 
53
69
  });
54
70
 
55
71
  </script>
72
+
73
+ </head>
74
+
75
+ <body>
56
76
 
57
77
 
58
78
 
@@ -94,6 +114,22 @@
94
114
 
95
115
  </ul>
96
116
 
117
+
118
+
119
+ <hr>
120
+
121
+ ↓希望するページングの形
122
+
123
+
124
+
125
+ 前へ｜1｜2｜3｜次へ
126
+
127
+
128
+
129
+ </body>
130
+
131
+ </html>
132
+
97
133
  ```
98
134
 
99
135
 

4

誤字

2018/11/19 03:21

投稿

rokutaku
rokutaku

スコア9

test CHANGED
File without changes
test CHANGED
@@ -15,6 +15,10 @@
15
15
  class名が「apple」のものを抽出して、そのappleだけで
16
16
 
17
17
  ページングする、というような形にしたいのです。
18
+
19
+
20
+
21
+ 今は「apple」の抽出はできますが、ページングとのからみ方が分からずできておりません。
18
22
 
19
23
 
20
24
 

3

文法の修正

2018/11/19 03:13

投稿

rokutaku
rokutaku

スコア9

test CHANGED
File without changes
test CHANGED
@@ -25,6 +25,32 @@
25
25
 
26
26
 
27
27
  ```
28
+
29
+ <script>
30
+
31
+ $(function () {
32
+
33
+ var item = decodeURIComponent(location.search.match(/key=(.*?)(&|$)/)[1]);
34
+
35
+
36
+
37
+ if ( item == "all" || item == "") {
38
+
39
+ $("ul.list li").css("display","block");
40
+
41
+ } else {
42
+
43
+ $("ul.list li." + item).siblings("li").css("display","none");
44
+
45
+ $("ul.list li." + item).css("display","block");
46
+
47
+ }
48
+
49
+ });
50
+
51
+ </script>
52
+
53
+
28
54
 
29
55
  <p><a href="?item=all">全て</a>｜<a href="?item=apple">りんご</a>｜<a href="?item=lemon">レモン</a></p>
30
56
 

2

内容修正

2018/11/19 03:10

投稿

rokutaku
rokutaku

スコア9

test CHANGED
@@ -1 +1 @@
1
- PHP $_GETで抽出+ページングをしたい
1
+ $_GETで抽出+ページングをしたい
test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
 
4
4
 
5
- phpで、特定のclass名を抽出+ページングをしたいと思っています。
5
+ jqueryで、特定のclass名を抽出+ページングをしたいと思っています。
6
6
 
7
7
 
8
8
 
@@ -18,9 +18,19 @@
18
18
 
19
19
 
20
20
 
21
+ データ総数はliの数をカウント、
22
+
23
+ 1ページに表示する数は3件です。
24
+
25
+
26
+
21
27
  ```
22
28
 
29
+ <p><a href="?item=all">全て</a>｜<a href="?item=apple">りんご</a>｜<a href="?item=lemon">レモン</a></p>
30
+
31
+
32
+
23
- <ul>
33
+ <ul class="list">
24
34
 
25
35
  <li class="apple">りんご</li>
26
36
 
@@ -70,11 +80,7 @@
70
80
 
71
81
 
72
82
 
73
- ↓こちらのページを参考に、ページングだけは何となく理解できたのですが、
74
83
 
75
- 「apple」等の条件をつけて、その中でのページングというのがどのように関連付けたら良いのか分かりません。
76
-
77
- https://web-dev.xyz/php-get-paging/
78
84
 
79
85
 
80
86
 
@@ -84,55 +90,7 @@
84
90
 
85
91
 
86
92
 
87
-
88
-
89
93
  ### 試したこと
90
-
91
-
92
-
93
- https://web-dev.xyz/php-get-paging/
94
-
95
- ↑上記のページを参考に、ページング部分だけは下記のようにしました。
96
-
97
-
98
-
99
- ```
100
-
101
- <ul class="pager">
102
-
103
- <?php if ($page > 1) : ?>
104
-
105
- <li><a href="?page=<?php echo ($page - 1); ?>">前へ</a></li>
106
-
107
- <?php endif; ?>
108
-
109
- <?php for ($i = $range; $i > 0; $i--) : ?>
110
-
111
- <?php if ($page - $i < 1) continue; ?>
112
-
113
- <li><a href="?page=<?php echo ($page - $i); ?>"><?php echo ($page - $i); ?></a></li>
114
-
115
- <?php endfor; ?>
116
-
117
- <li><span class="current"><?php echo $page; ?></span></li>
118
-
119
- <?php for ($i = 1; $i <= $range; $i++) : ?>
120
-
121
- <?php if ($page + $i > $totalPage) break; ?>
122
-
123
- <li><a href="?page=<?php echo ($page + $i); ?>"><?php echo ($page + $i); ?></a></li>
124
-
125
- <?php endfor; ?>
126
-
127
- <?php if ($page < $totalPage) : ?>
128
-
129
- <li><a href="?page=<?php echo ($page + 1); ?>">次へ</a></li>
130
-
131
- <?php endif; ?>
132
-
133
- </ul>
134
-
135
- ```
136
94
 
137
95
 
138
96
 

1

コードブロック直しました。

2018/11/19 03:08

投稿

rokutaku
rokutaku

スコア9

test CHANGED
File without changes
test CHANGED
@@ -17,6 +17,8 @@
17
17
  ページングする、というような形にしたいのです。
18
18
 
19
19
 
20
+
21
+ ```
20
22
 
21
23
  <ul>
22
24
 
@@ -51,6 +53,8 @@
51
53
  <li class="lemon">レモン</li>
52
54
 
53
55
  </ul>
56
+
57
+ ```
54
58
 
55
59
 
56
60
 
@@ -92,6 +96,8 @@
92
96
 
93
97
 
94
98
 
99
+ ```
100
+
95
101
  <ul class="pager">
96
102
 
97
103
  <?php if ($page > 1) : ?>
@@ -126,6 +132,8 @@
126
132
 
127
133
  </ul>
128
134
 
135
+ ```
136
+
129
137
 
130
138
 
131
139
  ### 補足情報（FW/ツールのバージョンなど）