angularjs 分頁

標籤：scope   records   sel   資料   app   logs   java   module   select   

<p>表格</p><!-- 新 Bootstrap 核心 CSS 檔案 --><div id="divMain"><table class="table table-bordered"><tbody><tr><td>{{item.appName}}</td><td>{{item.linkObjectName}}</td><td>{{item.linkAddress}}</td><td><button class="btn_orange ">產生二維碼</button></td><td><button class="btn_orange ">刪除</button></td></tr></tbody></table><ul class="pagination"><li><a> <span>上一頁</span> </a></li><li><a>{{ page }}</a></li><li><a> <span>下一頁</span> </a></li></ul></div><script type="text/javascript" src="angular.js"></script><script type="text/javascript">// <![CDATA[    var app = angular.module("myApp", []);    app.controller("myCtrl", function ($scope, $http) {        $http.get("Service.js").then(function (response) {//資料來源            $scope.data = response.data.records;//分頁總數            $scope.pageSize = 5;            $scope.pages = Math.ceil($scope.data.length / $scope.pageSize); //分頁數            $scope.newPages = $scope.pages > 5 ? 5 : $scope.pages;            $scope.pageList = [];            $scope.selPage = 1;//設定表格式資料源(分頁)            $scope.setData = function () {                $scope.items = $scope.data.slice(($scope.pageSize * ($scope.selPage - 1)), ($scope.selPage * $scope.pageSize));//通過當前頁數篩選出表格當前顯示資料            }            $scope.items = $scope.data.slice(0, $scope.pageSize);//分頁要repeat的數組            for (var i = 0; i < $scope.newPages; i++) {                $scope.pageList.push(i + 1);            }//列印當前選中頁索引            $scope.selectPage = function (page) {//不能小於1大於最大                if (page < 1 || page > $scope.pages) return;//最多顯示分頁數5                if (page > 2) {//因為只顯示5個頁數，大於2頁開始分頁轉換                    var newpageList = [];                    for (var i = (page - 3) ; i < ((page + 2) > $scope.pages ? $scope.pages : (page + 2)) ; i++) {                        newpageList.push(i + 1);                    }                    $scope.pageList = newpageList;                }                $scope.selPage = page;                $scope.setData();                $scope.isActivePage(page);                console.log("選擇的頁：" + page);            };//設定當前選中頁樣式            $scope.isActivePage = function (page) {                return $scope.selPage == page;            };//上一頁            $scope.Previous = function () {                $scope.selectPage($scope.selPage - 1);            }//下一頁            $scope.Next = function () {                $scope.selectPage($scope.selPage + 1);            };        });    })// ]]></script>

 

angularjs 分頁