dirPagination - 不显示分页链接？

Question

我想在我的应用程序中使用服务器端分页，但由于分页选项丢失，我无法做到这一点。我正在使用这tutorial 分页。

这里是我的代码：

的JavaScript：

$scope.vm={}; 

     // var vm = this;@TODO 
     $scope.vm.users = []; //declare an empty array 
     $scope. vm.pageno = 1; // initialize page no to 1 
     $scope. vm.total_count = 0; 
     $scope.vm.itemsPerPage = 10; //this could be a dynamic value from a drop down 
     $scope.getData = function(pageno){ // This would fetch the data on page change. 
      //In practice this should be in a factory. 
      $scope.vm.users = []; 
      //$http.get("http://localhost:8093/ProductLicensingApplication/pagingList/{itemsPerPage}/{pagenumber}").success(function(response){ 
      // //ajax request to fetch data into vm.data 
      // vm.users = response.data; // data to be displayed on current page. 
      // vm.total_count = response.total_count; // total data count. 
      //}); 
      var params = { 
       pageno: $scope.vm.pageno, 
       itemsPerPage: $scope.vm.itemsPerPage 
      }; 
      featureService.getPagingFeatures(params).then(function (response) { 

       console.log("Getting paging Feature list.."); 
       console.log(response.status); 
       if (response.status.name == "OK") { 
        $scope.vm.users = response.pagingFeaturesList; // data to be displayed on current page. 
        $scope.vm.total_count = response.total_count; // total data count. 
        console.log("paging success"); 
        console.log($scope.vm.users); 
        console.log($scope.vm.total_count); 
       } else { 

       } 
      }, function (error) { 
       console.log(error); 
      }); 

     }; 
     $scope.getData($scope.vm.pageno); 

HTML：

<table class="table table-striped table-hover"> 
              <thead> 
              <tr> 
               <th> SR# &nbsp;</th> 
               <th> Name &nbsp;</th> 
               <th> Code &nbsp;</th> 
               <th> Description &nbsp;</th> 
               <th> is Active &nbsp;</th> 
              </tr> 
              </thead> 
              <tbody> 
              <tr ng-show="vm.users.length <= 0"><td colspan="5" style="text-align:center;">Loading new data!!</td></tr> 
              <tr dir-paginate="user in vm.users|itemsPerPage:vm.itemsPerPage" total-items="vm.total_count"> 
               <td> {{$index+1}}</td> 
               <td>{{user.name}}</td> 
               <td>{{user.code}}</td> 
               <td> {{user.description}}</td> 
               <td> {{user.isActive}}</td> 
              </tr> 
              </tbody> 
             </table> 
             <dir-pagination-controls 
               max-size="10" 
               direction-links="true" 
               boundary-links="true" 
               on-page-change="vm.getData(newPageNumber)" > 
             </dir-pagination-controls> 

现在我的表中显示了这样的

请告诉我怎么加在我桌子下面的分页链接，我已经去了通过堆栈溢出和谷歌不同的解决方案，但它不适合我。

Answer 1

您可以在HTML中使用此代码：

<pagination ng-model="page" 
         page="pagingInfo.page" 
         total-items="pagingInfo.totalItems" 
         items-per-page="pagingInfo.itemsPerPage" 
         ng-change="selectPage(page)" 
         max-size="10" 
         rotate="false" 
         boundary-links="true"></pagination> 

在控制器：

$scope.pagingInfo = { 
      page: 1, 
      itemsPerPage: 10, 
      sortBy: 'NO', 
      reverse: false, 
      search: '', 
      totalItems: 0 
     }; 



    $scope.selectPage = function (page) { 
     $scope.pagingInfo.page = page; 


     getPagingFeatures(); 
    }; 

featureService.getPagingFeatures($scope.pagingInfo).then(function (response) { 

       console.log("Getting paging Feature list.."); 
       console.log(response.status); 
       if (response.status.name == "OK") { 
        $scope.vm.users = response.pagingFeaturesList; // data to be displayed on current page. 
        $scope.vm.total_count = response.total_count; // total data count. 
        console.log("paging success"); 
        console.log($scope.vm.users); 
        console.log($scope.vm.total_count); 
       } else { 

       } 
      }, function (error) { 
       console.log(error); 
      }); 

     }; 

上面的代码与我一起工作。