[オリジナル] 高度なページング チュートリアル: JQUERY と組み合わせて AJAX ページングを行う
この記事では主に 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 の用途は何ですか?
とても便利です、ありがとうございます
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7333
9
1627
14
1351
46
1262
25
1209
29
Dewuの使い方のチュートリアル
Mar 21, 2024 pm 01:40 PM
Dewu APP は現在非常に人気のあるブランド ショッピング ソフトウェアですが、ほとんどのユーザーは Dewu APP の機能の使い方を知りません。最も詳細な使用方法のチュートリアル ガイドは以下にまとめられています。次に、エディターがユーザーに提供する Dewuduo の概要です。機能の使い方チュートリアルですので、興味のある方はぜひご覧ください！ Dewu の使い方チュートリアル [2024-03-20] Dewu の分割購入方法 [2024-03-20] Dewu クーポンの入手方法 [2024-03-20] Dewu マニュアルのカスタマーサービスの検索方法 [2024-03- 20] デューのピックアップコード確認方法 [2024-03-20] デューの購入場所 [2024-03-20] デューのVIP開放方法 [2024-03-20] デューの返品・交換申請方法
WeChat の支払い音をオフにする方法のチュートリアル
Mar 26, 2024 am 08:30 AM
1. まずWeChatを開きます。 2. 右上隅の[+]をクリックします。 3. QR コードをクリックして支払いを受け取ります。 4. 右上隅にある 3 つの小さな点をクリックします。 5. クリックして支払い到着の音声リマインダーを閉じます。
photoshoppcs5とはどんなソフトですか？ -photoshopcs5の使い方チュートリアル
Mar 19, 2024 am 09:04 AM
PhotoshopCS は Photoshop Creative Suite の略で、Adobe 社が開発したソフトウェアで、グラフィック デザインや画像処理に広く使用されています。PS を学習する初心者として、今日は photoshopcs5 とはどのようなソフトウェアなのか、そして photoshopcs5 の使い方を説明しましょう。 1. photoshop cs5 とはどのようなソフトウェアですか? Adobe Photoshop CS5 Extended は、映画、ビデオ、マルチメディア分野の専門家、3D やアニメーションを使用するグラフィックおよび Web デザイナー、エンジニアリングおよび科学分野の専門家に最適です。 3D イメージをレンダリングし、それを 2D 合成イメージに結合します。動画を簡単に編集
専門家が教える！ Huawei携帯電話で長い画像をカットする正しい方法
Mar 22, 2024 pm 12:21 PM
スマートフォンの継続的な発展に伴い、携帯電話の機能はますます強力になり、その中でも長時間の写真を撮る機能は、多くのユーザーが日常生活で使用する重要な機能の1つになりました。長いスクリーンショットは、ユーザーが長い Web ページ、会話記録、または写真を一度に保存して、簡単に表示したり共有したりできるようにするのに役立ちます。数ある携帯電話ブランドの中でも、ファーウェイの携帯電話はユーザーから高く評価されているブランドの一つでもあり、長い写真のトリミング機能も高く評価されています。この記事では、ファーウェイの携帯電話で長い写真を撮る正しい方法と、ファーウェイの携帯電話をより良く活用するための専門的なヒントを紹介します。
夏はぜひ虹を撮ってみてください
Jul 21, 2024 pm 05:16 PM
夏の雨の後には、美しく魔法のような特別な天気の風景、虹がよく見られます。これも写真撮影ではなかなか出会えない光景で、とてもフォトジェニックです。虹が現れるにはいくつかの条件があります。まず、空気中に十分な水滴があること、そして、低い角度から太陽が当たることです。そのため、雨が上がった午後が最も虹が見えやすいのです。ただし、虹の発生は天候や光などの条件に大きく左右されるため、一般に虹の持続時間は短く、見頃や撮影に最適な時間はさらに短くなります。では、虹に遭遇したとき、どうすれば虹を適切に記録し、高品質の写真を撮ることができるでしょうか? 1. 虹を探す 上記の条件に加えて、虹は通常、太陽光の方向に現れます。つまり、太陽が西から東に輝いている場合、虹は東に現れやすくなります。
PHP チュートリアル: int 型を string に変換する方法
Mar 27, 2024 pm 06:03 PM
PHP チュートリアル: Int 型を文字列に変換する方法 PHP では、整数データを文字列に変換するのが一般的な操作です。このチュートリアルでは、PHP の組み込み関数を使用して int 型を文字列に変換する方法を、具体的なコード例を示しながら紹介します。キャストを使用する: PHP では、キャストを使用して整数データを文字列に変換できます。この方法は非常に簡単で、整数データの前に(文字列)を追加するだけで文字列に変換できます。以下は簡単なサンプルコードです
ce 修飾子の使用に関するチュートリアル? -ce修飾子の値を変更するにはどうすればよいですか?
Mar 18, 2024 pm 12:52 PM
CE モディファイアは非常に実用的なゲーム変更ツールで、プレイヤーがお金や経験値などのゲーム内の一部の値を変更して、ゲームをより簡単にしたり面白くしたりするのに役立ちます。 CE (CheatEngine) は非常に人気のあるゲーム補助ツールですが、今日は ce モディファイアの使い方について説明しましょう。 ce修飾子の値を変更する方法! 1. CE モディファイアの使い方チュートリアル まず、CE モディファイアをダウンロードしてインストールします。ダウンロードが完了したら、任意のディレクトリに解凍します。 2 番目のステップは、[非表示] を開いて CE モディファイアを非表示にすることです。 CE 修飾子の値。CE 修飾子は非常に便利なオープンソースです。
Honor 携帯電話Hongmen システム アップグレード チュートリアル
Mar 23, 2024 pm 12:45 PM
Honor 携帯電話は、その優れたパフォーマンスと安定したシステムにより、常に消費者に支持されています。最近、Honor 携帯電話は新しい Honmeng システムをリリースし、多くのユーザーの注目と期待を集めています。紅夢システムは「天下を統一する」システムとして知られており、よりスムーズな操作感と高いセキュリティを備え、新たなスマートフォンの世界を体験していただけます。多くのユーザーが Honor 携帯電話システムを Honmeng システムにアップグレードしたいと表明していますので、Honor 携帯電話の Honmeng システムのアップグレード チュートリアルを見てみましょう。まず、私は
