anjular 簡單數據分頁

純前端分頁，適合數據量少的簡單數據

HTML 代碼

<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 代碼

 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             }

調用方法

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