[英]AngularJS ngTable the pagination not working, showing all data on one page
I am using ngTables to load my data in table format and show pagination. 我正在使用ngTables以表格格式加载数据并显示分页。 My data is loaded from Firebase database and currently the length is 9. So I want to show three lines per page.
我的数据是从Firebase数据库加载的,当前长度为9。所以我想在每页显示三行。
Here is my code below, when my page is loaded, all nine lines are loaded on the first page whereas I have set the count to 3, and also when I click on the pages, it doesn't move on. 这是下面的代码,当页面被加载时,所有九行都被加载到第一页,而我将计数设置为3,并且当我单击页面时,它也不会继续前进。
There is another problem with this, the filtering is not working either. 这样做还有另一个问题,过滤也不起作用。
Here is my ng-table in HTML view doesn't change and : 这是我的ng-table在HTML视图中不变,并且:
<div ng-controller="mycontroller">
<strong>Filter:</strong> {{tableParams.filter()|json}}
<table ng-table="tableParams" show-filter="true" class="table table-striped">
<tr ng-repeat="obj in mylist">
<td data-title="'Department'" filter="{ 'name': 'text' }">{{ obj.department }}</td>
<td data-title="'Lastname'" >{{ obj.lastname }}</td>
<td data-title="'City'">{{ obj.city }}</td>
</tr>
</table>
</div>
and mycontroller.js
: 和
mycontroller.js
:
app.controller('mycontroller', ["$scope", "$filter", "ngTableParams", "DatabaseRef", "$firebaseArray",
function ($scope, $filter, ngTableParams, DatabaseRef, $firebaseArray) {
//get all data from firebase database
var mydb = DatabaseRef.ref("projects").orderByKey();
$scope.mylist = $firebaseArray(mydb);
var data = $scope.mylist;
data.$loaded().then(function(data) {
console.log(data.length); // data is loaded here, and the length is 9
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 3, // count per page
filter: {
name: '' // initial filter
}
}, {
total: data.length, // length of data
getData: function ($defer, params) {
// use build-in angular filter
var orderedData = params.filter() ? $filter('filter')(data, params.filter()) : data;
$scope.users = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());
params.total(orderedData.length);
// set total for recalc pagination
$defer.resolve($scope.users);
}
});
});
}]);
page
param is extra because default is anyway 1. page
参数是额外的,因为默认情况下还是1。 filter
is extra because by default it is empty as you have. filter
是多余的,因为默认情况下它为空。 total
is extra because by default it automatically takes the length of dataset total
是额外的,因为默认情况下它将自动获取数据集的长度 getData
is extra. getData
是额外的。 You do not need custom filtering. I suggest replacing this code 我建议替换此代码
console.log(data.length); // data is loaded here, and the length is 9
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 3, // count per page
filter: {
name: '' // initial filter
}
}, {
total: data.length, // length of data
getData: function ($defer, params) {
// use build-in angular filter
var orderedData = params.filter() ? $filter('filter')(data, params.filter()) : data;
$scope.users = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());
params.total(orderedData.length);
// set total for recalc pagination
$defer.resolve($scope.users);
}
});
into this. 到这个。
console.log(data.length); // data is loaded here, and the length is 9
$scope.tableParams = new ngTableParams({
count: 3, // count per page
}, {
dataset: data
});
and in HTML change this ng-repeat="obj in mylist"
into this ng-repeat="obj in $data"
然后在HTML中将此
ng-repeat="obj in mylist"
更改为此ng-repeat="obj in mylist"
ng-repeat="obj in $data"
Here is working solution: 这是有效的解决方案:
app.controller('mycontroller', ["$scope", "$filter", "ngTableParams", "DatabaseRef", "$firebaseArray",
function ($scope, $filter, ngTableParams, DatabaseRef, $firebaseArray) {
//get all data from firebase database
var mydb = DatabaseRef.ref("projects").orderByKey();
$scope.mylist = $firebaseArray(mydb);
var data = $scope.mylist;
data.$loaded().then(function(data) {
console.log(data.length); // data is loaded here, and the length is 9
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 3, // count per page
filter: {
name: '' // initial filter
},
sorting: { city: "asc" }
}, {
filterSwitch: true,
total: 0, //data.length, // length of data
getData: function ($defer, params) {
// use build-in angular filter
var filteredData = params.filter() ?
$filter('filter')(data, params.filter()) :
$scope.mylist;
var orderedData = params.sorting() ?
$filter('orderBy')(filteredData, params.orderBy()) : filteredData;
params.total($scope.mylist.length);
// set total for recalc pagination
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
});
}]);
Here's a simple example on how to add pagination using ngTable
. 这是一个有关如何使用
ngTable
添加分页的简单示例。
Obviously, make sure you add reference to angularjs. 显然,请确保添加对angularjs的引用。
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js"></script>
Add reference to ngTable
javascript and css. 添加对
ngTable
javascript和CSS的引用。
<link rel="stylesheet"; href="https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.css">
<script src="https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.js"></script>
After creating your ngApp
, create your table inside your view. 创建
ngApp
,在视图内创建表。
Update: 更新:
<strong>Filter:</strong> {{tableParams.filter()|json}}
<table ng-table="tableParams" show-filter="true" class="table table-striped">
<tr ng-repeat="obj in myList">
<td data-title="'Department'" filter="{ department: 'text' }" sortable="'department'">{{ obj.department }}</td>
<td data-title="'Lastname'" >{{ obj.lastname }}</td>
<td data-title="'City'">{{ obj.city }}</td>
</tr>
</table>
On your controller, remove $scope.tableParams
from data.$loaded()
and use $scope.myList
directly. 在您的控制器上,从
data.$loaded()
删除$scope.tableParams
并直接使用$scope.myList
。
app.controller('mycontroller', ["$scope", "$filter", "ngTableParams", "DatabaseRef", "$firebaseArray",
function ($scope, $filter, ngTableParams, DatabaseRef, $firebaseArray) {
//get all data from firebase database
var mydb = DatabaseRef.ref("projects").orderByKey();
$scope.mylist = $firebaseArray(mydb);
$scope.mylist.$loaded().then(function(data) {
console.log(data.length); // data is loaded here, and the length is 9
$scope.arrayLength = data.length;
});
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 3, // count per page
filter: {
department: '' // initial filter
}
}, {
total: $scope.arrayLength, // length of data
getData: function ($defer, params) {
// use build-in angular filter
$scope.mylist = $defer.resolve(params.filter() ? $filter('filter')($scope.mylist, params.filter()) : $scope.mylist);
$scope.users = $scope.mylist.slice((params.page() - 1) * params.count(), params.page() * params.count());
// set total for recalc pagination
params.total($scope.mylist.length);
}
});
}]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.