anjular 简单数据分页

时间 2019-11-24

标签 anjular 简单数据分页繁體版

原文原文链接

纯前端分页，适合数据量少的简单数据前端

HTML 代码post

<nav aria-label="Page navigation">
                        <ul class="pagination" >
                            <li>
                                <a href="#" aria-label="Previous" ng-click="Prevpage()">
                                    <span aria-hidden="true">上一页</span>
                                </a>
                            </li>
                            <li>
                                <a style="color:red;">{{selPage1}}</a>
                            </li>

                            <li>
                                <a href="#" aria-label="Next" ng-click="Nextpage()">
                                    <span aria-hidden="true">下一页</span>
                                </a>
                            </li>

                        </ul>
                        <span class="PageCount">共<span class="page_color">{{ PageCount}}</span>页</span>
                    </nav>

js 代码spa

 1 function page() {                
 2                 $scope.selPage1 = 1;//当前页                           
 3                 var numberpage = $scope.Range.length;//总条数
 4                 $scope.PageCount = Math.ceil($scope.Range.length / 5);//总页数
 5                 //debugger;                
 6                 //首页显示数据
 7                 $scope.Range = Totaldata.slice(0, 5);
 8                 //下一页
 9                 $scope.Nextpage = function () {
10                     debugger;
11                     if ($scope.selPage1 == $scope.PageCount) {
12                         Help.alert("没有下一页，当前已是最后一页");
13                         //$scope.selPage1 = 1;
14                     }
15                     else {
16                         $scope.selPage1 = $scope.selPage1 + 1;
17                     }                    
18                     $scope.Range = Totaldata.slice(5 * ($scope.selPage1 - 1), $scope.selPage1 * 5);
19                 }
20                 //上一页
21                 $scope.Prevpage = function () {
22                     if ($scope.selPage1 == 1) {
23                         Help.alert("没有上一页，当前已是第一页");
24                     }
25                     else {
26                         $scope.selPage1 = $scope.selPage1 - 1;
27                     }
28                     $scope.Range = Totaldata.slice(5 * ($scope.selPage1 - 1), $scope.selPage1 * 5);
29                 }
30             }

调用方法debug

 $http.post("/Assessment/GetGymblueStreetTown")
              .then(function (result) {
              
                  $scope.tables1 = result.data;
               
                  page();
              });