Angular.js中的分页

时间:2016-02-28 20:27:02

标签: javascript angularjs angularjs-directive pagination angularjs-ng-repeat

我正在尝试在Angular js中添加分页。我的服务器在每个查询上返回大量的行所以我使用一些限制偏移量一次只获得101行(所需的行+ 1)。(构建数组) 20页,为下一个请求重用额外的行值。) 每页的行数= 5 因此,获得101行意味着我可以分页最多20页。因为我已经有一个额外的行所以我知道还有更多的数据,所以在下一页请求再次请求获取行101-201。但我怀疑的是如何在下一页和上一页功能中添加逻辑以及如何构建下一组或上一组数据?

我的app.js- 我第一次要求 - $ scope.startingid = null; $ scope.numberofrows = 101;

   Api.customer.query({ productId : $scope.customer , productperiod :$scope.customerPeriod,startingid:$scope.startingid,numberofrows:$scope.numberofrows }).$promise.then(function(result) {
                        if(result){
                            if(result&&result.length==0){
                                $scope.addErrorAlert("No Customer data found with this productId and Period.", true);
                                $scope.displayPage = 'search';
                                return;
                            }
                          $scope.customerResult = result;
                          $scope.displayPage = 'drill';
                           $scope.showData();
                        } 

//分页逻辑 - 如果结果集是少量数据,我的代码工作正常。但是需要以这样的方式实现它也可以处理大量的行。  几个疑惑 - 1.如何为请求101-201构建数据。 2.下一页和上一页逻辑

      $scope.paged = function (valLists,itemsPerPage)
             {
                var retVal = [];
                 for (var i = 0; i < valLists.length; i++) {
                     if (i % itemsPerPage === 0) {
                         retVal[Math.floor(i / itemsPerPage)] = [valLists[i]];
                     } else {
                         retVal[Math.floor(i / itemsPerPage)].push(valLists[i]);
                     }
                 }
                 return retVal;
             };

        $scope.pagination = function () {
                    $scope.ItemsByPage = $scope.paged( $scope.customerResult, $scope.itemsPerPage );         
                };
        $scope.showData = function( ){
            // $scope.noOfrows = 101;
             $scope.itemsPerPage = 5;
             $scope.currentPage = 0;
             $scope.pagination();
             $scope.range = function() {
                    var rangeSize = 4;
                    var ps = [];
                    var start;

                    start = $scope.currentPage;
                    if ( start > $scope.pageCount()-rangeSize ) {
                      start = $scope.pageCount()-rangeSize+1;
                    }

                    for (var i=start; i<start+rangeSize; i++) {
                      ps.push(i);
                    }
                    return ps;
                  };

              $scope.prevPage = function() {
                if ($scope.currentPage > 0) {
                  $scope.currentPage--;
                }
              };

              $scope.DisablePrevPage = function() {
                return $scope.currentPage === 0 ? "disabled" : "";

                //?? TODO add logic for samething as disabled next page and build table data
              };

              $scope.pageCount = function() {
                return Math.ceil($scope.customerResult.length/$scope.itemsPerPage)-1;
              };

              $scope.nextPage = function() {
                if ($scope.currentPage < $scope.pageCount()) {
                  $scope.currentPage++;
                }
              };

              $scope.DisableNextPage = function() {
                  if($scope.currentPage === $scope.pageCount()){
                      if($scope.noOfrows >$scope.customerResult.length)
                          return $scope.currentPage === $scope.pageCount() ? "disabled" : ""; 
                      $scope.noOfrows =  $scope.noOfrows+ 100;
                      Api.customerReq.query({ productId : $scope.customerProduct , productperiod :$scope.customerPeriod, noOfrows:$scope.noOfrows }).$promise.then(function(result) {
                            if(result){
                                if(result&&result.length==0){
                                    return $scope.currentPage === $scope.pageCount() ? "disabled" : "";
                                    }
                                $scope.showData();// how to build all data on when i query for 101-201 data?
                            }

                  });
            }

              };

              $scope.setPage = function(n) {
                $scope.currentPage = n;
              };

            };

0 个答案:

没有答案