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

編集履歴

回答編集履歴

10

console削除

2017/07/26 07:50

投稿

m.ts10806
m.ts10806

スコア80888

answer CHANGED
@@ -13,7 +13,6 @@
13
13
  if(list_count > page_list_count){
14
14
  list_count = 1;
15
15
  list[page] = list_row;
16
- console.log(list_row);
17
16
  list_row = [];
18
17
  page++;
19
18
  }

9

修正・・・

2017/07/26 07:50

投稿

m.ts10806
m.ts10806

スコア80888

answer CHANGED
@@ -27,10 +27,9 @@
27
27
 
28
28
  //全体のリスト配列をループ
29
29
  for (var page_num = 1; page_num < list.length; page_num++) {
30
- console.log(page_num+"ページ目"); //確認のため出力
31
- output+= '<h2 id="'+page_num+'">ページ'+page_num+'</h2>';
30
+ output+= '<h2 id="page_'+page_num+'">ページ'+page_num+'</h2>';
32
31
  for (list_num = 1; list_num < list[page_num].length; list_num++) { //各ページ内のリストをループ
33
- output+= '<h3 id="'+page_num+'_'+list_num+'">'+list[page_num][list_num].title+'</h3>';
32
+ output+= '<h3 id="page_row_'+page_num+'_'+list_num+'">'+list[page_num][list_num].title+'</h3>';
34
33
  //分かりやすくするため、{ページ番号}_{ページ内のリスト番号}でIDを付与
35
34
  }
36
35
  }

8

修正

2017/07/26 07:48

投稿

m.ts10806
m.ts10806

スコア80888

answer CHANGED
@@ -28,6 +28,7 @@
28
28
  //全体のリスト配列をループ
29
29
  for (var page_num = 1; page_num < list.length; page_num++) {
30
30
  console.log(page_num+"ページ目"); //確認のため出力
31
+ output+= '<h2 id="'+page_num+'">ページ'+page_num+'</h2>';
31
32
  for (list_num = 1; list_num < list[page_num].length; list_num++) { //各ページ内のリストをループ
32
33
  output+= '<h3 id="'+page_num+'_'+list_num+'">'+list[page_num][list_num].title+'</h3>';
33
34
  //分かりやすくするため、{ページ番号}_{ページ内のリスト番号}でIDを付与

7

修正

2017/07/26 07:47

投稿

m.ts10806
m.ts10806

スコア80888

answer CHANGED
@@ -10,24 +10,25 @@
10
10
  var list_row = []; //ページ内リスト配列
11
11
  for (var i = 0; i < data.length; i++) {
12
12
  //1ページの最大件数に達するので次のページにポインタを移動
13
- if(list_count >= page_list_count){
13
+ if(list_count > page_list_count){
14
14
  list_count = 1;
15
15
  list[page] = list_row;
16
+ console.log(list_row);
16
- list_row = []; //各ページ行配列の初期化
17
+ list_row = [];
17
18
  page++;
18
19
  }
19
20
  list_row[list_count] = data[i];
20
- list_count++;
21
+ list_count++;
21
22
  }
22
23
  //1ページ件数に達しなかったときは残りを入れる
23
- if(list_count < page_list_count){
24
+ if(list_count <= page_list_count){
24
25
  list[page] = list_row;
25
26
  }
26
27
 
27
28
  //全体のリスト配列をループ
28
- for (var page_num = 1; page_num <= list.length; page_num++) {
29
+ for (var page_num = 1; page_num < list.length; page_num++) {
29
30
  console.log(page_num+"ページ目"); //確認のため出力
30
- for (list_num = 1; list_num <= list[page_num].length; list_num++) { //各ページ内のリストをループ
31
+ for (list_num = 1; list_num < list[page_num].length; list_num++) { //各ページ内のリストをループ
31
32
  output+= '<h3 id="'+page_num+'_'+list_num+'">'+list[page_num][list_num].title+'</h3>';
32
33
  //分かりやすくするため、{ページ番号}_{ページ内のリスト番号}でIDを付与
33
34
  }

6

修正

2017/07/26 07:44

投稿

m.ts10806
m.ts10806

スコア80888

answer CHANGED
@@ -13,7 +13,7 @@
13
13
  if(list_count >= page_list_count){
14
14
  list_count = 1;
15
15
  list[page] = list_row;
16
- list_row = [];
16
+ list_row = []; //各ページ行配列の初期化
17
17
  page++;
18
18
  }
19
19
  list_row[list_count] = data[i];

5

調整

2017/07/26 07:15

投稿

m.ts10806
m.ts10806

スコア80888

answer CHANGED
@@ -11,10 +11,10 @@
11
11
  for (var i = 0; i < data.length; i++) {
12
12
  //1ページの最大件数に達するので次のページにポインタを移動
13
13
  if(list_count >= page_list_count){
14
- page++;
15
14
  list_count = 1;
16
15
  list[page] = list_row;
17
16
  list_row = [];
17
+ page++;
18
18
  }
19
19
  list_row[list_count] = data[i];
20
20
  list_count++;

4

修正

2017/07/26 06:21

投稿

m.ts10806
m.ts10806

スコア80888

answer CHANGED
@@ -4,23 +4,30 @@
4
4
  ```javascript
5
5
  var page_list_count = 10;//1ページの件数
6
6
 
7
- var list_count = 0; //現在のページの件数
7
+ var list_count = 1; //現在のページの件数
8
8
  var page = 1;//ページ
9
9
  var list = []; //全体のリスト配列
10
+ var list_row = []; //ページ内リスト配列
10
11
  for (var i = 0; i < data.length; i++) {
11
12
  //1ページの最大件数に達するので次のページにポインタを移動
12
13
  if(list_count >= page_list_count){
13
14
  page++;
14
- list_count = 0;
15
+ list_count = 1;
16
+ list[page] = list_row;
17
+ list_row = [];
15
18
  }
16
- list[page][list_count] = data[i];
19
+ list_row[list_count] = data[i];
17
- list_count++;
20
+ list_count++;
18
21
  }
22
+ //1ページ件数に達しなかったときは残りを入れる
23
+ if(list_count < page_list_count){
24
+ list[page] = list_row;
25
+ }
19
26
 
20
27
  //全体のリスト配列をループ
21
28
  for (var page_num = 1; page_num <= list.length; page_num++) {
22
29
  console.log(page_num+"ページ目"); //確認のため出力
23
- for (list_num = 0; list_num < list[page_num].length; list_num++) { //各ページ内のリストをループ
30
+ for (list_num = 1; list_num <= list[page_num].length; list_num++) { //各ページ内のリストをループ
24
31
  output+= '<h3 id="'+page_num+'_'+list_num+'">'+list[page_num][list_num].title+'</h3>';
25
32
  //分かりやすくするため、{ページ番号}_{ページ内のリスト番号}でIDを付与
26
33
  }

3

最適化

2017/07/26 05:59

投稿

m.ts10806
m.ts10806

スコア80888

answer CHANGED
@@ -5,7 +5,7 @@
5
5
  var page_list_count = 10;//1ページの件数
6
6
 
7
7
  var list_count = 0; //現在のページの件数
8
- var page = 0;//ページ
8
+ var page = 1;//ページ
9
9
  var list = []; //全体のリスト配列
10
10
  for (var i = 0; i < data.length; i++) {
11
11
  //1ページの最大件数に達するので次のページにポインタを移動
@@ -18,10 +18,11 @@
18
18
  }
19
19
 
20
20
  //全体のリスト配列をループ
21
- for (var page_num = 0; page_num < list.length; page_num++) {
21
+ for (var page_num = 1; page_num <= list.length; page_num++) {
22
- console.log((page_num+1)+"ページ目"); //確認のため出力
22
+ console.log(page_num+"ページ目"); //確認のため出力
23
23
  for (list_num = 0; list_num < list[page_num].length; list_num++) { //各ページ内のリストをループ
24
- output+= '<h3>'+list[page_num][list_num].title+'</h3>';
24
+ output+= '<h3 id="'+page_num+'_'+list_num+'">'+list[page_num][list_num].title+'</h3>';
25
+ //分かりやすくするため、{ページ番号}_{ページ内のリスト番号}でIDを付与
25
26
  }
26
27
  }
27
28
  $('#output').append(output);

2

式の修正

2017/07/26 04:17

投稿

m.ts10806
m.ts10806

スコア80888

answer CHANGED
@@ -9,7 +9,7 @@
9
9
  var list = []; //全体のリスト配列
10
10
  for (var i = 0; i < data.length; i++) {
11
11
  //1ページの最大件数に達するので次のページにポインタを移動
12
- if(list_count <= page_list_count){
12
+ if(list_count >= page_list_count){
13
13
  page++;
14
14
  list_count = 0;
15
15
  }

1

コメントを追加

2017/07/26 04:14

投稿

m.ts10806
m.ts10806

スコア80888

answer CHANGED
@@ -6,8 +6,9 @@
6
6
 
7
7
  var list_count = 0; //現在のページの件数
8
8
  var page = 0;//ページ
9
- var list = []; //配列
9
+ var list = []; //全体のリスト配列
10
10
  for (var i = 0; i < data.length; i++) {
11
+ //1ページの最大件数に達するので次のページにポインタを移動
11
12
  if(list_count <= page_list_count){
12
13
  page++;
13
14
  list_count = 0;
@@ -15,9 +16,11 @@
15
16
  list[page][list_count] = data[i];
16
17
  list_count++;
17
18
  }
19
+
20
+ //全体のリスト配列をループ
18
21
  for (var page_num = 0; page_num < list.length; page_num++) {
19
- console.log((page_num+1)+"ページ目");
22
+ console.log((page_num+1)+"ページ目"); //確認のため出力
20
- for (list_num = 0; list_num < list[page_num].length; list_num++) {
23
+ for (list_num = 0; list_num < list[page_num].length; list_num++) { //各ページ内のリストをループ
21
24
  output+= '<h3>'+list[page_num][list_num].title+'</h3>';
22
25
  }
23
26
  }