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 zu HTML-Seiten hinzugefügt werden. <br> </p> <p>AngularJS erweitert HTML durch Anweisungen und bindet Daten durch Ausdrücke an HTML. <br> </p> <p>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. <br> </p> <p>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. <br> </p> <p>Schauen Sie sich zunächst das Bild oben an, um das Endergebnis zu sehen: </p> <p style="text-align: center"><img alt="" src="http://files.jb51.net/file_images/article/201604/2016041210511742.gif"></p> <p>Ich muss sagen, dass der Codestil von Angular.js sehr beliebt ist. Dutzende Codezeilen realisieren die oben genannten Funktionen klar und prägnant. <br> </p> <p>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. <br> </p> <p><strong>1. Die Tabelle wird über ng-repeat angezeigt, der Code lautet wie folgt: </strong><br> </p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;"> <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> </pre><div class="contentsignin">Nach dem Login kopieren</div></div> </div> <p>$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. <br /> </p> <p><strong>2. Paging verwendet auch ng-repeat. Es muss gesagt werden, dass ng-repeat ein häufig verwendeter Befehl ist. </strong></p> <p>Der Paging-Code lautet wie folgt: <br /> </p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;"> <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> </pre><div class="contentsignin">Nach dem Login kopieren</div></div> </div> <p>Hier wird die ng-click-Ereignisdirektive verwendet. Verwendet auch die ng-class-Direktive <br /> </p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;"> ng-class="{active: isActivePage(page)}" </pre><div class="contentsignin">Nach dem Login kopieren</div></div> </div> <p>Der obige Code ist der ausgewählte Stil für das Paging. <br /> </p> <p>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. <br /> </p> <p>Detaillierter Code + Kommentare: <br /> </p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;"> <!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"> 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 ? 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 ? $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); }; }); })
