图表的简单分页,功能不全可是采用异步请求的方法,留之后查询吧javascript
<!-------------------------------------景区画像图表--------------------------------------> <div class="col-lg-6 attachper"> <div class="panel"> <div class="panel-body"> <h6 class="table-head">景区画像</h6> <div ng-controller="spotphotoCtrl" class="col-lg-12 tablestyle"> <table class="table table-striped table-condensed table-lone "> <tr> <th>序号</th><th>景区名称</th><th>客流统计(入)</th><th>车流统计(出)</th><th>门票销售(张)</th><th>门票收入(元)</th><th>接团数量</th> </tr> <tr ng-repeat="x in items"> <td ng-bind="$index + 1"></td><td ng-bind="x.SpotName"></td><td ng-bind="x.TouristsTatistics"></td><td ng-bind="x.TrafficsTatistics"></td><td ng-bind="x.TicketNumber"></td><td ng-bind="x.TicketSales"></td><td ng-bind="x.GroupNumber"></td> </tr> </table> <pagination></pagination> </div> </div> </div>
app.constant("host", "http://172.16.40.XX"); app.controller('spotphotoCtrl',['$scope','$http','host' ,function($scope,$http,host) { $scope.urlfor=function( pagenow, pageSize){ $scope.urla = host + "/API/BigData/GetScenicInfo?pageCurrent="+pagenow+"&pageSize="+pageSize; $http.get($scope.urla).success(function (response) { var models = eval(response); $scope.items =models.Data; }); } }]); /***************************************分页指令*******************************************************/ app.directive('pagination', function() { return { restrict: 'E', template: '<nav style="text-align: center;"><ul class="pagination">'+ '<li><a ng-click="Previous()"><span>上一页</span></a></li>'+ '<li ng-repeat="page in pageList" ng-class="{active: isActivePage(page)}" ><a ng-click="selectPage(page)" >{{ page }}</a></li>'+ '<li><a ng-click="Next()"><span>下一页</span></a></li>'+ '</ul></nav>', replace: true, link: function($scope, element, attrs, controller) { $scope.pages =100 //分页数 $scope.pageSize = 7; $scope.pageList = [];//显示页数 $scope.selPage = 1; //设置表格数据源(分页) $scope.setData = function (page) { $scope.urlfor(page,$scope.pageSize) } $scope.urlfor($scope.selPage,$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(page); $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); }; } }; });