開発中は、特にバックエンドプログラマーにとってはページネーショントラブルに遭遇することがよくありますが、この問題は解決できないため、ページネーションコントロールを見つけて将来の使用のために記録しました。
公式ウェブサイトで使用されている簡単な例を次に示します。
//以下は非同期ページ$ .getJson( 'test/demo1.json'、{curr:6}、function(res){// 6ページからの要求を実証します。返されたjson形式は任意にレイアウトを定義できます({cont: 'page1'、//コンテナ。 id = "page1"> </div>ページ:res.pages、//バックグラウンドカラーを介して取得したページの総数:6、//現在のページジャンプを初期化:関数(e){//ページ$ .getJsonのトリガー後にコールバックを呼び出す( 'test/demo1.json'、{curr:e.curr:e.curr}、pert = e.page = e.pages; // // document.getelementbyid( 'vise1')を書き込む必要はありません。 }); });基本的なページネーション効果が発生します。
他のよりゴージャスな効果が必要な場合は、ソースコードを変更してください。
ページネーションの効果が提示されている場合、最初にそれについて話しましょう。
まず、コントロールレイアウトを参照してください
<script type = "text/javascript" src = "/lib/laypage/laypage.js"> </script>
プラグインのダウンロードアドレス:
次に、プラグインの構成を見てみましょう。
function searchjoinmemberinfopage(){var ccid = parseint($( "#hid_ccid")。val()、10); var savekey = $( "#targetkey")。val(); var pagesize = 10; //以下は、jquery.ajaxを例として使用して非同期ページを実証します。 JSON形式は、レイアウトを任意に定義できます({cont: 'page1'、// container。値はID名、ネイティブDOMオブジェクト、およびjQueryオブジェクトをサポートします。 //継続的に表示されるページ数継続的にスキップ:true、//ページジャンプを最初に開くかどうか:「ホームページ」、//表示されない場合、false last: 'last page'、//表示されない場合、false // set false // false // set false // set false // next: '>」 $ .getjson( '/mobile/ajaxhandler/questionajax.aspx?action = getredisjoinmemberinformationbyid'、{type:2、ccid:ccid、pageindex:e.curr、//現在// varid.getelementbyid( 'usertable');/mobile/ajaxhandler/questionajax.aspx?action=getredisjoinmemberinformationbyIDは、表示されるデータを返す非同期アドレスとページ数を表示します。タイプ:
2、ccid:ccid、pageindex:1、pagesize:savekey:savekeyは、非同期で使用する必要があるパラメーターです。
packagdata(res);この関数は、返されたデータを解析し、それをレンダリングします。
Usertableは、返されたデータを表示するために使用されるDOMノードであり、Page1はページ数のボタンを表示するために使用されるDOMノードです。
今、効果を見てください:
実際には非常にシンプルで、これによりページネーションディスプレイが完成します。
お読みいただきありがとうございます。wulin.comのよりエキサイティングなコンテンツに注意を払い続けることを願っています。