私は、ユーザーテーブルに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つ必要です)を持つことができます。
質問(複数可):
- はAngularJSは、このようなテーブルをページ分割する内蔵の、簡単な方法がありますか?
- そうでない場合は、どのような選択肢が最適ですか?
ウェブ上に多数の角度テーブル/グリッドモジュールがあります。あなたが好きな機能を使ってそれらを試してみてください – charlietfl
あなたがデータを取得するAPIを書いているなら、サーバー上のページネーションを行い、現在のページのレコードを返すことをお勧めします。現在のページ、ページあたりの数、合計ページなどを使ってページネーションオブジェクトを前後に送信し、これをページングUIに使用します。 – Tyler
例文やチュートリアルへのリンクをお願いしますか? –