dirPagination - zeigt keine Paging-Links?

Question

Ich versuche serverseitige Paginierung in meiner Anwendung zu verwenden, aber ich kann es nicht tun, da die Paging-Option fehlt. Ich benutze diese tutorial für Seitenumbruch.

hier ist mein Code:

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> 

jetzt ist meine Tabelle wie diese

zeigt mir bitte sagen, wie man hinzufügen Paging Links unten in meinem Tisch, ich bin gegangen Durch verschiedene Lösungen auf Stack Overflow und Google, aber es funktioniert nicht für mich.

Answer 1

können Sie diesen Code in HTML verwenden:

<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> 

In der Steuerung:

$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); 
      }); 

     }; 

Der obige Code wird mit mir zu arbeiten.