AngularJs實現表格分頁

 當頁面列表數據過多時，咱們常常會收到將列表內容分頁的需求，列表內容分頁通常會有兩種作法：

　　一、不須要後臺配合，前臺一次性拿完全部數據，而後進行分頁展現；這種方式只是爲了界面上對用戶更友好，並無實際提高頁面的效率（數據量過大時頁面加載壓力比較大）

　　二、須要後臺配合，後臺對改數據作分頁處理，頁面每次只請求須要展現的該頁面的數據，換頁時須要二次請求，這種方式是比較推薦的

 本文主要來說AngularJs分頁的實現，因此採用第一種作法瞭解分頁作法，不須要後臺作數據分頁上的支持

 下面是AngularJs表格分頁的html代碼

 1 　　　　　　　<table>
 2                 <thead>
 3                 　　<tr>
 4                     　　<th>序號</th>
 5                     　　<th>名稱</th>
10                 　　</tr>
11                 </thead>
12                 <tbody>
13                 　　<tr ng-repeat="item in items">
14                    　　<td>{{$index+1}}</td>
15                     　　<td>{{item.name}}</td>
20                 　　</tr>
21                 </tbody>
22             </table>
23             <div class="row">
24                 <div class="pull-right">
25                     <nav>
26                         <ul class="pagination">
27                             <li>
28                                 <a ng-click="Previous()" role="button">
29                                     <span role="button">上一頁</span>
30                                 </a>
31                             </li>
32                             <li ng-repeat="page in pageList" ng-class="{active: isActivePage(page)}" role="button">
33                                 <a ng-click="selectPage(page)" >{{ page }}</a>
34                             </li>
35                             <li>
36                                 <a ng-click="Next()" role="button">
37                                     <span role="button">下一頁</span>
38                                 </a>
39                             </li>
40                         </ul>
41                     </nav>
42                 </div>
43             </div>

 代碼中首先須要有一個表格結構table，這個table與正常table的創建只有一點區別，就是數據源items是通過分頁處理後的

 而後再下面一個div主要就是換頁的支持，包含上一頁，下一頁，選取固定頁；固然頁面中也可讓用戶本身決定分頁的大小

 1         $scope.pageSize=20;　　//分頁大小，能夠隨意更改  2         $scope.initPageSort=function(item){
 3             $scope.data = item;
 4             $scope.pages = Math.ceil($scope.data.length / $scope.pageSize); //分頁數
 5             $scope.newPages = $scope.pages > 5 ? 5 : $scope.pages;
 6             $scope.pageList = [];
 7             $scope.selPage = 1;
 8             //設置表格數據源(分頁)
 9             $scope.setData = function () {
10                 $scope.items = $scope.data.slice(($scope.pageSize * ($scope.selPage - 1)), ($scope.selPage * $scope.pageSize));//經過當前頁數篩選出表格當前顯示數據
11             };
12             $scope.items = $scope.data.slice(0, $scope.pageSize);
13             //分頁要repeat的數組
14             for (var i = 0; i < $scope.newPages; i++) {
15                 $scope.pageList.push(i + 1);
16             }
17             //打印當前選中頁索引
18             $scope.selectPage = function (page) {
19                 //不能小於1大於最大
20                 if (page < 1 || page > $scope.pages) return;
21                 //最多顯示分頁數5
22                 if (page > 2) {
23                     //由於只顯示5個頁數，大於2頁開始分頁轉換
24                     var newpageList = [];
25                     for (var i = (page - 3); i < ((page + 2) > $scope.pages ? $scope.pages : (page + 2)); i++) {
26                         newpageList.push(i + 1);
27                     }
28                     $scope.pageList = newpageList;
29                 }
30                 $scope.selPage = page;
31                 $scope.setData();
32                 $scope.isActivePage(page);
33                 //console.log("選擇的頁：" + page);
34             }
35         };
36         //設置當前選中頁樣式
37         $scope.isActivePage = function (page) {
38             return $scope.selPage == page;
39         };
40         //上一頁
41         $scope.Previous = function () {
42             $scope.selectPage($scope.selPage - 1);
43         };
44         //下一頁
45         $scope.Next = function () {
46             $scope.selectPage($scope.selPage + 1);
47         };