Implementieren das Tabellen-Paginierungslayout in AngularJS
- Tabellen-Paginierungslayout in AngularJS
- Schritte zum Implementieren des Tabellen-Paginierungslayouts in AngularJS
Dieser Artikel führt Sie in das Tabellen-Paginierungslayout in AngularJS ein und führt Sie durch die Schritte, um dies in Ihren Daten zu implementieren.
Tabellen-Paginierungslayout in AngularJS
Die Paginierung von Tabellen ist eine wesentliche Funktion in AngularJS, die für jede Anwendung erforderlich ist, die eine Liste von Daten anzeigt, z. B. ein Inventar oder einen Produktkatalog.
Es ermöglicht Benutzern, auf einer Seite durch große Datensätze zu scrollen, anstatt sich jeweils durch eine Seite zu klicken, und bietet ein leicht lesbares Layout, das sich perfekt für mobile Geräte eignet.
Mit der Tabellenpaginierung können Sie eine lange Tabelle in kleinere, besser handhabbare Teile aufteilen, indem Sie die Tabelle in Abschnitte aufteilen und diese paginieren, damit die Leser die Informationen effizient scannen können.
Es bietet eine Reihe von zu implementierenden Anweisungen sowie einige Hilfsfunktionen und Filter, um die Aufgabe der Konfiguration der Tabelle zu erleichtern.
Hauptsächlich wird die Paginierungsfunktion der Tabelle mit ng-repeat erstellt, um eine Liste von Daten zu generieren, die Daten zu durchlaufen und in der Tabelle anzuzeigen. Es hat auch die Direktive ng-click, die ein Ereignis auslöst, wenn auf jede Zeile geklickt wird.
Schritte zum Implementieren des Tabellen-Paginierungslayouts in AngularJS
Die Paginierung von AngularJS-Tabellen ist eine hervorragende Möglichkeit, Daten in einer horizontalen oder vertikalen Tabelle zu paginieren. Der häufigste Anwendungsfall für die Paginierung von AngularJS-Tabellen besteht darin, eine effiziente Möglichkeit zum Anzeigen und Navigieren in großen Datentabellen bereitzustellen.
Wir können es sowohl für statische als auch für dynamische Daten verwenden. Außerdem können Sie damit die Sortier-, Filter- und Suchfunktionen implementieren.
Es gibt vier Schritte, um die Paginierung von AngularJS-Tabellen zu implementieren:
- Laden Sie die Daten im JSON-Format und speichern Sie sie in einer Variablen namens
data. - Erstellen Sie einen Controller und weisen Sie die Variable einer Scope-Variablen namens
datazu. - Erstellen Sie eine AngularJS-Factory, die Paginierungslinks generiert, fügen Sie sie dem Bereich des Controllers hinzu und geben Sie sie als Objekt von Arrays von Links mit Seitenzahlen bzw. Seitenanzahl zurück. Die Fabrik definiert auch, welche Art von Paginierungslinks Sie verwenden möchten (Tabelle, Baum, Liste) und wie viele Elemente auf einer Seite angezeigt werden (Seitengröße).
- Fügen Sie am Ende jeder Zeile in Ihrer Tabelle eine Paginierungsschaltfläche hinzu.
Lassen Sie uns ein Beispiel besprechen, um die Tabellenpaginierung in AngularJS besser zu verstehen.
HTML Quelltext:
<!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-Code:
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);
};
}
};
}
]);
Danach verwenden wir die folgenden zufälligen Informationen in Tabellen.
{
"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
}]
}
Klicken Sie hier, um die Live-Demonstration des obigen Codes zu überprüfen.
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