使用プラグインのブートストラップ・ページネータ

結果を見て示しています。

図1に示すように、適切なjqueryの、ブートストラップ既にブートストラップ・ページネーションプラグインをダウンロード

  <スクリプトSRC = "JS /ベーシック/のjqueryの- 3.4.1.js"> </ SCRIPT> 
  <スクリプトSRC = "JS /ベーシック/のbootstrap.min.js"> </ SCRIPT> 
  <スクリプトSRC = "JS /基本/bootstrap-paginator.js "> </ SCRIPT>

2、HTMLで導入手段

<！ - ページネーションセクション- > 
< divのクラス= "pagination_main" ID = "paginationMain" > 
    < NAV クラス= "テキスト右" >  <！ - テキスト-右右对齐、ブートストラップ中样式- > 
        < UL ID = "改ページ" クラス= "改ページ" > </ UL > 
　　</ NAV > 
</ DIV >

3、JS定義された属性

<SCRIPT>
     // ページング機能
      するvar setPaginator = 関数（totalpages、CurPage）{ 
          $（ '#pagination' ）.bootstrapPaginator（{ 
              bootstrapMajorVersion： 3、// 対応するブートストラップバージョン 
              アラインメント： 'センター' 、
              サイズ '小'、/ / ページサイズ 
              currentPageに：CurPage、// 現在のページ 
              NumberOfPages：5、// ページ数を表示する 
              TotalPages：TotalPages、// ページの合計数 
              itemTexts：機能（タイプ、ページ、現在の）{
                    スイッチ（タイプ）{
                        場合、 "第一" ：
                            リターン "首页" 。
                       ケース「PREV」：
                            リターン「上一页」。
                       ケース「次」：
                            リターン「下一页」。
                       ケース「最後」：
                            リターン「末页」。
                       ケース「ページ」：
                           
                   } 

               } 
               / * * 
                *ページイベントをクリックします
                * @paramイベント[jQueryオブジェクト] 
                * @param originalEvent [DOMネイティブオブジェクト] 
                *タイプ[ボタンの種類]の@param 
                * @paramページ[ボタンに対応するページをクリックしてください] 
                * / 
               onPageClicked：機能（イベント、originalEvent別、タイプ、ページ）{ 
                   CurPage =ページ; // レンダリングクリックページのページ 
                   getListInfo（CurPageを）; // 再描画するデータ
              } 
          }）
      ;}
   </ SCRIPT>

<スクリプト>
         VARのpageSize = 10; // ページ番号のバー
        VAR CurPage = 1; // pは
        // タブウィジェットレンダリング
    　　setPaginator（totalpages、CurPage）
   </スクリプト>

図4に示すように、関連するパラメータを導入します

GitHubの公式ウェブサイトのアドレス：https://github.com/lyonlai/bootstrap-paginator

パラメータ説明：

パラメータ名	データの種類	デフォルト値	説明
bootstrapMajorVersion	数	2	ブートストラップのバージョンを使用すると、2.XページングがDIV要素を使用する必要があり、3.Xはul要素をページングする必要があります。ノートはブートストラップバージョンが対応関係に使用してくださいということ。
サイズ	ストリング	"正常"	:.できるようにする値の文字列で表示サイズの設定制御、ミニ、小、標準、大。値：小さな、通常、大きなサイズのミニバージョン。
アラインメント	ストリング	"左"	：コントロールの整列は、文字列、許可された値である左、センターと右すなわち：左、中央揃え、右揃え。
itemContainerClass	関数		パラメータには、カスタムクラス私たちのクラスのスタイルで文字列を返す関数を受けます。操作ボタンのそれぞれは、制御（描画）で描画されている場合、それは、関数を呼び出します同時に、パラメータとしてボタンについての情報。パラメータ：*タイプの、ページ、現在の* 。入力次に、第一、PREV、ページ：図5つのタイプに示すように、操作ボタンのコントロールのタイプを最後に、。 *ページボタンの最初の数ページが属します。現在は、* 現在のページの全体の制御は最初の数ページであることを示します。
現在のページ	数	1	現在のページを設定します。
ページ数	数	5	タイプ「ページ」の操作ボタンの数：ページ数、すなわち、表示制御が提供されます。
総ページ数	数	1	総ページ数を設定します。
PAGEURL	関数		実際には、コントロールの各操作ボタンは、最終的にハイパーリンクとしてレンダリングされ、このパラメータの役割は、ハイパーリンクを設定することです。このパラメータは関数であり、パラメータは次のとおりです。*タイプの、ページ、現在の。* だから我々は、この機能により、各ボタン操作のための動的リンクアドレスを設定することができます。以下のような：「http://example.com/list/page/」+ページ
shouldShowPage	ブール/機能	真	このパラメータが表示される操作ボタンを設定するために使用されるだけでなく、ブール関数であってもよいです。trueの場合、ディスプレイ。falseの場合、それは表示されません。パラメータはブール値を返す必要機能がある場合は、戻り値は表示するかどうかによって決定されます。この関数は3つのパラメータを取ります： *タイプの、ページ、現在の。*各操作ボタンの表示を制御することができる機能を使用する利点。
itemTexts	関数		テキストは、各操作ボタンの表示を制御します。機能は、3つのパラメータがあります： *タイプの、ページ、現在の。*このパラメータによって、我々は中国にあるボタンを英語で動作することができ、最初のように - >ホーム、最後の - >終了。
tooltipTitles	関数		操作ボタンを設定title属性。機能は、3つのパラメータがあります： *タイプの、ページ、現在の。*
useBootstrapTooltip	ブーリアン	偽	ブートストラップ組み込みのツールチップを使用するかどうかを設定します。真の使用、偽が使用されていない場合、デフォルトでは使用されません。注：あなたが使用している場合は、ブートストラップ・tooltip.jsプラグインを導入する必要があります。
bootstrapTooltipOptions	オブジェクト		Default: { animation: true, html: true, placement: 'top', selector: false, title: "", container: false } 该参数是个js对象。当参数useBootstrapTooltip为true时，会将该对象传给Bootstrap的bootstrap-tooltip.js插件。
onPageClicked	function		为操作按钮绑定click事件。回调函数的参数：*event, originalEvent, type,page。*
onPageChanged	function		为操作按钮绑定页码改变事件，回调函数的参数：*event, oldPage, newPage。*

公共命令：

　　另外该插件还提供了几个公共的命令，可以通过如下方法调用，如：$('#example').bootstrapPaginator("show",3) 调用show命令、$('#example').bootstrapPaginator("getPages") 调用getPages命令。

命令名	参数	返回值	描述
show	page		show命令用于直接跳转到特定的page，与直接点击操作按钮的效果是一样的。使用方法，如：$('#example').bootstrapPaginator("show",3) 直接跳转到第3页， $('#example').bootstrapPaginator("show",100)直接跳转到100页。
showFirst			showFirst 命令用于直接跳转到首页，与点击first按钮相同。使用方法：$('#example').bootstrapPaginator("showFirst")
showPrevious			showPrevious 命令用于直接跳转到上一页。使用方法：$('#example').bootstrapPaginator("showPrevious")
showNext			showNext命令用于直接跳转到下一页。
showLast			showLast 命令用于直接跳转到上一页。
getPages		object	getPages命令用于返回当前控件中显示的页码，以数组形式返回。使用方法：var arra = $('#example').bootstrapPaginator("getPages")
setOptions	object		setOptionsのコマンドは、メソッドを使用して、パラメータをリセットするために使用され:. $（ '＃例' ）bootstrapPaginator（ "をsetOptions"、newoptions）

イベントイベント：

　　：ブートストラップページネータは、二つの事象提供していますページ-クリックしてページ-変更を。たぶん対応する、パラメータとしてイベントを使用onPageClickedとonPageChangedを。

イベント名	コールバック関数	説明
ページをクリック	機能（イベント、 originalEvent、タイプ、ページ）	スープラ。また、パラメータイベント、 originalEventイベントオブジェクトはjqueryの両方で、関連ドキュメントを参照してくださいjQueryの
ページ変更	機能（イベント、 oldPage、 NEWPAGE）	スープラ

使用プラグインのブートストラップ・ページネータ

おすすめ