angularjs分页

最新推荐文章于 2024-07-13 21:34:41 发布

weixin_34006965

最新推荐文章于 2024-07-13 21:34:41 发布

阅读量60

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/3101682/blog/1519318

版权

2019独角兽企业重金招聘Python工程师标准>>>

图表的简单分页，功能不全但是采用异步请求的方法，留以后查询吧

  <!-------------------------------------景区画像图表-------------------------------------->
      <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);
                                };      
		
		}
	};
});