まず最初に、angular.js と bootstrap の基本概念を簡単に説明します。 AngularJS は JavaScript フレームワークです。 タグを介して HTML ページに追加できます。 <br> </p> <p>AngularJS はディレクティブを通じて HTML を拡張し、式を通じてデータを HTML にバインドします。 <br> </p> <p>Twitter の Bootstrap は、現在最も人気のあるフロントエンド フレームワークです。 Bootstrap は HTML、CSS、JAVASCRIPT に基づいており、シンプルかつ柔軟で、Web 開発を高速化します。 <br> </p> <p>私は最近 Angular.js を学習しており、学習プロセス中に多くのデモも練習しました。ここにテーブル + ページングを投稿します。 <br> </p> <p>最初に上の画像を見て、最終結果を確認してください: </p> <p style="text-align: center"><img alt="" src="http://files.jb51.net/file_images/article/201604/2016041210511742.gif"></p> <p>Angular.js コード スタイルは非常に人気があると言わざるを得ません。数十行のコードが上記の機能を明確かつ簡潔に実現しています。 <br> </p> <p>まず、テーブルのデータ ソースは Server.js から取得されます。クリックしてダウンロードします。 get で番号を取得すると、ページ単位で表示されます。 <br> </p> <p><strong>1. テーブルは ng-repeat によって表示されます。コードは次のとおりです: </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">ログイン後にコピー</div></div> </div> <p>$index は、repeat のデフォルトのパラメータです。テーブルの列ヘッダーは、データ ソース (json) の最初の行をループするキー値です。もちろん、ブートストラップがテーブルのクラスがテーブル テーブル境界であることを指定する必要がある場合は、 <br /> </p> <p><strong>2. ページングでは ng-repeat も使用されます。ng-repeat は一般的に使用されるコマンドであると言わざるを得ません。 </strong></p> <p>ページング コードは次のとおりです: <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">ログイン後にコピー</div></div> </div> <p>ここでは ng-click イベント ディレクティブが使用されています。 ng-class ディレクティブ <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">ログイン後にコピー</div></div> </div> <p>上記のコードは、ページング用に選択されたスタイルです。 <br /> </p> <p>このテーブルに追加されたページングは偽のページングであり、データはバックエンドから一度取得され、JSON でフィルターされたデータが別のページングを通じて表示されます。 <br /> </p> <p>詳細コード + コメント: <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); }; }); })
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
