suchen

Heim >Web-Frontend >js-Tutorial >Angular.js kombiniert mit Bootstrap, um den Tabellenpaginierungscode_AngularJS zu implementieren

Angular.js kombiniert mit Bootstrap, um den Tabellenpaginierungscode_AngularJS zu implementieren

WBOY
WBOYOriginal
2016-05-16 15:05:552010Durchsuche

Zunächst gebe ich Ihnen eine kurze Einführung in die Grundkonzepte von Angular.js und Bootstrap.

AngularJS ist ein JavaScript-Framework. Es kann über das Tag 3f1c4e4b6b16bbbd69b2ee476dc4f83a zu HTML-Seiten hinzugefügt werden.

AngularJS erweitert HTML durch Anweisungen und bindet Daten durch Ausdrücke an HTML.

Bootstrap von Twitter ist derzeit das beliebteste Frontend-Framework. Bootstrap basiert auf HTML, CSS und JAVASCRIPT. Es ist einfach und flexibel und beschleunigt die Webentwicklung.

Ich habe kürzlich Angular.js gelernt und während des Lernprozesses auch viele Demos geübt. Hier werde ich die Tabelle + Paginierung veröffentlichen.

Schauen Sie sich zunächst das Bild oben an, um das Endergebnis zu sehen:

Ich muss sagen, dass der Codestil von Angular.js sehr beliebt ist. Dutzende Codezeilen realisieren die oben genannten Funktionen klar und prägnant.

Zuallererst stammt die Datenquelle der Tabelle von Server.js. Klicken Sie zum Herunterladen. Nachdem die Nummer über get abgerufen wurde, wird sie in Seiten angezeigt.

1. Die Tabelle wird über ng-repeat angezeigt, der Code lautet wie folgt: 

<table class="table table-bordered">
<tr>
<th>index</th>
<th ng-repeat="(x,y) in items[0]">{{ x }}</th>
</tr>
<tr ng-repeat="x in items">
<td>{{ $index + 1 }}</td>
<td ng-bind="x.Name"></td>
<td ng-bind="x.City"></td>
<td ng-bind="x.Country"></td>
</tr>
</table>

$index ist der Standardparameter der Wiederholung. Der Spaltenkopf der Tabelle ist der Schlüsselwert, der durch die erste Zeile der Datenquelle (JSON) geleitet wird. Wenn Bootstrap natürlich angeben muss, dass die Klasse der Tabelle tabellenumrandet ist.

2. Paging verwendet auch ng-repeat. Es muss gesagt werden, dass ng-repeat ein häufig verwendeter Befehl ist.

Der Paging-Code lautet wie folgt: 

<nav>
<ul class="pagination">
<li>
<a ng-click="Previous()">
<span>上一页</span>
</a>
</li>
<li ng-repeat="page in pageList" ng-class="{active: isActivePage(page)}" >
<a ng-click="selectPage(page)" >{{ page }}</a>
</li>
<li>
<a ng-click="Next()">
<span>下一页</span>
</a>
</li>
</ul>
</nav>

Hier wird die ng-click-Ereignisdirektive verwendet. Verwendet auch die ng-class-Direktive 

ng-class="{active: isActivePage(page)}"

Der obige Code ist der ausgewählte Stil für das Paging.

Das zu dieser Tabelle hinzugefügte Paging ist ein Fake-Paging. Die Daten werden einmal vom Backend abgerufen und die JSON-gefilterten Daten werden durch verschiedene Paging angezeigt.

Detaillierter Code + Kommentare: 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格</title> 
</head>
<body>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
#divMain {
width: 500px;
margin: 0 auto;
margin-top: 100px;
}
nav {
position: relative;
width:100%;
height: 50px;
}
.pagination {
right: 0px;
position: absolute;
top: -30px;
}
nav li {
cursor: pointer;
}
</style>
<div id="divMain" ng-app="myApp" ng-controller="myCtrl">
<table class="table table-bordered">
<tr>
<th>index</th>
<th ng-repeat="(x,y) in items[0]">{{ x }}</th>
</tr>
<tr ng-repeat="x in items">
<td>{{ $index + 1 }}</td>
<td ng-bind="x.Name"></td>
<td ng-bind="x.City"></td>
<td ng-bind="x.Country"></td>
</tr>
</table>
<nav>
<ul class="pagination">
<li>
<a ng-click="Previous()">
<span>上一页</span>
</a>
</li>
<li ng-repeat="page in pageList" ng-class="{active: isActivePage(page)}" >
<a ng-click="selectPage(page)" >{{ page }}</a>
</li>
<li>
<a ng-click="Next()">
<span>下一页</span>
</a>
</li>
</ul>
</nav>
</div>
<script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope, $http) {
$http.get("Service.js").then(function (response) {
//数据源
$scope.data = response.data.records;
//分页总数
$scope.pageSize = 5;
$scope.pages = Math.ceil($scope.data.length / $scope.pageSize); //分页数
$scope.newPages = $scope.pages > 5 &#63; 5 : $scope.pages;
$scope.pageList = [];
$scope.selPage = 1;
//设置表格数据源(分页)
$scope.setData = function () {
$scope.items = $scope.data.slice(($scope.pageSize * ($scope.selPage - 1)), ($scope.selPage * $scope.pageSize));//通过当前页数筛选出表格当前显示数据
}
$scope.items = $scope.data.slice(0, $scope.pageSize);
//分页要repeat的数组
for (var i = 0; i < $scope.newPages; i++) {
$scope.pageList.push(i + 1);
}
//打印当前选中页索引
$scope.selectPage = function (page) {
//不能小于1大于最大
if (page < 1 || page > $scope.pages) return;
//最多显示分页数5
if (page > 2) {
//因为只显示5个页数，大于2页开始分页转换
var newpageList = [];
for (var i = (page - 3) ; i < ((page + 2) > $scope.pages &#63; $scope.pages : (page + 2)) ; i++) {
newpageList.push(i + 1);
}
$scope.pageList = newpageList;
}
$scope.selPage = page;
$scope.setData();
$scope.isActivePage(page);
console.log("选择的页：" + page);
};
//设置当前选中页样式
$scope.isActivePage = function (page) {
return $scope.selPage == page;
};
//上一页
$scope.Previous = function () {
$scope.selectPage($scope.selPage - 1);
}
//下一页
$scope.Next = function () {
$scope.selectPage($scope.selPage + 1);
};
});
})
</script>
</body>
</html>

Der Herausgeber wird Ihnen so viel über die Kombination von Angular.js und Bootstrap zur Implementierung von Tabellenpaginierungscode erzählen, ich hoffe, dass es Ihnen hilfreich sein wird!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Empfohlene Methoden zum Entfernen doppelter Werte aus Arrays in JavaScript_Javascript-KenntnissenNächster Artikel：Empfohlene Methoden zum Entfernen doppelter Werte aus Arrays in JavaScript_Javascript-Kenntnissen

In Verbindung stehende Artikel

Mehr sehen