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         };