2017-11-27 10 views
0

私は、ユーザーテーブルにJSON(ダミー)データをいくつか集めました。AngularJSデータテーブルをページ分割する

var root = 'https://jsonplaceholder.typicode.com'; 
 

 
// Create an Angular module named "usersApp" 
 
var app = angular.module("usersApp", []); 
 

 
// Create controller for the "usersApp" module 
 
app.controller("usersCtrl", ["$scope", "$http", function($scope, $http) { 
 
    var url = root + "/users" 
 
    $http.get(url) 
 
    .then(function(data) { 
 
     $scope.users = data.data; 
 
    }); 
 
}]);
.search-box { 
 
    margin: 5px; 
 
} 
 

 
.panel-heading { 
 
    font-weight: bold; 
 
} 
 

 
.table-container .panel-body { 
 
    padding: 0; 
 
} 
 

 
.table-container table tr th { 
 
    font-weight: bold; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class="container" data-ng-app="usersApp"> 
 
    <div class="panel panel-default table-container"> 
 
    <div class="panel-heading">Users</div> 
 
    <div class="panel-body" data-ng-controller="usersCtrl"> 
 
     <div class="row"> 
 
     <div class="col-sm-12"> 
 
      <div class="form-group search-box"> 
 
      <input type="text" class="form-control" id="search" placeholder="Search User" data-ng-model="search"> 
 
      </div> 
 
     </div> 
 
     <div class="col-sm-12"> 
 
      <table class="table table-striped" id="dataTable"> 
 
      <thead> 
 
       <tr> 
 
       <th>Full name</th> 
 
       <th>Email</th> 
 
       <th>City</th> 
 
       <th>Street</th> 
 
       <th>Suite</th>     
 
       </tr> 
 
      </thead> 
 
      <tbody> 
 
       <tr data-ng-repeat="user in users|filter:search"> 
 
       <td>{{user.name}}</td> 
 
       <td><a href="mailto:{{user.email}}">{{user.email}}</a></td> 
 
       <td>{{user.address.city}}</td> 
 
       <td>{{user.address.street}}</td> 
 
       <td>{{user.address.suite}}</td> 
 
       </tr> 
 
      </tbody> 
 
      </table> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div>

テーブルには10行のみを持っているが、現実世界のアプリで、それをページ分割する必要が管理するための多くのデータがあります。上記のものは、1ページに3行(4番目の行は1つ必要です)を持つことができます。

質問(複数可):

  1. はAngularJSは、このようなテーブルをページ分割する内蔵の、簡単な方法がありますか?
  2. そうでない場合は、どのような選択肢が最適ですか?
+0

ウェブ上に多数の角度テーブル/グリッドモジュールがあります。あなたが好きな機能を使ってそれらを試してみてください – charlietfl

+0

あなたがデータを取得するAPIを書いているなら、サーバー上のページネーションを行い、現在のページのレコードを返すことをお勧めします。現在のページ、ページあたりの数、合計ページなどを使ってページネーションオブジェクトを前後に送信し、これをページングUIに使用します。 – Tyler

+0

例文やチュートリアルへのリンクをお願いしますか? –

答えて

0

Angularjsにはページ設定機能が組み込まれていません。 angular-ui-gridのようなサードパーティのモジュールを使用する必要があります。または、これを試すことができます<https://codepen.io/khilnani/pen/qEWojX>