jsonデータの配列をページ分割（ページネーション）する方法

Question

jsonデータから50件（最大数は決まってません）ある一覧を作成しています。

$.ajax({
    url: "jsonデータのurl",
    dataType: "json",
    async: false,
    success: function (data) {
      var output = '';
      for (var i = 0; i < data.length; i++) {
        output+= '<h3>'+data[i].title+'</h3>';
      }
      $('#output').append(output);
    }
  });

これを10件づつページ分割（ページネーション）する方法を探しています。
配列から作成した一覧をページ分割する方法が見つけれませんでした。

[
    {
        "title": "\u30bf\u30a4\u30c8\u30eb0"
    },
    {
        "title": "\u30bf\u30a4\u30c8\u30eb1"
    },
    {
        "title": "\u30bf\u30a4\u30c8\u30eb2"
    },
    {
        "title": "\u30bf\u30a4\u30c8\u30eb3"
    },
    {
        "title": "\u30bf\u30a4\u30c8\u30eb4"
    },
    {
        "title": "\u30bf\u30a4\u30c8\u30eb5"
    },
    {
        "title": "\u30bf\u30a4\u30c8\u30eb6"
    },
    {
        "title": "\u30bf\u30a4\u30c8\u30eb7"
    },
    {
        "title": "\u30bf\u30a4\u30c8\u30eb8"
    },
    {
        "title": "\u30bf\u30a4\u30c8\u30eb9"
    },
    {
        "title": "\u30bf\u30a4\u30c8\u30eb10"
    },
    {
        "title": "\u30bf\u30a4\u30c8\u30eb11"
    },
    {
        "title": "\u30bf\u30a4\u30c8\u30eb12"
    },
    {
        "title": "\u30bf\u30a4\u30c8\u30eb13"
    },
    {
        "title": "\u30bf\u30a4\u30c8\u30eb14"
    },
    {
        "title": "\u30bf\u30a4\u30c8\u30eb15"
    },
    {
        "title": "\u30bf\u30a4\u30c8\u30eb16"
    },
    {
        "title": "\u30bf\u30a4\u30c8\u30eb17"
    },
    {
        "title": "\u30bf\u30a4\u30c8\u30eb18"
    },
    {
        "title": "\u30bf\u30a4\u30c8\u30eb19"
    }
]

最終目標はjsonデータから一覧を作成し、
Masonryのプラグインを使ってinfinity scroll出来るまでが目標です。

よろしくお願いいたします。

Answer 1

配列から作成した一覧を分割しようとするのではなく、配列を作る時点で分割してみてはどうでしょうか？

※未検証 実装イメージのみ

var page_list_count = 10;//1ページの件数

var list_count = 1; //現在のページの件数
var page = 1;//ページ
var list = []; //全体のリスト配列
var list_row = []; //ページ内リスト配列
for (var i = 0; i < data.length; i++) {
 //1ページの最大件数に達するので次のページにポインタを移動
 if(list_count > page_list_count){
  list_count = 1;
  list[page] = list_row;
  list_row = [];
  page++;
 } 
 list_row[list_count] = data[i];
  list_count++;
}
//1ページ件数に達しなかったときは残りを入れる
if(list_count <= page_list_count){
 list[page] = list_row;
}

//全体のリスト配列をループ
for (var page_num = 1; page_num < list.length; page_num++) {
 output+= '<h2 id="page_'+page_num+'">ページ'+page_num+'</h2>';
 for (list_num = 1; list_num < list[page_num].length; list_num++) { //各ページ内のリストをループ
 output+= '<h3 id="page_row_'+page_num+'_'+list_num+'">'+list[page_num][list_num].title+'</h3>';
 //分かりやすくするため、{ページ番号}_{ページ内のリスト番号}でIDを付与
 }
}
$('#output').append(output);

こうすることでページ毎にIDもつけやすくなり、infinity scrollへのステップアップも容易になるのではないでしょうか。

Comments

[helloman]

ちょっと挑戦してみます。

[m.ts10806]

未検証なので想定どおりの配列になっているかどうかは逐一console.log()でlistを出力して確認してみてください。

[helloman]

list[page][list_count] = data[i];の部分で

Uncaught TypeError: Cannot set property '0' of undefined
というエラーが出るの確認中です。

[m.ts10806]

あぁ・・・phpと同じ感覚で組んでました（PHPでも良くない書き方かも）
ちょっと修正します。

[helloman]

ありがとうございます。
今進めているのですが、ページ数が実際のものとは異なるようです。
今、一つづつ確認中です。

[m.ts10806]

ほぼ未検証で作ってしまったもので・・・すみません。ご不便かけます。
出来る限り修正していきますので。。。

[helloman]

勉強になります。

[m.ts10806]

JSONの形式にもよるかもしれません。
下記のような適当な配列で作ったdataを突っ込んだところ、現在のソースで思うとおりに出ています。
※ページ番号部分も出すようにしました。

var data = [];
for(var iii = 0;iii<119;iii++){ //任意の件数のデータ
data[iii] = {"title":"タイトル"+(iii+1)};
}

[helloman]

jsonデータを追記してみました。

[m.ts10806]

ありがとうございます。
おそらく私が仮で作った配列と同じ形式の配列になりますね。

[helloman]

20件あるのですが、
3ページと認識されており
調べたら1ページに9件づつとなってました

[helloman]

page_list_countが11に指定すると少し挙動がおかしいようです。
11以外は1つ少なくカウントされてしまいます。
調査します。

[m.ts10806]

forの中のループ回数決めてる比較演算子が　< とか　>　になっているところを >=、<=に変更してみてください（おそらく全部ではなく適宜・・）。もう少しですね。

[m.ts10806]

objectでは__proto__というのが突っ込まれてしまう仕様なので、
http://qiita.com/howdy39/items/35729490b024ca295d6c
__proto__までlengthでカウントされることがあるので注意です。
pageもlist_countも0から入れていったほうがいいかもしれませんね。。

[helloman]

ありがとうございます。
もう少し触ってみます。

[helloman]

こんな感じにしたらいけました。

for (var i=0; i<data.length; i++) {

list_row[list_count] = data[i];

if(list_count >= page_list_count) {
list_count = 0;
list[page] = list_row;
list_row = [];
page++;

}
list_count++;

}

if(1 < list_count) {
list[page] = list_row;
}

[m.ts10806]

無事解決したようでよかったです。次のステップもがんばってください。詰まったときに質問あげてもらえればフォローさせていただきます。