アーカイブ

AngularJSとBootstrap3を使ってページング

AngularJSとBootstrap3を使って一覧データをページングで表示するサンプルコードを作成しました。

デモとコードサンプルはこちら。
　
Bootstrap3によるCSS設定、AngularJSのビルトインフィルター、カスタムフィルターなど様々な機能を使用していてコードが少し長くなっているので、３段階のステップに分けて作成しています。
　
※目次をクリックすると目次の下部にコンテンツが表示されます。

配列データをオフセットと表示個数を指定して表示
一覧情報をページ化して表示するには、オフセット（配列内のどのデータから表示するか）と表示個数を制御する必要があります。
　
まず、AngularJSのフィルターを使って、配列内のデータからオフセットと表示個数を指定して表示するサンプルを作成します。
　
表示個数は、下記のようにビルトインフィルターのlimitToを使って制御する事が出来ます。
　
<tr ng-repeat=”item in friends | offset: i_offset | limitTo: i_size”>
　
オフセットは、下記カスタムフィルターを定義し、入力配列データから指定した個数のデータをsliceで除去しています。このカスタムフィルターを使って、指定したオフセット数以降のデータを表示出来ます。
　

myApp.filter('offset', function() {
  return function(input, start) {
    start = parseInt(start);
    return input.slice(start);
  };
});

配列データをページングで表示
１）ページ数の計算、Bootstrap3のpagination属性を使ってページリンク表示
　
１ページ当りの表示件数を基にページ数を計算し、ページ数分のページリンクをBootstrap3のpagination属性を使って表示します。
　
①ページ数の計算
　
itemsPerPageがページ当りの件数で、配列データ数を割ってページ数を求めます。ページ数分のページ番号をリターンします。

$scope.itemsPerPage = 3;
$scope.range = function() {
  $scope.maxPage = Math.ceil($scope.friends.length/$scope.itemsPerPage);
  var ret = [];
  for (var i=1; i<=$scope.maxPage; i++) {
    ret.push(i);
  }
  return ret;
};

　
②Bootstrap3のpagination属性を使ってページリンク表示
　
Bootstrap3のページングの機能http://getbootstrap.com/components/#paginationを使ってページリンクを表示します。
　
上記①で定義したrange()関数を使ってページ番号をリターンし、ページ番号のリンクを表示しています。
ng-repeat="n in range()"

<ul class="pagination">
  <li>
    <a href="#" ng-click="prevPage()">≪ 前へ</a>
  </li>
  <li ng-repeat="n in range()" ng-click="setPage(n)">
    <a href="#">{{n}}</a>
  </li>
  <li>
    <a href="#" ng-click="nextPage()">次へ ≫</a>
  </li>
</ul>

　
２）リンククリック時の動作を定義
　
①現在表示しているページ番号を示す変数の初期値を定義
　
$scope.currentPage = 1;
　
②ページ当りの表示個数
　
<input ng-model="itemsPerPage" type="text">
　
③配列データを表示
　
現在のページ番号$scope.currentPageとページ当りの表示個数を指定して、指定したページのデータを表示します。上記（１）のサンプルコードを同じ仕組みです。
　
<tr ng-repeat="item in friends | offset: (currentPage-1)*itemsPerPage | limitTo: itemsPerPage">
　
④ページ番号リンククリック時の動作を定義
　
ページ番号をクリックすると$scope.currentPageにそのページ番号を設定します。これで上記③のオフセットが変更され、指定したページのデータを表示出来ます。

（HTML）
<li ng-repeat="n in range()" ng-click="setPage(n)">
  <a href="#">{{n}}</a>
</li>
（スクリプト）
$scope.setPage = function(n) {
  $scope.currentPage = n;
};

　
⑤前後のページへのリンク押下時の動作定義
　
上記④と同様に$scope.currentPageの値を更新します。
（ビュー）

<a href="#" ng-click="prevPage()">≪ 前へ</a>
<a href="#" ng-click="nextPage()">次へ ≫</a>

（スクリプト）
$scope.prevPage = function() {
  if ($scope.currentPage > 1) {
    $scope.currentPage--;
  }
};
$scope.nextPage = function() {
  if ($scope.currentPage < maxPage) {
    $scope.currentPage++;
  }
};

ページリンクのCSS設定
現在表示しているページのページリンクの色を変える、先頭ページを表示している場合は"前へ"のリンクを、最後のページを表示している場合は"次へ"のリンクを無効にするように設定します。
　
AngularJSのng-classを使ってBootstrap3のpagenationのactive、disableを動的に設定して切替えます。
　
①現在表示しているページ番号のリンクをアクティブにする
　
AngularJSのng-classを使って、リンクのページ番号nと現在表示しているページ番号currentPageが等しい場合は、"active"のCSSクラスを動的に追加し、色を変更できます。
　
<li ng-repeat="n in range()" ng-class="{active: n == currentPage}" ng-click="setPage(n)">
　
②前後のページへのリンクの有効、無効を切替え
　
上記①と同様にng-classを使って、現在のページが先頭または最後かどうかチェックし、マッチした場合は、"disabled"のCSSクラスを動的に追加し、リンクを無効にします。

（HTML）
<ul class="pagination">
  <li ng-class="prevPageDisabled()">
    <a href="#" ng-click="prevPage()">≪ 前へ</a>
  </li>
　　：
  <li ng-class="nextPageDisabled()">
    <a href="#" ng-click="nextPage()">次へ ≫</a>
  </li>
</ul>
　
（スクリプト）
$scope.prevPageDisabled = function() {
  return $scope.currentPage === 1 ? "disabled" : "";
};

$scope.nextPageDisabled = function() {
  return $scope.currentPage === $scope.maxPage ? "disabled" : "";
};

関連記事の目次

Proudly powered by WordPress