<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>
时间: 2024-11-10 00:19:38