Angular.js를 사용하여 페이지 번호 매기기/테이블 레이아웃을 구현하는 방법
15개 이상의 오브젝트가 포함된 오브젝트 리터럴을 수신하여 (모든 오브젝트를 일렬로 표시하지는 않음) 적절한 레이아웃으로 표시해야 한다고 가정해 보겠습니다.줄 바꿈/페이지 끝의 타이밍을 제어하는 가장 효율적인 방법은 무엇입니까?
현재 테이블 행에 ng-repeat을 사용하고 있으며, 그 결과 컬럼이 1개인 길고 얇은 테이블이 생성됩니다.
설명을 위해 편집하십시오.오브젝트/더 많은 파라미터 내에 오브젝트가 있을 수 있습니다.제 목표는 다음과 같습니다.
$scope.zones = [
{"name": "Zone 1",
"activity": "1"},
{"name": "Zone 2",
"activity": "1"},
{"name": "Zone 3",
"activity": "0"},
{"name": "Zone 4",
"activity": "0"},
{"name": "Zone 5",
"activity": "0"},
{"name": "Zone 6",
"activity": "0"},
{"name": "Zone 7",
"activity": "1"},
{"name": "Zone 8",
"activity": "0"},
{"name": "Zone 9",
"activity": "0"},
{"name": "Zone 10",
"activity": "0"},
{"name": "Zone 11",
"activity": "1"},
{"name": "Zone 12",
"activity": "1"},
{"name": "Zone 13",
"activity": "0"},
{"name": "Zone 14",
"activity": "0"},
{"name": "Zone 15",
"activity": "1"},
];
표를 사용하여 표시되는 양을 제어하고 다음 페이지로 이동하는 버튼을 컨트롤러에 구현합니다.이 바이올린이 도움이 될 거야
<table class="table table-striped table-condensed table-hover">
<thead>
<tr>
<th class="id">Id <a ng-click="sort_by('id')"><i class="icon-sort"></i></a></th>
<th class="name">Name <a ng-click="sort_by('name')"><i class="icon-sort"></i></a></th>
<th class="description">Description <a ng-click="sort_by('description')"><i class="icon-sort"></i></a></th>
<th class="field3">Field 3 <a ng-click="sort_by('field3')"><i class="icon-sort"></i></a></th>
<th class="field4">Field 4 <a ng-click="sort_by('field4')"><i class="icon-sort"></i></a></th>
<th class="field5">Field 5 <a ng-click="sort_by('field5')"><i class="icon-sort"></i></a></th>
</tr>
</thead>
<tfoot>
<td colspan="6">
<div class="pagination pull-right">
<ul>
<li ng-class="{disabled: currentPage == 0}">
<a href ng-click="prevPage()">« Prev</a>
</li>
<li ng-repeat="n in range(pagedItems.length)"
ng-class="{active: n == currentPage}"
ng-click="setPage()">
<a href ng-bind="n + 1">1</a>
</li>
<li ng-class="{disabled: currentPage == pagedItems.length - 1}">
<a href ng-click="nextPage()">Next »</a>
</li>
</ul>
</div>
</td>
</tfoot>
<tbody>
<tr ng-repeat="item in pagedItems[currentPage] | orderBy:sortingOrder:reverse">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.description}}</td>
<td>{{item.field3}}</td>
<td>{{item.field4}}</td>
<td>{{item.field5}}</td>
</tr>
</tbody>
</table>
fielen 예시의 $125.range는 다음과 같습니다.
$scope.range = function (size,start, end) {
var ret = [];
console.log(size,start, end);
if (size < end) {
end = size;
if(size<$scope.gap){
start = 0;
}else{
start = size-$scope.gap;
}
}
for (var i = start; i < end; i++) {
ret.push(i);
}
console.log(ret);
return ret;
};
페이지 매김에 대해 찾은 가장 간단한 예입니다!http://code.ciphertrick.com/2015/06/01/search-sort-and-pagination-ngrepeat-angularjs/
다음 솔루션을 사용합니다.
다음과 같이 사용하기 때문에 좀 더 간결합니다.ng-repeat="obj in objects | filter : paginate"행을 필터링 합니다.또한 $resource:
http://plnkr.co/edit/79yrgwiwvan3bAG5SnKx?p=preview
제 해결책은 이렇습니다.@Maxim Shoustin의 솔루션에는 정렬에 문제가 있습니다.나는 또한 모든 것을 지시대로 포장한다.유일한 의존관계는 UI입니다.Bootstrap.pagination. 페이지 번호부여에 큰 도움이 되었습니다.
여기 플런커가 있습니다.
여기 github 소스 코드가 있습니다.
여기서 나는 나의 각을 풀었다.서버측에서 좀 더 수정한 JS 페이지화 문제 + 뷰엔드에서 코드를 확인할 수 있습니다.제가 해야 할 일은 두 개의 값의 시작 번호와 끝 번호를 입력하면 반환된 json 배열의 인덱스를 나타냅니다.
여기 각이 있다
var refresh = function () {
$('.loading').show();
$http.get('http://put.php?OutputType=JSON&r=all&s=' + $scope.CountStart + '&l=' + $scope.CountEnd).success(function (response) {
$scope.devices = response;
$('.loading').hide();
});
};
$150을 주의 깊게 보시면요.Count Start 및 $scope.Count Start는 API와 함께 전달되는 두 개의 인수입니다.
다음은 다음 버튼의 코드입니다.
$scope.nextPage = function () {
$('.loading').css("display", "block");
$scope.nextPageDisabled();
if ($scope.currentPage >= 0) {
$scope.currentPage++;
$scope.CountStart = $scope.CountStart + $scope.DevicePerPage;
$scope.CountEnd = $scope.CountEnd + $scope.DevicePerPage;
refresh();
}
};
여기 이전 버튼의 코드가 있습니다.
$scope.prevPage = function () {
$('.loading').css("display", "block");
$scope.nextPageDisabled();
if ($scope.currentPage > 0) {
$scope.currentPage--;
$scope.CountStart = $scope.CountStart - $scope.DevicePerPage;
$scope.CountEnd = $scope.CountEnd - $scope.DevicePerPage;
refresh();
}
};
페이지 번호가 0이면 이전 버튼이 비활성화됩니다.
$scope.nextPageDisabled = function () {
console.log($scope.currentPage);
if ($scope.currentPage === 0) {
return false;
} else {
return true;
}
};
페이핑, 정렬 및 필터가 포함된 표
Angularjs 테이블 정렬 필터 및 페이징의 전체 예를 참조하십시오.
페이지 매김을 위한 가장 심플한 플러그 앤 플레이 솔루션.
https://ciphertrick.com/2015/06/01/search-sort-and-pagination-ngrepeat-angularjs/ #180-1002
ng-module을 커스텀 디렉티브로 치환해야 합니다.
<tr dir-paginate="user in userList|filter:search |itemsPerPage:7">
<td>{{user.name}}</td></tr>
페이지 내에서 추가만 하면 됩니다.
<div align="center">
<dir-pagination-controls
max-size="100"
direction-links="true"
boundary-links="true" >
</dir-pagination-controls>
</div>
index.html 로드로
<script src="./js/dirPagination.js"></script>
모듈에서는 의존관계를 추가합니다.
angular.module('userApp',['angularUtils.directives.dirPagination']);
페이지 번호 매기기만 하면 돼
누군가에게 도움이 될 수도 있어요.
가장 간단한 방법은 슬라이스를 사용하는 것입니다.슬라이스를 파이프에 연결하고 표시할 데이터 부분의 시작 인덱스와 끝 인덱스를 언급합니다.다음과 .
HTML
<table>
<thead>
...
</thead>
<tbody>
<tr *ngFor="let row of rowData | slice:startIndex:endIndex">
...
</tr>
</tbody>
</table>
<nav *ngIf="rowData" aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<a class="page-link" (click)="updateIndex(0)" aria-label="Previous">
<span aria-hidden="true">First</span>
</a>
</li>
<li *ngFor="let i of getArrayFromNumber(rowData.length)" class="page-item">
<a class="page-link" (click)="updateIndex(i)">{{i+1}}</a></li>
<li class="page-item">
<a class="page-link" (click)="updateIndex(pageNumberArray.length-1)" aria-label="Next">
<span aria-hidden="true">Last</span>
</a>
</li>
</ul>
</nav>
타입 스크립트
...
public rowData = data // data you want to display in table
public paginationRowCount = 100 //number of records in a page
...
getArrayFromNumber(length) {
if (length % this.paginationRowCount === 0) {
this.pageNumberArray = Array.from(Array(Math.floor(length / this.paginationRowCount)).keys());
} else {
this.pageNumberArray = Array.from(Array(Math.floor(length / this.paginationRowCount) + 1).keys());
}
return this.pageNumberArray;
}
updateIndex(pageIndex) {
this.startIndex = pageIndex * this.paginationRowCount;
if (this.rowData.length > this.startIndex + this.paginationRowCount) {
this.endIndex = this.startIndex + this.paginationRowCount;
} else {
this.endIndex = this.rowData.length;
}
}
튜토리얼 참조: https://www.youtube.com/watch?v=Q0jPfb9iyE0
언급URL : https://stackoverflow.com/questions/19409492/how-to-achieve-pagination-table-layout-with-angular-js
'source' 카테고리의 다른 글
| 왼쪽 조인에서 조인된 행 수를 카운트하는 중 (0) | 2023.02.23 |
|---|---|
| Spring Boot에서 다양한 데이터베이스 구성을 제공하려면 어떻게 해야 합니까? (0) | 2023.02.23 |
| Yooman과 Bower가 부트스트랩 CSS를 추가하지 않음(각도)JS 제너레이터) (0) | 2023.02.23 |
| 어레이의 일부만 매핑할 수 있습니까? (Array.map()) (0) | 2023.02.23 |
| JavaScript에서 XMLHttpRequest를 사용하여 쿠키(헤더)를 설정하려면 어떻게 해야 합니까? (0) | 2023.02.23 |