~Linux、MySQLからAJAXまでAngular2とBootstrap3を使ってページングAngular2とBootstrap3を使って一覧データをページングで表示するサンプルコードを作成しました。※Angular2の2.0.0版、TypeScriptを使って確認したものです。(デモはv4.4.3、v2.0.0で動作確認)Bootstrap3によるCSS設定、Angular2のビルトインパイプSliceなどの機能を使用していてコードが少し長くなっているので、2段階のステップに分けて作成しています。※目次をクリックすると目次の下部にコンテンツが表示されます。1.配列データをページングで表示2.ページリンクのCSS設定3.デモ配列データをページングで表示1)ページ数の計算、Bootstrap3のpagination属性を使ってページリンク表示1ページ当りの表示件数を基にページ数を計算し、ページ数分のページリンクをBootstrap3のpagination属性を使って表示します。1ページ数の計算itemsPerPageがページ当りの件数で、配列データ数を割ってページ数を求めます。ページ数分のページ番号をリターンします。ret;};2Bootstrap3のpagination属性を使ってページリンク表示Bootstrap3のページングの機能を使ってページリンクを表示します。上記1で定義したrange()関数を使ってページ番号をリターンし、ページ番号のリンクを表示しています。現在のページ番号currentPageとページ当りの表示個数を指定して、指定したページのデータを表示します。slice:(currentPage-1)*itemsPerPage:currentPage*itemsPerPage”>※ビルトインパイプSliceの使用法についてはこちら。4ページ番号リンククリック時の動作を定義ページ番号をクリックするとcurrentPageにそのページ番号を設定します。これで上記3のオフセットが変更され、指定したページのデータを表示出来ます。上記4と同様にcurrentPageの値を更新します。現在表示しているページのページリンクの色を変える、先頭ページを表示している場合は”前へ”のリンクを、最後のページを表示している場合は”次へ”のリンクを無効にするように設定します。Angular2のng-classを使ってBootstrap3のpagenationのactive、disableを動的に設定して切替えます。1現在表示しているページ番号のリンクをアクティブにするAngular2のngClassディレクティブを使って、リンクのページ番号nと現在表示しているページ番号currentPageが等しい場合は、”active”のCSSクラスを動的に追加し、色を変更できます。※ngClassディレクティブの使用方法はこちら。currentPage}”(click)=”setPage(n)”>2前後のページへのリンクの有効、無効を切替え上記1と同様にngClassディレクティブを使って、現在のページが先頭または最後かどうかチェックし、マッチした場合は、”disabled”のCSSクラスを動的に追加し、リンクを無効にします。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。