プラグインを使用せず、jQueryでオートページャー

2013/12/07

プラグインを使わずにオートページャーを
作りたかった。

内容としては、

・ターゲットはスマホ
・一定位置スクロールすると自動的に続きのデータが表示される
・プラグインはなし

というもの。

■index.php(オートページャーの方)
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
var page = 0;
var time_flg = ''; //連続で呼び出さないようにするフラグ
var data_limit = 0;

$(function(){
getLimit(); //ページが読み込まれたら表示データのページ数取得
});

/* ページ数取得 */
function getLimit () {
$.ajax({
dataType : 'jsonp',
url : 'limit.php',
success : function(req) {
limitSet(req); //ページ数取得したらセットする
}
});
}

/* ページ数のセット */
function limitSet(limit){
data_limit = limit;
getData(page); //ページ数をセットしたらデータを取得しにいく
}

/* 取得用関数 */
function getData (page) {
var data = {page : page};
$.ajax({
dataType : 'jsonp',
url : 'data.php',
data : data,
success : function (req) {
if (req != '') { //データがある場合はid=dataのところに書き足す
var data_html = $('#data').html();
$('#data').html(data_html + req);
time_flg = 0;
} else {
if (page == 0) { //ページ数が0の場合はデータが無いと表示
$('#data').html('データはありません。');
}
}
$('#loding').hide(); //ローディングアイコンは非表示
}
});
}

/* スクロール位置によってニュースの取得 */
$(window).scroll(function() {
var total = $(document).height();
var position = $(window).scrollTop() + $(window).height();
if (position >= (total - 50)) {
if (page < data_limit && time_flg == 0) { //ページが上限に達しておらず、連続で呼び出させないようにするフラグがOKの場合
time_flg = 1;
page += 1;
$('#loding').show();
setTimeout("getData(page)",300);
}
}
});

</script>
<title>オートページャー</title>
</head>
<body>
<div id="data"></div>
<img src="loding.gif" id="loding" style="display:none;">
</body>
</html>

■data.php(mysql打って情報取得する方)
<?
require_once("database.php");
$mysqli = new mysqli($dbhost, $dbuser, $dbpass, $dbname);
$mysqli->set_charset('UTF-8');

$page = empty($_GET["page"]) ? 0 : $_GET["page"];
$limit = (is_numeric($_GET["limit"]) && $_GET["limit"] <= 10) ? $_GET["limit"] : 10;
$start = $page * 10;

$sql = '
SELECT seq
FROM table
ORDER BY seq DESC
LIMIT ' . $start . ', '.$limit.'
';
$row = $mysqli->query($sql);
$data = '';
while ($rs = $row->fetch_array(MYSQLI_ASSOC)) {
$data .= $rs['seq'] . '<br /><br /><br />';
}
echo $_GET['callback'] . "('" . $data . "');";
?>

■limit.php(ページ数取得)
<?
require_once("database.php");
$mysqli = new mysqli($dbhost, $dbuser, $dbpass, $dbname);
$mysqli->set_charset('UTF-8');
$sql = '
SELECT COUNT(seq) AS cnt
FROM table
';
$row = $mysqli->query($sql);
while ($rs = $row->fetch_array(MYSQLI_ASSOC)) {
$limit = ceil($rs['cnt'] / 10);
}
$limit = ($limit == 0) ? 0 : ($limit - 1);
echo $_GET['callback'] . "('" . ($limit) . "');";
?>

- jQuery

: リアルタイムプレビュー時の改行とテーブルの上部揃え

■サンプル http://sample.taitan916.info/previ ...

: Ajaxのクロスドメイン2

PHPも介せない場合。こちらの方がスマートでよさそう。 jsonpを使うみたい。 ...

: スマホ対応のjQueryのカラーピッカープラグイン

以前の記事でカラーピッカープラグインのことを書いたけど、スマホでは使えない。なの ...

: jquery.cookie.jsで保存期間を時間指定する方法

jquery.cookie.jsで保存期間を1時間等、時間指定したい。公式サイト ...

: jQueryでformの各種パーツ(テキストボックス等)の操作まとめ

jQueryでフォームのセレクトメニューやラジオボタン等、各種パーツを操作するこ ...

: 画像の登録フォームにてjQueryプラグインを用いてWebカメラの映像を撮影させる方法

form内の画像アップロード部分にて、通常であれば画像ファイルを参照させたものを ...

: 無料でジオコーディング(住所→経度緯度)を行う

GoogleMapAPIでジオコーディングをするには、支払い情報を登録したアカウ ...

: jQueryプラグインでクリップボードにコピーする方法(clipboard.js)

ページ上のボタンをクリックすることで特定の文章をクリップボードにコピーしたかった ...

: htmlタグが入った内容の文字を丸める

phpである文字列が○文字以上だった際、省略してお尻に「……」をつけたいという ...

: NicEdit(WYSIWYGエディタ)とテキストエリアの切り替え

チェックボックスのON / OFFでNicEdit(WYSIWYGエディタ)とt ...

PREV: JavaScriptだけでTOPへ戻るリンクの表示
NEXT: PHPやJavaScriptの腕試し

プラグインを使用せず、jQueryでオートページャー

関連記事