- 締切済み
Ajaxとページ分割について
下記のようなスクリプトを作成しました。PEARのPagerによって取り込んだdataをページごとに分割して表示する というものです。 問題点は、最初のページを表示させるのは Ajaxによって実行されていますが、サイト上の「次のページ」をクリックしたときにAjaxから外れてしまう。 サイト上でクリックしてページを切り換えるときにも、Ajaxによって行いたいのですが、 どのような スクリプトにすればいいのか、ヒントなりを教えていただければ助かります。 ■p01.htmlファイル ----------------------- <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script type="text/javascript" src="prototype-1.6.0.2.js" ></script> <script type="text/javascript" src="p01.js" ></script> </head> <body> <p></p> <form name="am01"> name：<input type="text" name="data01"> age ：<input type="hidden" name="page_num" value="0"> <input type="button" onClick="ajaxFunction01();" name="exec" value="aaa"/> </form> <div id="result01"></div> </body> </html> ■p01.jsファイル ------------------------- function ajaxFunction01(){ var ajax = new Ajax.Request("p01.php?data01=" + encodeURI(document.am01.data01.value), {method: "GET", onSuccess: gotData}); function gotData(xmlhttp) { document.getElementById("result01").innerHTML = xmlhttp.responseText; } } ■p01.phpファイル -------------------------- <?php require_once("MDB2.php"); $db_type = "mysql"; $sv = "localhost"; $db_name = "phplesson"; $user = "dbuster"; $pass_w = "pass"; $table = "address_t"; $lim = 3; $pg = 0 + $_GET['pg'];//ページ取得の引数 $thispg = 'p01.php'; //サイトのaddress $dsn = "$db_type://$user:$pass_w@$sv/$db_name"; $mdb2 =& MDB2::factory($dsn); if (PEAR::isError($mdb2)){ die($mdb2->getMessage());//"接続エラー" } $res =& $mdb2->query('SELECT * FROM '.$table); if (PEAR::isError($res)){ die($res ->getMessage());//"接続エラー" } if ($mdb2->getOption('result_buffering')) { $dtcnt = $res->numRows();//テーブルに記録された行数 } else { echo '"result_buffering" が無効で行数が取得出来ない'; } $result_types = true ; $mdb2->loadModule('Extended'); $mdb2->setLimit($lim, ($pg * $lim)); $res = $mdb2 -> extended-> autoExecute($table,null,MDB2_AUTOQUERY_SELECT,false,null,true,$result_types); if (PEAR::isError($res)){ die($res->getMessage());//"接続エラー" } if ($dtcnt > (($pg+1) * $lim)){ $nxt = "<a href=\"" .$thispg. "?pg=" .($pg+1). "\">次の" .$lim. "件</a>"; } else { $nxt = "このページが最終"; } if ($pg > 0){ $befr = "<a href=\"" .$thispg. "?pg=" .($pg-1). "\">前の" .$lim. "件</a>"; } else { $befr = "このページが最初"; } ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title> </head> <body> <p> <?php echo $befr ?> <?php echo $nxt ?> </p> <table border="1"> <tr> <td>number</td><td>name</td><td>birthday</td><td>address</td> </tr> <?php while ($row = $res->fetchRow(MDB2_FETCHMODE_ASSOC)){ echo "<tr>"; echo "<td>" .$row["number"]. "</td>"; echo "<td>" .$row["name"]. "</td>"; echo "<td>" .$row["birthday"]. "</td>"; echo "<td>" .$row["address"]. "</td>"; echo "</tr>"; } ?> </table> <?php //切断 $mdb2 -> disconnect(); ?> </body> </html>
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- gau_puzzler
- ベストアンサー率48% (39/81)
「なぜ外れてしまうか」の原因は理解していますか？ ちなみに↓ $nxt = "<a href=\"" .$thispg. "?pg=" .($pg+1). "\">次の" .$lim. "件</a>"; ここでページ遷移が発生するからです ここではページ遷移を発生させず、onclickで次のデータを取得して、 ページを動的に書き換える必要があります jqueryあたりを使ってDOM制御ですね
お礼
ありがとうございます。 なるほど。 「次のベージ」をclickしたときに、 ページを遷移させることを前提にして phpからのデータをどう返すかということのみを考えていました。 ページの遷移を発生させないというところに ポイントがあるんですね。 これは、大きなヒントになりました。ありがとうございます。