PHP+jQuery+Ajaxでページング効果を実現するjPaginateプラグインの応用、jqueryjpaginate

PHP+jQuery+Ajaxでページング効果を実現するjPaginateプラグインの応用、jqueryjpaginate_PHPチュートリアル。

WBOY

リリース： 2016-07-12 09:07:59

オリジナル

926 人が閲覧しました

PHP+jQuery+Ajax は、ページング効果の jPaginate プラグインアプリケーション、jqueryjpaginate を実装します

jPaginate は、jQuery に基づいた動的スクロールページングプラグインです。非常に興味深いのは、これらのボタンがスクロールできることです。ポイントの両側にある小さな矢印をクリックまたはスライドさせることで、ボタンの前後スクロールを制御できます。

jPaginate プラグインを呼び出す方法は非常に簡単です:

リーリー

プロパティ設定
良いニュースは、jPaginate には多くの属性構成が用意されており、必要なページング効果を簡単にカスタマイズできることです。
設定方法は以下の通りです

リーリー

count: 数値、レコードの総数。
start: 数値、表示を開始するページ番号。例: 3 は 3 ページから開始することを意味します。
display: Number、ページングバーによって表示されるページ数。例: 5 は、一度に 5 つのページ番号を表示することを意味します。
border: ページ番号の境界線を表示するかどうか。 (真/偽)
border_color: 「#d3d3d3」などの境界線の色を設定します。
text_color: 「#68ba64」などのページ番号の色を設定します。
background_color: 「#f7f7f7」など、ページ番号の背景色を設定します。
border_hover_color: マウスをページ番号の上にスライドさせたときのページ番号の境界線の色を設定します。
text_hover_color: マウスをページ番号の上にスライドさせたときのページ番号の色を設定します。
background_hover_color: マウスがページ番号の上をスライドしたときのページ番号の背景の色を設定します。
画像: ページナビゲーション矢印(方向矢印)を表示するかどうか(true/false)
マウス: 「押す」に設定すると、マウスをナビゲーション矢印に向かってスライドすると、ページ番号がスクロールします。「スライド」に設定すると、マウスがナビゲーション矢印を 1 回クリックすると、ページ番号が 1 回スクロールします。
onChange: ページ番号がクリックされたときのコールバック関数。
アプリケーション例: Ajax ページング効果を実現するための PHP + jQuery
まずブログ記事をページ内に一覧表示するためのindex.phpを用意します。
1. JS の引用:

リーリー

プラグインの属性設定は上で詳しく紹介されています。属性カウントは、PHP を通じて $page の合計ページ数を計算します。このパラメーターは、article.php によって取得されます。また、onChange 属性についても説明する必要があります。ページ番号がクリックされると、関数が呼び出され、処理のために、article.php へのページ番号パラメータの非同期送信が実装されます。取得した記事一覧結果そしてページに戻ります、これがAjaxです。もちろん、ここでは簡単なデモンストレーションを行っているだけです。さらに非同期効果が必要な場合は、jQuery の使用法のドキュメントを参照してください。
2. CSS を引用します:
jPaginate はナビゲーションバースタイルを公式に提供しており、非常にクールなスタイルを自分で作成することもできます。

リーリー

3.index.phpの最初のページ。
最初の記事リストを表示する必要があります。コードは次のとおりです

リーリー

ID pagetxt を使用して DIV に PHP コードを追加します:

リーリー

4.article.phpコード。

このコードは、index.php によって送信されたページ番号を取得し、データベースにクエリを実行し、結果を出力するために使用されます。コードは次のとおりです:

リーリー

上記は、Ajax ページング効果を実現するための PHP+jQuery での jPaginate プラグインのアプリケーションを紹介しました。これが皆さんの学習に役立つことを願っています。