사용자 테이블에 일부 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 행을 가지고 있지만, 실제 응용 프로그램에서, 그것은 페이지 매김을해야 할 더 많은 데이터를 그렇게 관리 할 수있는 많은있다
. 위의 코드는 페이지 당 3 개의 행을 가질 수 있습니다 (4 번째 행은 하나만 있어야 함).질문 (들) :
- 는 AngularJS와 같은 테이블 페이지를 매기는 할 수있는 내장, 쉬운 방법이 있습니까?
- 그렇지 않은 경우 어떤 대안이 가장 좋습니까?
웹에는 수많은 각도 테이블/그리드 모듈이 있습니다. 사용해 보시고 좋아하는 기능으로 선택하십시오 – charlietfl
데이터를 가져올 API를 작성한다면 서버의 페이지 매김을 수행하고 현재 페이지의 레코드를 반환하는 것이 좋습니다. 현재 페이지, 페이지 당 페이지 수, 총 페이지 수 등을 사용하여 페이지 매김 객체를 앞뒤로 보내고 페이지 매김 UI에 사용합니다. – Tyler
사례 및/또는 튜토리얼에 대한 링크를 제공해 주시겠습니까? –