ロゴ
menu
HOME > ｊQuery・Javascript > ページ下部に次のデータをロードするjQueryプラグイン jquery.nextpage を作成しました

ページ下部に次のデータをロードするjQueryプラグイン jquery.nextpage を作成しました

こちらの記事に書いた、画面の下まで行くと次のデータを表示するという処理を行うjQueryプラグインぽいものが出来たのでご紹介します。

仕様に関して

表示するデータが事前にXMLファイルで作成されているケースで利用するXML版と、データベースへページ番号を渡し、LIMIT *,* で処理するデータベース版の二種を作りました。XML版は件数が多くなると処理が重くなりますが、既にXMLで書き出されているデータをロードするには便利です。今回利用したXMLはこちらです。別に用意した北海道の住所250件を記録したCSVから成形しています。

データベース版も同様にSQLで全件を書き出せばXML版で利用可能ですが、件数が多くなるとXMLファイルをロードすることそのものが重くなってしまいます。ですので、自分が利用する場合は分けた方が扱い易いなと思い、分けました。データベース版は検索フォームなどを設置し、フォームの値を非同期通信処理で一緒に渡す事で、絞り込むことも可能だと思います。

サンプル

XML版サンプル
クリックで次のデータを表示
画面下端までスクロールすると次のデータを表示
データベース版サンプル
クリックで次のデータを表示
画面下端までスクロールすると次のデータを表示

基本的な挙動はXML版、データベース版共に同じです。

セットアップ

次へボタンを表示

<script type="text/javascript">
   $(function(){
     var html  = '{dataid} ';
         html += '<strong>〒{zipcode}</strong><br />';
         html += '<span style="color:blue">{prefectures}</span>';
         html += '{address1}';
         html += '{address2}';
      
      $('#next_page').nextPage({
         type: 'tap',
         view: 10,
         file: 'xml.php',
         html: html
      });
   });
</script>
<div id="next_page" data-n="0" data-list="0">
  <ul></ul>
  <div id="np_tap">次を読み込む</div>
  <div id="np_loading"><img src="loader.gif" /></div>
</div>

スクロールで表示

<script type="text/javascript">
   $(function(){
     var html  = '{dataid} ';
         html += '<strong>〒{zipcode}</strong><br />';
         html += '<span style="color:blue">{prefectures}</span>';
         html += '{address1}';
         html += '{address2}';
      
      $('#next_page').nextPage({
         type: 'scroll',
         view: 20,
         file:  'xml.php',
         html: html
      });
   });
</script>
<div id="next_page" data-n="0" data-list="0">
  <ul></ul>
  <div id="np_tap">次を読み込む</div>
  <div id="np_loading"><img src="loader.gif" /></div>
</div>

リスト内にデータが展開されますが、上記のようにリスト内で利用するHTMLを設定することで、XMLデータを置換します。

<?xml version="1.0" encoding="UTF-8" ?>
<xml>
  <item>
      <dataid>[0] </dataid>
      <zipcode>640941</zipcode>
      <prefectures>北海道</prefectures>
      <address1>札幌市中央区</address1>
      <address2>旭ケ丘</address2>
  </item>
</xml>

データベース版のXML書き出しPHP

<?php
header("Content-type: application/xml");
echo '<?xml version="1.0" encoding="UTF-8" ?> ' . "\n";
echo '<xml>'."\n";
 
if(!isset($_POST['st']) AND !isset($_POST['ed'])){
  echo '</xml>'."\n";
  exit;
}else{
  if ( !preg_match("/^[0-9]+$/", $_POST['st']) ){
    $_POST['st'] = 0;
  }
  if ( !preg_match("/^[0-9]+$/", $_POST['ed']) ){
    $_POST['ed'] = 0;
  }
}
 
$db = new PDO("sqlite:db/zipcode.sqlite");
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
 
$stmt =  $db->prepare("SELECT * FROM zipcode LIMIT :st,:ed");
$stmt -> execute( array(':st'=>$_POST['st'] , ':ed'=>$_POST['ed'] ) );
 
 
while ($row = $stmt->fetch(PDO::FETCH_ASSOC, PDO::FETCH_ORI_NEXT )) {
  echo '  <item>'."\n";
  echo '      <dataid>['.$row['id'].'] </dataid>'."\n";
  echo '      <zipcode>'.$row['zipcode'].'</zipcode>'."\n";
  echo '      <prefectures>'.$row['prefectures'].'</prefectures>'."\n";
  echo '      <address1>'.$row['address1'].'</address1>'."\n";
  echo '      <address2>'.$row['address2'].'</address2>'."\n";
  echo '  </item>'."\n";
}
echo '</xml>'."\n";

サンプルはSQLiteですが、MySQLでもポスグレでも基本的な考え方は同じで、LIMIT *,* で次のデータを取得し、XMLを書き出しています。

ダウンロード

ダウンロード

データベース版はSQLiteのデータベースが同封されていますので、対応出来るサーバーでご利用下さい。また、アクセス権の設定も必要です。

jquery.nextpage 技術情報

全件を取得して配列化したものを表示件数ごとに纏め、再配列化しています。後はクリックするたびに何番目の配列を取得するかを指定するだけです。なので、データ表示ごとに全件を取得する仕様のため、件数が多いと処理が重くなります。サンプルは250件の住所データですが、1ページにこれだけのデータを表示したいケースもそう無いと思いますので、レスポンスはよほどの事が無い限り問題無いと思います。

現データが何番目であるかといった数値の保存にはjquery.dataを利用しています。

<div id="next_page" data-n="0" data-list="0">

HTMLコードにdata-***="value"といったように、カスタム属性を設定するHTML5の技術ですが、jQuery(javascrit)と親和性が高く、データを一時的に保存しておきたい場合などにとても便利です。もちろん、HTML5ですので対応していない古いブラウザでは利用出来ません。ただ、パソコンで大量のデータを表示する場合はページャー処理をするなどしますので、このような仕組みはページャーボタンを設置し難いスマートフォンホームページでの運用が主になると思います。現在流通しているスマートフォンであれば、ほぼ対応しています。