海南北京网站建设/培训心得

 当页面列表数据过多时，我们经常会收到将列表内容分页的需求，列表内容分页一般会有两种做法：

　　1、不需要后台配合，前台一次性拿完所有数据，然后进行分页展示；这种方式只是为了界面上对用户更友好，并没有实际提升页面的效率（数据量过大时页面加载压力比较大）

　　2、需要后台配合，后台对改数据做分页处理，页面每次只请求需要展示的该页面的数据，换页时需要二次请求，这种方式是比较推荐的

 本文主要来讲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         };

转载于:https://www.cnblogs.com/smilecoder/p/6519833.html