teratail
回答率
85.48%
質問するログイン新規登録
トップJSONに関する質問jsonデータの配列をページ分割（ページネーション）する方法

編集履歴

回答編集履歴

10

console削除

2017/07/26 07:50

投稿

m.ts10806
m.ts10806

スコア80850

test CHANGED
@@ -27,8 +27,6 @@
27
27
  list_count = 1;
28
28
 
29
29
  list[page] = list_row;
30
-
31
- console.log(list_row);
32
30
 
33
31
  list_row = [];
34
32
 

9

修正・・・

2017/07/26 07:50

投稿

m.ts10806
m.ts10806

スコア80850

test CHANGED
@@ -56,13 +56,11 @@
56
56
 
57
57
  for (var page_num = 1; page_num < list.length; page_num++) {
58
58
 
59
- console.log(page_num+"ページ目"); //確認のため出力
60
-
61
- output+= '<h2 id="'+page_num+'">ページ'+page_num+'</h2>';
59
+ output+= '<h2 id="page_'+page_num+'">ページ'+page_num+'</h2>';
62
60
 
63
61
  for (list_num = 1; list_num < list[page_num].length; list_num++) { //各ページ内のリストをループ
64
62
 
65
- output+= '<h3 id="'+page_num+'_'+list_num+'">'+list[page_num][list_num].title+'</h3>';
63
+ output+= '<h3 id="page_row_'+page_num+'_'+list_num+'">'+list[page_num][list_num].title+'</h3>';
66
64
 
67
65
  //分かりやすくするため、{ページ番号}_{ページ内のリスト番号}でIDを付与
68
66
 

8

修正

2017/07/26 07:48

投稿

m.ts10806
m.ts10806

スコア80850

test CHANGED
@@ -58,6 +58,8 @@
58
58
 
59
59
  console.log(page_num+"ページ目"); //確認のため出力
60
60
 
61
+ output+= '<h2 id="'+page_num+'">ページ'+page_num+'</h2>';
62
+
61
63
  for (list_num = 1; list_num < list[page_num].length; list_num++) { //各ページ内のリストをループ
62
64
 
63
65
  output+= '<h3 id="'+page_num+'_'+list_num+'">'+list[page_num][list_num].title+'</h3>';

7

修正

2017/07/26 07:47

投稿

m.ts10806
m.ts10806

スコア80850

test CHANGED
@@ -22,13 +22,15 @@
22
22
 
23
23
  //1ページの最大件数に達するので次のページにポインタを移動
24
24
 
25
- if(list_count >= page_list_count){
25
+ if(list_count > page_list_count){
26
26
 
27
27
  list_count = 1;
28
28
 
29
29
  list[page] = list_row;
30
30
 
31
+ console.log(list_row);
32
+
31
- list_row = []; //各ページ行配列の初期化
33
+ list_row = [];
32
34
 
33
35
  page++;
34
36
 
@@ -36,13 +38,13 @@
36
38
 
37
39
  list_row[list_count] = data[i];
38
40
 
39
- list_count++;
41
+ list_count++;
40
42
 
41
43
  }
42
44
 
43
45
  //1ページ件数に達しなかったときは残りを入れる
44
46
 
45
- if(list_count < page_list_count){
47
+ if(list_count <= page_list_count){
46
48
 
47
49
  list[page] = list_row;
48
50
 
@@ -52,11 +54,11 @@
52
54
 
53
55
  //全体のリスト配列をループ
54
56
 
55
- for (var page_num = 1; page_num <= list.length; page_num++) {
57
+ for (var page_num = 1; page_num < list.length; page_num++) {
56
58
 
57
59
  console.log(page_num+"ページ目"); //確認のため出力
58
60
 
59
- for (list_num = 1; list_num <= list[page_num].length; list_num++) { //各ページ内のリストをループ
61
+ for (list_num = 1; list_num < list[page_num].length; list_num++) { //各ページ内のリストをループ
60
62
 
61
63
  output+= '<h3 id="'+page_num+'_'+list_num+'">'+list[page_num][list_num].title+'</h3>';
62
64
 

6

修正

2017/07/26 07:44

投稿

m.ts10806
m.ts10806

スコア80850

test CHANGED
@@ -28,7 +28,7 @@
28
28
 
29
29
  list[page] = list_row;
30
30
 
31
- list_row = [];
31
+ list_row = []; //各ページ行配列の初期化
32
32
 
33
33
  page++;
34
34
 

5

調整

2017/07/26 07:15

投稿

m.ts10806
m.ts10806

スコア80850

test CHANGED
@@ -24,13 +24,13 @@
24
24
 
25
25
  if(list_count >= page_list_count){
26
26
 
27
- page++;
28
-
29
27
  list_count = 1;
30
28
 
31
29
  list[page] = list_row;
32
30
 
33
31
  list_row = [];
32
+
33
+ page++;
34
34
 
35
35
  }
36
36
 

4

修正

2017/07/26 06:21

投稿

m.ts10806
m.ts10806

スコア80850

test CHANGED
@@ -10,11 +10,13 @@
10
10
 
11
11
 
12
12
 
13
- var list_count = 0; //現在のページの件数
13
+ var list_count = 1; //現在のページの件数
14
14
 
15
15
  var page = 1;//ページ
16
16
 
17
17
  var list = []; //全体のリスト配列
18
+
19
+ var list_row = []; //ページ内リスト配列
18
20
 
19
21
  for (var i = 0; i < data.length; i++) {
20
22
 
@@ -24,13 +26,25 @@
24
26
 
25
27
  page++;
26
28
 
27
- list_count = 0;
29
+ list_count = 1;
30
+
31
+ list[page] = list_row;
32
+
33
+ list_row = [];
28
34
 
29
35
  }
30
36
 
31
- list[page][list_count] = data[i];
37
+ list_row[list_count] = data[i];
32
38
 
33
- list_count++;
39
+ list_count++;
40
+
41
+ }
42
+
43
+ //1ページ件数に達しなかったときは残りを入れる
44
+
45
+ if(list_count < page_list_count){
46
+
47
+ list[page] = list_row;
34
48
 
35
49
  }
36
50
 
@@ -42,7 +56,7 @@
42
56
 
43
57
  console.log(page_num+"ページ目"); //確認のため出力
44
58
 
45
- for (list_num = 0; list_num < list[page_num].length; list_num++) { //各ページ内のリストをループ
59
+ for (list_num = 1; list_num <= list[page_num].length; list_num++) { //各ページ内のリストをループ
46
60
 
47
61
  output+= '<h3 id="'+page_num+'_'+list_num+'">'+list[page_num][list_num].title+'</h3>';
48
62
 

3

最適化

2017/07/26 05:59

投稿

m.ts10806
m.ts10806

スコア80850

test CHANGED
@@ -12,7 +12,7 @@
12
12
 
13
13
  var list_count = 0; //現在のページの件数
14
14
 
15
- var page = 0;//ページ
15
+ var page = 1;//ページ
16
16
 
17
17
  var list = []; //全体のリスト配列
18
18
 
@@ -38,13 +38,15 @@
38
38
 
39
39
  //全体のリスト配列をループ
40
40
 
41
- for (var page_num = 0; page_num < list.length; page_num++) {
41
+ for (var page_num = 1; page_num <= list.length; page_num++) {
42
42
 
43
- console.log((page_num+1)+"ページ目"); //確認のため出力
43
+ console.log(page_num+"ページ目"); //確認のため出力
44
44
 
45
45
  for (list_num = 0; list_num < list[page_num].length; list_num++) { //各ページ内のリストをループ
46
46
 
47
- output+= '<h3>'+list[page_num][list_num].title+'</h3>';
47
+ output+= '<h3 id="'+page_num+'_'+list_num+'">'+list[page_num][list_num].title+'</h3>';
48
+
49
+ //分かりやすくするため、{ページ番号}_{ページ内のリスト番号}でIDを付与
48
50
 
49
51
  }
50
52
 

2

式の修正

2017/07/26 04:17

投稿

m.ts10806
m.ts10806

スコア80850

test CHANGED
@@ -20,7 +20,7 @@
20
20
 
21
21
  //1ページの最大件数に達するので次のページにポインタを移動
22
22
 
23
- if(list_count <= page_list_count){
23
+ if(list_count >= page_list_count){
24
24
 
25
25
  page++;
26
26
 

1

コメントを追加

2017/07/26 04:14

投稿

m.ts10806
m.ts10806

スコア80850

test CHANGED
@@ -14,9 +14,11 @@
14
14
 
15
15
  var page = 0;//ページ
16
16
 
17
- var list = []; //配列
17
+ var list = []; //全体のリスト配列
18
18
 
19
19
  for (var i = 0; i < data.length; i++) {
20
+
21
+ //1ページの最大件数に達するので次のページにポインタを移動
20
22
 
21
23
  if(list_count <= page_list_count){
22
24
 
@@ -32,11 +34,15 @@
32
34
 
33
35
  }
34
36
 
37
+
38
+
39
+ //全体のリスト配列をループ
40
+
35
41
  for (var page_num = 0; page_num < list.length; page_num++) {
36
42
 
37
- console.log((page_num+1)+"ページ目");
43
+ console.log((page_num+1)+"ページ目"); //確認のため出力
38
44
 
39
- for (list_num = 0; list_num < list[page_num].length; list_num++) {
45
+ for (list_num = 0; list_num < list[page_num].length; list_num++) { //各ページ内のリストをループ
40
46
 
41
47
  output+= '<h3>'+list[page_num][list_num].title+'</h3>';
42
48