勉強したことのメモ

webプログラマ見習いが勉強したことのメモ。

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

      2014/05/19

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

内容としては、

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

というもの。

■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

  関連記事

jquery.cookie.jsでcookieを取り扱う

機能拡張の依頼があってそのページを見たら jquery.cookie.jsが読み ...

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

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

jQueryの最新バージョン呼び出しとバージョン確認

<script type="text/javascript" src="h ...

jQueryでドロワーメニューの作成

■やりたかった事 スマホ用サイトにドロワーメニューを設置したかった。 &nbsp ...

画像をサムネイル⇔クリックで拡大(lightbox)

画像をサムネイル表示してクリックしたら大きく表示する というのがlightbox ...

jQuery.browser~みたいなエラーが出た

jQueryのプラグインを使っていて1.9以降だと「jQuery.browser ...

jQueryのappendとprepend

よく忘れるのでメモ。 ■append(後ろに足す) http://semooh. ...

jQueryのCSS変更

jQueryでCSSを触る際、 $("#aaa").css('height',' ...

jQueryで高速化

高速化について調べる機会があったのでメモ。 ------ ・セレクタはclass ...

bootstrap-datetimepickerについて

日付のピッカーはよく見るけど、時間のピッカーはあまり見ないので、 普通のセレクト ...