2017-07-07 3 views
-2

ci-dessous est mon code pour la pagination ngtable.ci-dessous est mon code pour ngtable pagination.in toutes mes données sont chargées dans une seule page même j'écris compter: 3 et page: 1

dans ce mes toutes les données sont chargées dans une seule page même j'écrire compte: 3 et page: 1

comment pourrais-je mettre en œuvre la mise en page.

Voici ce que j'ai essayé jusqu'à présent:

var app=angular.module("app",["ngTable"]); 
 
       app.controller("ctrl",["$scope","NgTableParams",function($scope,NgTableParams) 
 
        { 
 
        $scope.user=[ 
 
          {name:"anuradha",age:21,college:"NSIT"}, 
 
          {name:"ABV",age:22,college:"IIT"}, 
 
          {name:"ABCD",age:23,college:"KIT"}, 
 
          {name:"anuradha",age:24,college:"GIT"}, 
 
          {name:"POOJA",age:25,college:"SIT"}, 
 
          {name:"ABC",age:26,college:"NT"}, 
 
          {name:"abc",age:12,college:"abcd"}, 
 
          {name:"qwe",age:22,college:"opqr"}, 
 
          {name:"rty",age:45,college:"stiu"}, 
 
          {name:"uio",age:14,college:"abcfgh"}, 
 
          {name:"pas",age:19,college:"mnop"}, 
 
          {name:"dfg",age:16,college:"qrst"}, 
 
          ]; 
 
        $scope.table=new NgTableParams({page:1, count:3},{ 
 
        counts: [], 
 
        total: $scope.user.length, 
 
         
 
        getData: function (params) { 
 
         return $scope.user.slice((params.page() - 1) * 
 
         params.count(), params.page() * params.count()); 
 
         // console.log("user.length"); 
 
        }}); 
 
        
 
       }]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/1.0.0/ng-table.js"></script> 
 
<body ng-app="app" ng-controller="ctrl"> 
 
      <table ng-table="table" show-filter=true class="table table-bordered table-striped"> 
 
       <tr ng-repeat="u in user"> 
 
        <td title="'NAME'" >{{u.name}} </td> 
 
        <td title="'AGE'">{{u.age}}</td> 
 
        <td title="'COLLEGE'">{{u.college}}</td> 
 
       </tr> 
 
      </table> 
 
      </body>

+0

et votre question? –

Répondre

0

Voici l'exemple de travail. Vous avez eu une erreur dans votre js et vous utilisiez ngtableparams dans le mauvais sens.

var app = angular.module("app", ["ngTable"]); 
 
app.controller("ctrl", ["$scope", "NgTableParams", function($scope, NgTableParams) { 
 
    $scope.users = [{ 
 
     name: "Madhav Sai", 
 
     age: 10, 
 
     location: 'Nagpur' 
 
    }, 
 
    { 
 
     name: "Suresh Dasari", 
 
     age: 30, 
 
     location: 'Chennai' 
 
    }, 
 
    { 
 
     name: "Rohini Alavala", 
 
     age: 29, 
 
     location: 'Chennai' 
 
    }, 
 
    { 
 
     name: "Praveen Kumar", 
 
     age: 25, 
 
     location: 'Bangalore' 
 
    }, 
 
    { 
 
     name: "Sateesh Chandra", 
 
     age: 27, 
 
     location: 'Vizag' 
 
    }, 
 
    { 
 
     name: "Siva Prasad", 
 
     age: 38, 
 
     location: 'Nagpur' 
 
    }, 
 
    { 
 
     name: "Sudheer Rayana", 
 
     age: 25, 
 
     location: 'Kakinada' 
 
    }, 
 
    { 
 
     name: "Honey Yemineni", 
 
     age: 7, 
 
     location: 'Nagpur' 
 
    }, 
 
    { 
 
     name: "Mahendra Dasari", 
 
     age: 22, 
 
     location: 'Vijayawada' 
 
    }, 
 
    { 
 
     name: "Mahesh Dasari", 
 
     age: 23, 
 
     location: 'California' 
 
    }, 
 
    { 
 
     name: "Nagaraju Dasari", 
 
     age: 34, 
 
     location: 'Atlanta' 
 
    }, 
 
    { 
 
     name: "Gopi Krishna", 
 
     age: 29, 
 
     location: 'Repalle' 
 
    }, 
 
    { 
 
     name: "Sudheer Uppala", 
 
     age: 19, 
 
     location: 'Guntur' 
 
    }, 
 
    { 
 
     name: "Sushmita", 
 
     age: 27, 
 
     location: 'Vizag' 
 
    } 
 
    ]; 
 
    $scope.usersTable = new NgTableParams({ 
 
    page: 1, 
 
    count: 5 
 
    }, { 
 
    counts: [5, 10, 20], 
 
    total: $scope.users.length, 
 
    dataset: $scope.users 
 
    }); 
 
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/1.0.0/ng-table.js"></script> 
 
<link rel="stylesheet" ; href="https://unpkg.com/[email protected]/bundles/ng-table.min.css"> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<body ng-app="app"> 
 
    <div ng-controller="ctrl"> 
 
    <table ng-table="usersTable" class="table table-condensed table-bordered table-striped"> 
 
     <tr ng-repeat="row in $data"> 
 
     <td data-title="'Name'">{{row.name}}</td> 
 
     <td data-title="'Age'">{{row.age}}</td> 
 
     <td data-title="'Location'">{{row.location}}</td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
</body>