AngularJS でテーブル ページネーション レイアウトを実装する
この記事では、AngularJS のテーブル ページネーション レイアウトを紹介し、これをデータに実装する手順について説明します。
AngularJS のテーブル ページネーション レイアウト
テーブルのページネーションは、在庫や製品カタログなど、データのリストを表示するアプリケーションに必要な AngularJS の重要な機能です。
ユーザーは、一度に 1 ページずつクリックするのではなく、1 ページの大量のデータ セットをスクロールできるため、モバイル デバイスに最適な読みやすいレイアウトが提供されます。
テーブルのページ付けを使用すると、テーブルをセクションに分割し、読者が情報を効率的にスキャンできるようにページ付けすることで、長いテーブルをより小さく管理しやすいチャンクに分割できます。
実装するディレクティブのセットと、テーブルを構成するタスクを容易にするいくつかのユーティリティ関数とフィルターを提供します。
主に、テーブルのページネーション機能は ng-repeat を使用して作成され、データのリストを生成し、データをループしてテーブルに表示します。 また、各行をクリックするとイベントをトリガーする ng-click ディレクティブもあります。
AngularJS でテーブル ページネーション レイアウトを実装する手順
AngularJS テーブルのページネーションは、水平または垂直のテーブルでデータをページネーションするための優れた方法です。 AngularJS テーブル ページネーションの最も一般的な使用例は、大きなデータ テーブルを効率的に表示およびナビゲートする方法を提供することです。
静的データと動的データの両方に使用できます。 また、並べ替え、フィルタリング、および検索機能を実装することもできます。
AngularJS テーブルのページネーションを実装するには、次の 4つの手順があります。
- データを JSON 形式でロードし、
dataという変数に保存します。 - コントローラーを作成し、変数を
dataというスコープ変数に割り当てます。 - ページネーション リンクを生成する AngularJS ファクトリを作成し、それらをコントローラーのスコープに追加し、それぞれページ番号とページ数を含むリンクの配列のオブジェクトとして返します。 ファクトリは、使用するページネーション リンクのタイプ (テーブル、ツリー、リスト) と、1 ページに表示されるアイテムの数 (ページ サイズ) も定義します。
- テーブル内の各行の下部にページネーション ボタンを追加します。
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>
JavaScript コード:
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