Angular.js+Bootstrap實現表格分頁
最近一直學習Angular.js,在學習過程中也練習了很多的Demo,這里先貼一下表格+分頁。
先上圖看看最終結果:
不得不說Angular.js代碼風格很受人歡迎,幾十行代碼清晰簡潔的實現了上面的功能。
首先表格的數據源來自於,Server.js 點擊下載。通過get取數后分頁顯示。
1.表格是通過ng-repeat來展示的,代碼如下:
<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是repeat的默認參數。表格的列頭是通過數據源(json)的第一行循環取的key值。當然要是Bootstrap要指定table的Class是table table-bordered。
2.分頁是也是用ng-repeat,不得不說ng-repeat是常用指令。分頁代碼如下:
<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>
這里用了ng-click事件指令。還用到ng-class指令
ng-class="{active: isActivePage(page)}"
上面的代碼是為了分頁選中的樣式。
這個表格加分頁是假分頁,從后端取一次數據,通過不同的分頁顯示json的篩選數據。
具體代碼+注釋:
1 <!-- 新 Bootstrap 核心 CSS 文件 --> 2 <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css"> 3 <style> 4 #divMain { 5 width: 500px; 6 margin: 0 auto; 7 margin-top: 100px; 8 } 9 nav { 10 position: relative; 11 width:100%; 12 height: 50px; 13 } 14 .pagination { 15 right: 0px; 16 position: absolute; 17 top: -30px; 18 } 19 nav li { 20 cursor: pointer; 21 } 22 </style> 23 <div id="divMain" ng-app="myApp" ng-controller="myCtrl"> 24 <table class="table table-bordered"> 25 <tr> 26 <th>index</th> 27 <th ng-repeat="(x,y) in items[0]">{{ x }}</th> 28 </tr> 29 <tr ng-repeat="x in items"> 30 <td>{{ $index + 1 }}</td> 31 <td ng-bind="x.Name"></td> 32 <td ng-bind="x.City"></td> 33 <td ng-bind="x.Country"></td> 34 </tr> 35 </table> 36 <nav> 37 <ul class="pagination"> 38 <li> 39 <a ng-click="Previous()"> 40 <span>上一頁</span> 41 </a> 42 </li> 43 <li ng-repeat="page in pageList" ng-class="{active: isActivePage(page)}" > 44 <a ng-click="selectPage(page)" >{{ page }}</a> 45 </li> 46 <li> 47 <a ng-click="Next()"> 48 <span>下一頁</span> 49 </a> 50 </li> 51 </ul> 52 </nav> 53 </div> 54 <script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular.js"></script> 55 <script type="text/javascript"> 56 var app = angular.module("myApp", []); 57 app.controller("myCtrl", function ($scope, $http) { 58 $http.get("Service.js").then(function (response) { 59 //數據源 60 $scope.data = response.data.records; 61 //分頁總數 62 $scope.pageSize = 5; 63 $scope.pages = Math.ceil($scope.data.length / $scope.pageSize); //分頁數 64 $scope.newPages = $scope.pages > 5 ? 5 : $scope.pages; 65 $scope.pageList = []; 66 $scope.selPage = 1; 67 //設置表格數據源(分頁) 68 $scope.setData = function () { 69 $scope.items = $scope.data.slice(($scope.pageSize * ($scope.selPage - 1)), ($scope.selPage * $scope.pageSize));//通過當前頁數篩選出表格當前顯示數據 70 } 71 $scope.items = $scope.data.slice(0, $scope.pageSize); 72 //分頁要repeat的數組 73 for (var i = 0; i < $scope.newPages; i++) { 74 $scope.pageList.push(i + 1); 75 } 76 //打印當前選中頁索引 77 $scope.selectPage = function (page) { 78 //不能小於1大於最大 79 if (page < 1 || page > $scope.pages) return; 80 //最多顯示分頁數5 81 if (page > 2) { 82 //因為只顯示5個頁數,大於2頁開始分頁轉換 83 var newpageList = []; 84 for (var i = (page - 3) ; i < ((page + 2) > $scope.pages ? $scope.pages : (page + 2)) ; i++) { 85 newpageList.push(i + 1); 86 } 87 $scope.pageList = newpageList; 88 } 89 $scope.selPage = page; 90 $scope.setData(); 91 $scope.isActivePage(page); 92 console.log("選擇的頁:" + page); 93 }; 94 //設置當前選中頁樣式 95 $scope.isActivePage = function (page) { 96 return $scope.selPage == page; 97 }; 98 //上一頁 99 $scope.Previous = function () { 100 $scope.selectPage($scope.selPage - 1); 101 } 102 //下一頁 103 $scope.Next = function () { 104 $scope.selectPage($scope.selPage + 1); 105 }; 106 }); 107 }) 108 </script>
非原創,轉自:http://www.cnblogs.com/cyclone77/p/5381278.html