jQueryを使って、スクロールしてデータを読み込み、Tableに表示させる

画面の最下部までスクロールしたら、JSONデータを読み込んで表示させる。というのをjQueryを使って実現する方法。

サンプルページ

[html]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryを使ってスクロールしてデータ読み込み</title>
</head>
<body>
<h1>名前と住所</h1>
<div style="padding:20px 20px 100px 20px">
<table class="table table-striped table-bordered" border="1">
<thead>
<tr>
<th>名前</th>
<th>住所</th>
<tr>
</thead>
<tbody>
<tr>
<td>佐藤</td>
<td>千葉県千葉市</td>
</tr>
<tr>
<td>山田</td>
<td>埼玉県さいたま市</td>
</tr>
<tr>
<td>田中</td>
<td>神奈川県横浜市</td>
</tr>
<!– ここに読み込まれたデータが追加される –>
</tbody>
</table>
</div>

<!– jQueryを読み込み –>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
<!–
// データを受け取ったかどうか制御する変数
var gotRequestSuccessfully = false;

// 最下部にスクロールした時に発生するイベント
$(window).bind("scroll", function() {
scrollHeight = $(document).height();
scrollPosition = $(window).height() + $(window).scrollTop();
if ( (scrollHeight – scrollPosition) / scrollHeight <= 0.01) {
//スクロールの位置が下部1%の範囲に来た場合
//console.log(‘最下部’);
if(gotRequestSuccessfully == false){
getData(); // データを取りに行く
}
} else {
//それ以外のスクロールの位置の場合
gotRequestSuccessfully = false;
}
});

//APIからJSONのデータをもらってくる関数
//ajaxだけど同期通信にする
//データはJSONで取得する。
function getData() {
$.ajax({
url: ‘http://www.hugkey.com/test/20131127/api/getDataAPI’, // ここにはJSON形式のデータを送ってくるAPIのURLを書く
type: "GET",
dataType: "JSON", // 形式はJSON
async: false, // 非同期にしない
success: function (data) {
gotRequestSuccessfully = true;
if(data.length != 0){    // データが存在するとき
//console.log(data);
for(var i = 0; i < data.length; i++){
var str = addToTable(data[i]);
$(‘tbody’).append(str);
}
}
}
});
}

// テーブルに追加するためのHTMLを返す
// 引数のdataはJSONで、{"name":"鈴木", "address":"東京都大田区"}という形式を想定
function addToTable(data){
var strTR = ‘<tr bgcolor="red">’;
var str = strTR
+ ‘<td>’ + data.name + ‘</div></td>’
+ ‘<td>’ + data.address + ‘</div></td>’
+ ‘</tr>’;
return str;
}

–>
</script>
</body>
</html>
[/html]

大きく分けると3パートにわかれます。

  1. スクロール位置をトリガーとして、APIからデータを取ってくる
  2. 取ってきたデータをHTMLに直す
  3. 直したデータを.append()を使ってTableの最後尾に追記する

サンプルページ

↑すごいダサいHTMLだけのページですが、一応ちゃんと動作しますので。