jQueryページングプラグインjqPaginatorの使用例

この記事は、主に jQuery ページング プラグイン jqPaginator の使い方を素早くマスターするのに役立ちます。興味のある友人は参照してください。この記事では、非常に優れた jQuery ページング プラグイン jqPaginator を紹介します。

jqPaginator は、さまざまなアプリケーション シナリオに適した、シンプルで高度にカスタマイズされた jQuery ページネーション コンポーネントです。

はじめに

インターネット上には多くの種類のページングコンポーネントがありますが、非常に「満足のいく」ものを見つけるのは難しいため、jqPaginatorが生まれました。

私の考える理想的なページング コンポーネントは、CSS フレームワークに制限されず、さまざまなスタイルの Web ページで使用できるべきです。私の単純な経験から言えば、この目標を達成するには、高度にカスタマイズされた Html 構造が重要なポイントとなります。そこで、jqPaginator はさまざまなシーンに柔軟に対応できるよう、無理のない範囲でのカスタマイズを心がけています。エフェクトのスクリーンショット: 说 使用手順

例

まず、jQuery と jqpaginator を紹介します。その後、ページングを初期化できます

最初のデモ、Bootstrap スタイルです。ページング。特定のパラメータについては後ほど説明します。ここで理解する必要があるのは、id の代わりに class を使用すると、クラスのすべての要素が初期化されて、上記の「2 ページングのリンク」効果が実現されるということです。

パラメータ

拡張メソッド

jqPaginator は、初期化後のコンポーネントの操作を容易にする 2 つの拡張メソッドを提供します。

$(&#39;#id&#39;).jqPaginator({ totalPages: 100, visiblePages: 10, currentPage: 1, first: &#39;<li class="first">
<a href="javascript:void(0);">First</a></li>&#39;, prev: &#39;<li class="prev">
<a href="javascript:void(0);">Previous</a></li>&#39;, next: &#39;<li class="next">
<a href="javascript:void(0);">Next</a></li>&#39;, last: &#39;<li class="last">
<a href="javascript:void(0);">Last</a></li>&#39;, page: &#39;<li class="page">
<a href="javascript:void(0);">{{page}}</a></li>&#39;, 
onPageChange: function (num) { $(&#39;#text&#39;).html(&#39;当前第&#39; + num + &#39;页&#39;); } });

初期化後、構成を動的に変更します

$('#id').jqPaginator('option', options)

jqPaginatorを破棄します

$('#id').jqPaginator('option', { currentPage: 1 });
$('#id').jqPaginator('destroy')

推奨解決策(背景と組み合わせる):

ホームページがジャンプします特定のバックグラウンドクエリを通じて、総ページ数などのデータをアップロードして、ページング ナビゲーション バーの初期化を容易にし、テーブル内のデータの最初のページを表示します。

各ページ ボタンをクリックすると、Ajax リクエストが送信され、ページ データが json として返され、テーブルに入力されます。この利点は、アイテムの合計数を毎回クエリする必要がないことです。現在のページ データをクエリするだけで済み、高速でデータベースへの負担が軽減されます。具体的なコードは次のとおりです。参考のみにしてください:

$('#id').jqPaginator('destroy');

以上がjQueryページングプラグインjqPaginatorの使用例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。