プラグインを使用せず、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) . "');";
?>
関連記事
-
IE11でフォーム送信時に二重登録される
Internet Explorer11でform送信時にデータが二重登録されると ...
-
PHPとajaxでチャットの作成
■ソース ・index.php <? error_reporting(E_ ...
-
jQueryで新しく追加した要素に対してイベントがきかない場合の対応
jQueryで新たに追加した要素に対して、 clickイベントを使いたかったけど ...
-
NicEdit(WYSIWYGエディタ)を再描写時にサイズを調整する方法
NicEdit(WYSIWYGエディタ)を設置しているサイトがあった。ページ読み ...
-
adblock(広告削除)設定している場合はページを表示させない
iPhoneのSleipnirでネットをしていると「広告がブロックされたのでペー ...