Javascript Angular.js中的分页

Javascript Angular.js中的分页,javascript,angularjs,angularjs-directive,pagination,angularjs-ng-repeat,Javascript,Angularjs,Angularjs Directive,Pagination,Angularjs Ng Repeat,我试图在Angular js中添加分页。因为我的服务器在每个查询中返回大量行,所以我使用一些限制偏移量一次只获取101行(必需行+1)。(构建20页的数组,为下一个请求重用额外的行值。) 否-每页行数=5 因此,如果得到101行,意味着我可以分页多达20页。因为我已经有了一个额外的行,所以我知道还有更多的数据,所以在下一页的请求中,我再次查询得到第101-201行。但我的疑问是,如何在下一页和上一页函数中添加逻辑,以及如何构建下一个或上一个数据集 我的app.js- 我的第一次请求- $scop

我试图在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;
              };

            };
$scope.paged=函数(valLists、itemsPerPage)
{
var-retVal=[];
对于(var i=0;i$scope.pageCount()-rangeSize){
start=$scope.pageCount()-rangeSize+1;
}
对于(变量i=开始;i 0){
$scope.currentPage--;
}
};
$scope.DisablePrevPage=函数(){
返回$scope.currentPage==0?“已禁用”:“”;
//?TODO为下一页禁用的samething添加逻辑并生成表数据
};
$scope.pageCount=函数(){
返回Math.ceil($scope.customerResult.length/$scope.itemsPerPage)-1;
};
$scope.nextPage=函数(){
如果($scope.currentPage<$scope.pageCount()){
$scope.currentPage++;
}
};
$scope.DisableNextPage=函数(){
如果($scope.currentPage==$scope.pageCount()){
if($scope.noOfrows>$scope.customerResult.length)
返回$scope.currentPage==$scope.pageCount()?“已禁用”:“”;
$scope.noOfrows=$scope.noOfrows+100;
查询({productId:$scope.customerProduct,productperiod:$scope.customerPeriod,noOfrows:$scope.noOfrows})。$promise.then(函数(结果){
如果(结果){
if(result&&result.length==0){
返回$scope.currentPage==$scope.pageCount()?“已禁用”:“”;
}
$scope.showData();//当我查询101-201数据时,如何在其上构建所有数据?
}
});
}
};
$scope.setPage=函数(n){
$scope.currentPage=n;
};
};

我们将向您提供任何建议或帮助,或者任何可用的文档??您想手动分页吗?是的..有任何建议吗?我可以建议您使用一个现成的模块,例如dirPagination,使用非常简单,如果您想看一下: