Question

下面是我的ngtable分页代码。

在这个我的所有数据只加载到一个页面，即使我写入计数：3和页面：1

我怎么能实现分页。

这是我到现在为止所尝试的：

 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>

Answer 1

这是一个有效的例子。您的js中有一些错误，并且您错误地使用了ngtableparams。

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/ng-table@2.0.2/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>

下面是我的ngtable pagination的代码。这个我的所有数据只加载到一个页面，即使我写了数：3和页面：1

1 个答案: