jquery+ajaxでページング機能を実装する方法

php中世界最好的语言
リリース: 2018-04-23 16:58:18
オリジナル
3105 人が閲覧しました

今回はjquery+ajaxでページング機能を実装する方法を紹介します。jquery+ajaxでページング機能を実装する際の注意事項は何ですか?以下は実際のケースですので見てみましょう。

HTML

<p id="list"> 
 <ul></ul> 
</p> 
<p id="pagecount"></p>
ログイン後にコピー
CSS

 #list{width:680px; height:530px; margin:2px auto; position:relative} 
#list ul li{float:left;width:220px; height:260px; margin:2px} 
#list ul li img{width:220px; height:220px} 
#list ul li p{line-height:22px} 
#pagecount{width:500px; margin:10px auto; text-align:center} 
#pagecount span{margin:4px; font-size:14px} 
#list ul li#loading{width:120px; height:32px; border:1px solid #d3d3d3; 
position:absolute; top:35%; left:42%; text-align:center; background:#f7f7f7 
url(loading.gif) no-repeat 8px 8px;-moz-box-shadow:1px 1px 2px rgba(0,0,0,.2); 
-webkit-box-shadow:1px 1px 2px rgba(0,0,0,.2); box-shadow:1px 1px 2px rgba(0,0,0,.2);}
ログイン後にコピー

jQuery

最初に変数を宣言し、次の変数は後続のコードで使用されます。

var curPage = 1; //当前页码 
var total,pageSize,totalPage; //总记录数,每页显示数,总页数
ログイン後にコピー
次に、現在のページのデータを取得する関数

: getData() を定義します。この関数では、$.ajax() を使用して POST 非同期リクエストをバックグラウンドの Pages.php に送信し、現在のページ番号を JSON 形式でバックグラウンドに渡します。

リクエストが成功してデータが返されると、対応するデータが変数にアタッチされ、返された商品データリストが対応するコンテナ#list ulにループ表示されます。データが完全にロードされたら、ページング バー関数 getPageBar() を呼び出してページング バーを生成します。

//获取分页条 
function getPageBar(){ 
 //页码大于最大页数 
 if(curPage>totalPage) curPage=totalPage; 
 //页码小于1 
 if(curPage<1) curPage=1; 
 pageStr = "<span>共"+total+"条</span><span>"+curPage 
 +"/"+totalPage+"</span>"; 
 
 //如果是第一页 
 if(curPage==1){ 
 pageStr += "<span>首页</span><span>上一页</span>"; 
 }else{ 
 pageStr += "<span><a href=&#39;javascript:void(0)&#39; rel=&#39;1&#39;>首页</a></span> 
 <span><a href=&#39;javascript:void(0)&#39; rel=&#39;"+(curPage-1)+"&#39;>上一页</a></span>"; 
 } 
 
 //如果是最后页 
 if(curPage>=totalPage){ 
 pageStr += "<span>下一页</span><span>尾页</span>"; 
 }else{ 
 pageStr += "<span><a href=&#39;javascript:void(0)&#39; rel=&#39;"+(parseInt(curPage)+1)+"&#39;> 
 下一页</a></span><span><a href=&#39;javascript:void(0)&#39; rel=&#39;"+totalPage+"&#39;>尾页</a> 
 </span>"; 
 } 
 
 $("#pagecount").html(pageStr); 
}
ログイン後にコピー

最後に、ページが初めてロードされるときに、最初のページ データ、つまり getData(1) をロードします。

$(function(){ 
 getData(1); 
 
});
ログイン後にコピー

PHP

pages.php はフロントエンド ページに対する各 Ajax リクエストを受け取ります、送信されたページ番号 pageNum の値に基づいて、

mysql データベース

からデータを取得し、レコードの総数と総ページ数を計算し、対応するページ番号の下のデータ リストを読み取り、最終結果をフロントエンド ページに返します。 JSON形式で。

最後に、Mysql テーブル構造を添付します

CREATE TABLE IF NOT EXISTS `food` ( 
 `id` int(11) NOT NULL AUTO_INCREMENT, 
 `title` varchar(100) NOT NULL, 
 `pic` varchar(255) NOT NULL, 
 PRIMARY KEY (`id`) 
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
ログイン後にコピー

素晴らしいトピックの共有:

jquery ページング関数の操作 JavaScript ページング関数の操作

この記事の事例を読んだ後、あなたは方法をマスターしたと思います。 PHP 中国語 Web サイトの記事にある他の関連トピックにも注目してください。

推奨書籍:

jQuery による HTML 要素のクリック イベント操作の詳細な説明


jQuery での text() val() と html() の使用の違いは何ですか

以上がjquery+ajaxでページング機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート