実際には、ページングは前に聞いたが、私はどのような需要を知りません。今日は無料を利用して、
友人が構文をES5に変換することができますES6に精通していない場合は、ES6についてのページを書いた
いくつかの要件を行うことができますこの小さなページング機能のために：
ページ;最初のページが表示AJAXコンテンツがロードされ
たタスクの数は、各ページ要求は、自由に設定することができ、
コードをさらに再利用することができ、
前のページが、総ページ数を超えないことがあり、次のページをクリックして、
現在のページの表示内容のために対応する位置のシリアル番号、およびのために再度要求しません現在のシリアル番号をクリックしてください。
ページ数よりインデントではなく、ハード、と興味を持って友人を行うことはできません（怠惰アップ）してみてください
ツール：
男が食べるために、ブートストラップ、jQueryの（怠惰な魔法）;自己参照（なしバージョンの制限）
そして、達成するためのコードがあり、
// 页面布局及样式 <スタイルタイプ= "テキスト/ cssの"> .min { マージン： 0 200pxの。 } のLi { リスト - スタイル：なし。 } #GROUP { 不透明度： 0 。 } </スタイル> の<divクラス= "コンテナ"> <ulのクラス= "リスト・グループ" ID = "グループ"> </ UL> </ div> <NAV ARIA-ラベル= "ページナビゲーション"クラス= "分"ID ="分"> <ULクラス="改ページ"> <LI> <HREF =" ＃」 </a>の <LI> <a href="#"> 1 </a>に</ LI> <LI> <a href="#"> 2 </a>に</ LI> <LI> <HREF = "＃"> 3 </a>の</ LI> <LI> <a href="#"> 4 </a>に</ LI> <LI> <a href="#"> 5 </a>の</ LI> <LI> <a href="#"> 6 </a>に</ LI> <LI> <a href="#"> 7 </a>に</ LI> <LI> <HREF = "＃"> 8 </a>の</ LI> <LI> <a href="#"> 9 </a>に</ LI> <LI> <a href="#"> 10 </a>の</ LI> <LI> <a href="#" aria-label="Next"> <スパンARIA-隠さ= "真">表示＆raquo; </ span>に する</a> ます。</ li> </ ulの> </ NAV>1 // 純粋なので、書き込みをよく見るために、実際には、はるかにページングコード実装を必要としない 2 <スクリプトタイプ= "テキスト/ JavaScriptを">を 3 クラス{GetShow 。4 コンストラクタ（）{ 。5 。6 } 。7 。8 レイ（_data、_index ）{ 9つの // すべての5つのデータを要求する 10 LETは""、_t = 0 =で_li ; 11。 _index _index = <0？：_index; 12である ため（I = _indexを聞かせて、私は<_data.length; I ++は）{ 13であります + = _li '<LI>' + I + _data [I] .article + '</ LI>' ; 14 _tである++ 。 15 もし（_t> = 5 ）{ 16 _t = 0 。 17 ブレーク; 18 } 19 } 20 。$（ "＃グループ"）プリペンド（_li）.animate（{不透明：1 }）; 21 $（ "＃グループの李"）addClass（ "リストグループ・アイテム"。）; 22 } 23 静的荷重（_index）{ 24 LET _show = 新しいGetShow（）。 25 $アヤックス（{ 26 URL： "jsonpackage / article.json" 、 27の 成功：関数（_data、_status）{ 28 であれば（_status === "成功" ）{ 29 _show.lay（_data、_index）。 30 } 31 } 32 }） 33 } 34 } 35 36 関数E（）{ 37 せ_index = 0 。 38 のlet $李= $（ "＃分李"）ではない（$（ "＃分李：最初の"））ではない（$（ "＃分李：最後"。。 ））; 39 のlet $ liFirst = $（ "＃分李：最初の" ）; 40 のlet $ liLast = $（ "＃分李：最後の" ）; 41は、 LETの_GET = 新しい新しいGetShow（）; 42は、 LETの_mark = $ li.index（）; 43である （$ li.click 関数（E）{ 44は E = E || window.event; 45 _mark = $（この）.INDEX （）; 46 // TODO：！コードをアップロードする際に、現在のインデックスと同じページ数を解決するためにクリックし、繰り返し更新されますが5に対処する方法のバグ、あります見つかっ 47は 、IF（$（この =）.INDEX（） Math.floor ==（。。（_インデックス+ 5）/ 5 ））{ 48 リターン falseに; 49 } 他{ 50 $（ "＃グループ"）は、HTML（ ""）、CSS（{不透明度：0。。}）。 51 _index = 5 * $（この）.INDEX（） - 5 。 52 GetShow.load（_index）。 53 } 54 }）; 55 56 $ liFirst.click（関数（）{ 57 であれば（_mark <= 1）{ 戻り 偽} 58 _mark = _mark-1 ; 59 $（ "＃グループ"）は、HTML（ ""）、CSS（{不透明度。。。 0 }）; 60 _index = 5 * _mark - 5 ; 61 GetShow.load（_index）。 62 }）; 63 64 $ liLast.click（関数（）{ 65 _mark = _mark + 1 ; 66 $（ "＃グループ"）は、HTML（ ""）、CSS（{不透明度：0 }）; 67 _index = 5 *（_mark） - 5 ; 68 GetShow.load（_index）; 69 }） 70 } 71 72 関数のmain（）{ 73 せ_index = 0 。 74 GetShow.load（_index）。 75 E（）。 76 } 77 78 window.onload = メイン。 79 </ SCRIPT>