JQuery_jquery に基づくページャー実装コード

レンダリング例は次のとおりです。



使用方法
jQuery ライブラリ ファイルと JQuery を使用する必要があります。ページャー ライブラリ ファイル(現在のバージョン 1.1)

マテリアルの準備
Paginator CSS スタイル ファイル。次の CSS スタイルをコピーして、Pager.css という名前を付けることができます

コードをコピーします コードは次のとおりです:

#pager ul.pages {
display :ブロック;
ボーダー:なし;
フォントサイズ:10px;
パディング:0; >#pager ul.pages li {
リストスタイル:なし;
ボーダー:1px ソリッド #ccc;
テキスト装飾:なし; 0 0;
padding:5px;
}
#pager ul.pages li:hover {
border:1px Solid #003f7e;
#pager ul.pages li. pgEmpty {
border:1px ソリッド # eee;
color:#eee;
#pager ul.pages li.pgCurrent {
border:1px ソリッド #003f7e; :#000;
フォントの太さ:700;
背景色:#eee>}



サンプルコード


1、ファイル部分を含む

コードをコピー
コードは次のとおりです:
< ;link href="Pager.css" rel="stylesheet " type="text/css" />

; 1 つの CSS スタイル ファイルと 2 つの JS ライブラリ ファイル。

2. HTML 部分 (ページネータ表示 div)

コードをコピー


コードは次のとおりです以下のように:

Biyou Blog jQuery Paginator

> 3. JavaScript 部分 (jQuery プラグイン JQuery Pager 呼び出し)

コードをコピー

コードは次のとおりです:

4. JavaScript コード (JQuery Pager 呼び出し) の分析

(1)$("#pager") 。 pager({}); 部分
pagenumber は、次のような最初のページ番号を表します。 1
pagecount は、次のような合計ページ数を表します。 15
buttonClickCallback は、クリックすることによって呼び出されるメソッドを表します。ページ番号ボタン。:PageClick

(2)PageClick = function(pageclickednumber) {} 部分
PageClick など。クリックされたページ数をカスタマイズするときの関数メソッドを表します。次のようになります。 function(pageclickednumber ){}

jQuery プラグイン JQuery Pager は、JavaScript ページング関数を実現するために、開始ページ番号 pagenumber、最大ページ番号 pagecount、およびページ番号がクリックされたときに buttonClickCallback を呼び出す関数メソッドのみを必要とします。実際のアプリケーションでは、PageClick メソッドの簡単な変更のみが必要です。たとえば、pagenumber と pagecount が変数として設定されている場合は、JQuery Pager を使用して JavaScript ページング関数を実装できます。同時に、jQuery プラグインの JQuery Pager ページング buttonClickCallback メソッドを使用して、豊かな動的効果を実現できます。

デモコード:
http://demo.jb51.net/js/jquery-pager/index.html