AngularJS에서 테이블 페이지 매김 레이아웃 구현
이 기사에서는 AngularJS의 테이블 페이지 매김 레이아웃을 소개하고 이를 데이터에 구현하는 단계를 안내합니다.
AngularJS의 테이블 페이지 매김 레이아웃
테이블 페이지 매김은 재고 또는 제품 카탈로그와 같은 데이터 목록을 표시하는 모든 애플리케이션에 필요한 AngularJS의 필수 기능입니다.
사용자가 한 번에 한 페이지를 클릭하지 않고 한 페이지에서 많은 데이터 집합을 스크롤할 수 있어 모바일 장치에 적합한 읽기 쉬운 레이아웃을 제공합니다.
테이블 페이지 매김을 사용하면 독자가 정보를 효율적으로 스캔할 수 있도록 테이블을 섹션으로 분할하고 페이지를 매겨 긴 테이블을 더 작고 관리하기 쉬운 청크로 나눌 수 있습니다.
구현해야 할 일련의 지시어와 일부 유틸리티 기능 및 필터를 제공하여 테이블 구성 작업을 용이하게 합니다.
주로 테이블의 페이지 매김 기능은 ng-repeat를 사용하여 생성되어 데이터 목록을 생성하고 데이터를 반복하여 테이블에 표시합니다. 또한 각 행을 클릭할 때 이벤트를 트리거하는 ng-click 지시어가 있습니다.
AngularJS에서 테이블 페이지 매김 레이아웃을 구현하는 단계
AngularJS 테이블 페이지 매김은 가로 또는 세로 테이블에서 데이터를 페이지 매김하는 훌륭한 방법입니다. AngularJS 테이블 페이지 매김의 가장 일반적인 사용 사례는 대용량 데이터 테이블을 보고 탐색하는 효율적인 방법을 제공하는 것입니다.
정적 및 동적 데이터 모두에 사용할 수 있습니다. 또한 정렬, 필터링 및 검색 기능을 구현할 수 있습니다.
AngularJS 테이블 페이지 매김을 구현하는 네 단계가 있습니다.
- 데이터를 JSON 형식으로 로드하고
data라는 변수에 저장합니다. - 컨트롤러를 만들고
data라는 범위 변수에 변수를 할당합니다. - 페이지 매김 링크를 생성하고 컨트롤러 범위에 추가한 다음 각각 페이지 번호와 페이지 수와 함께 링크 배열의 개체로 반환하는 AngularJS 팩터리를 만듭니다. 팩터리는 또한 사용하려는 페이지 매김 링크 유형(테이블, 트리, 목록)과 한 페이지에 표시되는 항목 수(페이지 크기)를 정의합니다.
- 테이블 내부의 각 행 하단에 페이지 매김 버튼을 추가합니다.
AngularJS의 테이블 페이지 매김을 더 잘 이해하기 위한 예를 살펴보겠습니다.
HTML 코드:
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script data-require="angular.js@*" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
<script src="services.js"></script>
<script src="main.js"></script>
</head>
<body>
<div ng-app="paginationApp">
<div style="margin-left:5px;margin-top:10px" ng-controller="mainCtrl">
<pgn-table conf="config"></pgn-table>
</div>
</div>
</body>
</html>
자바스크립트 코드:
var myApp = angular.module('paginationApp');
myApp.controller('mainCtrl', function($scope,demo) {
demo.then(function(data){
$scope.config.myData=data;
});
$scope.config = {
heads: ['name', 'age']
};
});
myApp.directive('pgnTable', ['$compile',
function($compile) {
return {
restrict: 'E',
templateUrl: 'Sample.html',
replace: true,
scope: {
conf: "="
},
controller: function($scope) {
$scope.currentPage=1;
$scope.numLimit=6;
$scope.start = 0;
$scope.$watch('conf.myData',function(newVal){
if(newVal){
$scope.pages=Math.ceil($scope.conf.myData.length/$scope.numLimit);
}
});
$scope.hideNext=function(){
if(($scope.start+ $scope.numLimit) < $scope.conf.myData.length){
return false;
}
else
return true;
};
$scope.hidePrev=function(){
if($scope.start===0){
return true;
}
else
return false;
};
$scope.nextPage=function(){
console.log("next pages");
$scope.currentPage++;
$scope.start=$scope.start+ $scope.numLimit;
console.log( $scope.start)
};
$scope.PrevPage=function(){
if($scope.currentPage>1){
$scope.currentPage--;
}
console.log("next pages");
$scope.start=$scope.start - $scope.numLimit;
console.log( $scope.start)
};
},
compile: function(elem) {
return function(ielem, $scope) {
$compile(ielem)($scope);
};
}
};
}
]);
그 후, 우리는 테이블에서 다음과 같은 임의의 정보를 사용합니다.
{
"demo": [{
"name": "Adil",
"age": 21
}, {
"name": "Steve",
"age": 34
}, {
"name": "John",
"age": 23
}, {
"name": "Awaq",
"age": 22
}, {
"name": "Bernard",
"age": 26
}, {
"name": "Naiman",
"age": 23
}, {
"name": "Rotan",
"age": 45
}, {
"name": "David",
"age": 32
}, {
"name": "Jade",
"age": 32
}, {
"name": "Reven",
"age": 22
}, {
"name": "Philp",
"age": 28
}, {
"name": "Salt",
"age": 38
}]
}
위 코드의 라이브 데모를 확인하려면 여기를 클릭하십시오.
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook