[オリジナル] 高度なページング チュートリアル: JQUERY と組み合わせて AJAX ページングを行う
- WBOYオリジナル
- 2016-06-23 13:56:56776ブラウズ
この記事では主に JQUERY を組み合わせて、リフレッシュ不要のページングを実行します。コードは基本的に前の 2 つの記事と同じですが、若干の変更があります。この記事のページ送りリンクは JS で書かれています。まずコード:
page4.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>结合jquery做ajax分页</title><style>body{ font-size:12px; font-family:Verdana, Arial, Helvetica, sans-serif}.page A{ padding:3px 5px; float:left; border:solid #CCCCCC 1px; text-decoration:none; font-size:12px; margin-left:1px; font-family:Verdana;color:#000000;}.page A.currentpage{ color:#FF0000; border: solid red 1px;}.page A:hover{ background-color:#CCCCCC;}</style><script language="javascript" src="jquery-1.7.1.min.js"></script></head><body><? //PHP分页实例//分页尺寸$page_size=10;$conn=mysql_connect("localhost","root","root") or die(mysql_error());mysql_select_db("xinyang");//计算总行数$total_records=mysql_num_rows(mysql_query("SELECT id from product"));//总页数$total_page=ceil($total_records/$page_size); $query=mysql_query("select * from product limit 0,$page_size") or die(mysql_error());?><div class="recordlist"><ul><?while ($rs=mysql_fetch_array($query)){?> <li><?=$rs["id"]?>-<?=$rs["ename"]?></li><?}?></ul></div><div class='page'></div></body></html><script language="javascript">var total_page=<?=$total_page?>;var url="page5.php?page";//当前链接,格式如下，例如：?aa=1&page ,somepage.php?action=1&cat=1&page$().ready(function(){ $(".page").html(pagination(1)) page_link();})function page_link(){ $(".page A").click(function(){ var page=parseInt($(this).attr("page")) $(".recordlist").load($(this).attr("href"),"",function(){$(".page").html(pagination(page));page_link();}) return false; })}function pagination(current_page){ //翻页链接开始 current_page = current_page<=0 ? 1 : current_page; current_page = current_page>total_page?total_page:current_page; var page_link=""; if (total_page>1) { page_link="<a>一共"+total_page+"页</a>"; page_link+="<a>当前第"+current_page+"页</a>"; page_link+="<a href="+url+"=1 page=1>首页</a>"; if (current_page>1){ //页码大于1的时候，显示上一页翻页链接 var pre_page=current_page-1; page_link+="<a href='"+url+"="+pre_page+"' page="+pre_page+"><<</a>"; } //翻页列表 //步进分页，翻页列表的数字始终只显示9个或者自定义的个数,本例定义只显示9个,当前页左右各显示4个页码 if (total_page>9) { if (current_page>4) { var from=current_page-4; var to=current_page+4; if (to>total_page) { var from=total_page-8; var to=total_page; } } else { var from=1; var to=9; } } else { var from=1; var to=total_page; } for (var i=from;i<=to;i++) { if (i==current_page) { //高亮当前页页码 page_link+="<a href='"+url+"="+i+"' class='currentpage' page="+i+">"+i+"</a>"; } else { page_link+="<a href='"+url+"="+i+"' page="+i+" page="+i+">"+i+"</a>"; } } //页码小于总页数的时候显示下一页翻页链接 var next_page=current_page+1; if(next_page<total_page) { page_link+="<a href='"+url+"="+next_page+"' page="+next_page+">>></a>"; } page_link+="<a href='"+url+"="+total_page+"' page="+total_page+">最后一页</a>"; } return page_link;}</script> page5.php
<? $page=$_GET["page"]+0;$page= $page<=0 ? 1 : $page; //分页尺寸$page_size=10;$conn=mysql_connect("localhost","root","root") or die(mysql_error());mysql_select_db("xinyang");$offset=($page-1)*$page_size;$query=mysql_query("select * from product limit $offset,$page_size") or die(mysql_error());?> <ul><?while ($rs=mysql_fetch_array($query)){?> <li><?=$rs["id"]?>-<?=$rs["ename"]?></li><?}?></ul>
ディスカッションへの返信 (解決策)
この記事の中核となる部分は、JS 部分の page_link() 関数です。ユーザーがクリックしてページをめくる リンク後、スクリプトはロード イベントを div.recordlist にバインドします。これは主に次のページのコンテンツをロードするために使用されます。
jquery マニュアルのロード イベントの説明を参照してください。リモート HTML ファイル コードをロードし、DOM に挿入します。
これを実行すると:
$(".recordlist").load($(this).attr("href")) このようにしてページをめくることができますが、問題が発生することがわかります。ページめくりリンクは変更できないため、コールバック関数でページめくりリンクを再初期化する必要があるため、ページめくりを初期化した後に必ず $(".page").html(pagination(page)) を追加します。ここで、.page Aを再バインドする必要があります。 クリックイベントを定義するので、コールバック関数にpage_link()を追加します
クリックされたオブジェクトは.page Aなので、クリック後にジャンプが発生するため、ジャンプは次のようにする必要があります。終了するため、 return false を追加して terminate する必要があります。 。 。
とりあえずはここまでです。投稿歓迎です~
リクエストするたびにテンプレート全体をロードするだけです
学習しました... …
いくつかのコメント
1 ページネーション機能の目的は出力文字列を結合することであり、テンプレートとしてカプセル化することをお勧めします 2 このページネーションではクエリ条件の導入は考慮されていません。
page5.php の用途は何ですか?
とても便利です、ありがとうございます
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：THINKPHP SQLクエリの問題次の記事：THINKPHP SQLクエリの問題