Angularjs 从后端获取数据时,分页控件不显示在ng表中
我正在从后端获取一个数据列表,并使用ng table显示它。问题是它没有显示分页控件。以前,当我使用虚拟数据显示ng表时,分页工作完全正常。有人能帮我吗 这是我的HTML:Angularjs 从后端获取数据时,分页控件不显示在ng表中,angularjs,pagination,ngtable,Angularjs,Pagination,Ngtable,我正在从后端获取一个数据列表,并使用ng table显示它。问题是它没有显示分页控件。以前,当我使用虚拟数据显示ng表时,分页工作完全正常。有人能帮我吗 这是我的HTML: <table ng-table="tableParams" show-filter="true" class="table"> <thead> <tr> <th n
<table ng-table="tableParams" show-filter="true" class="table">
<thead>
<tr>
<th ng-repeat="column in columns" ng-show="column.visible"
class="text-center" ng-class="{
'sort-asc': tableParams.isSortBy(column.field, 'asc'),
'sort-desc': tableParams.isSortBy(column.field, 'desc'),
'sortable': !$first
}"
ng-click="tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc') ? 'desc' : 'asc')">
<div>{{column.title}}</div>
</th>
</tr>
</thead>
<tr ng-repeat="user in data | filter:searchText">
<td width="30" style="text-align: left">
<input type="checkbox" ng-model="checkboxes.items[user.id]" />
</td>
<td data-title="'Email Id'" class="text-center" sortable="email" ng-show="columns[1].visible">
<span>{{user.email}}</span>
</td>
<td data-title="'User Karma'" class="text-center" sortable="userkarma" ng-show="columns[2].visible">
<span>{{user.userkarma}}</span>
</td>
<td data-title="'Date Joined'" class="text-center" sortable="datejoined" ng-show="columns[3].visible">
<span>{{user.datejoined}}</span>
</td>
<td data-title="'Unsubscribed'" class="text-center" sortable="status" ng-show="columns[4].visible">
<span>{{user.unsubscribed}}</span>
</td>
</tr>
</table>
{{column.title}}
{{user.email}
{{user.userkarma}}
{{user.datejoined}
{{user.unsubscribed}
下面是我的js文件:
for (var i = 0; i < UserList.getUsers()
.length; i++) {
$scope.data.push({
id: UserList.getUsers()[i]._id,
email: UserList.getUsers()[i].email,
userkarma: UserList.getUsers()[i].healthScore,
datejoined: moment(UserList.getUsers()[i].firstSessionAt)
.format("MMMM Do YYYY"),
unsubscribed: UserList.getUsers()[i].unsubscribed
})
};
$scope.columns = [{
title: '',
field: 'checkbox',
visible: true
},
{
title: 'Email',
field: 'email',
visible: true
}, {
title: 'User Karma',
field: 'userkarma',
visible: true
}, {
title: 'Date Joined',
field: 'datejoined',
visible: true
}, {
title: 'Unsubscribed',
field: 'unsubscribed',
visible: true
}
];
$scope.tableParams = new ngTableParams({
page: 1,
count: 10, // count per page
filter: {
name: 'M' // initial filter
},
sorting: {
name: 'asc'
}
}, {
total: $scope.data.length, // length of data
getData: function ($defer, params) {
// use build-in angular filter
var filteredData = params.filter() ?
$filter('filter')($scope.data, params
.filter()) :
data;
var orderedData = params.sorting() ?
$filter('orderBy')($scope.data,
params.orderBy()) :
$scope.data;
params.total(orderedData.length); // set total for recalc paginationemail
$defer.resolve(orderedData.slice((
params.page() -
1) * params.count(),
params.page() *
params.count()));
}
});
for(var i=0;i
我找到了答案。实际上,在加载动态数据时,ng表存在一个问题。动态加载数据时,不调用getData函数。这就是我所做的。我创建了一个refreshTable函数来调用setTable函数,该函数随后调用getData函数并呈现该表
$scope.refreshTable = function () {
console.log('\n\n refreshing table')
$scope['tableParams'] = {
reload: function () {},
settings: function () {
return {}
}
};
$timeout(setTable, 100)
};
$scope.refreshTable();
function setTable(arguments) {
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 10, // count per page
filter: {
name: '' // initial filter
},
sorting: {
name: 'asc'
}
}, {
filterSwitch: true,
total: $scope.users.length, // length of data
getData: function ($defer, params) {
console.log(
'\n\nngTable getData called now')
var orderedData = params.sorting() ?
$filter('orderBy')($scope.users,
params.orderBy()) :
data;
params.total(orderedData.length);
$defer.resolve(orderedData.slice((params.page() -
1) * params.count(), params.page() *
params.count()));
}
});
}
发生这种情况的原因是,在异步数据加载后用于刷新数据的常规
$scope.tableParams.reload()
函数没有刷新表中的项目总数。这以前没有发生过,因为在使用虚拟数据时,此值在开始时已正确设置
您需要添加一个
params.total(data.length)
手动刷新值的getData
函数。对我来说,这是因为我使用了coffeescript,它会自动返回函数中最后一项的值。这会导致问题,因为ng表的getData()
会得到一个承诺,如果它没有得到承诺,它会自己从$defer创建一个承诺。通过使用coffeescript并没有完全正确地将示例从中转换过来,我返回了一些不是承诺的东西
在coffeescript中,确保对getData()
的回调以
$defer.promise
或
所以ng表得到了承诺,或者知道自己做出承诺。我在这里有这个问题和应用解决方案,但它没有解决我的问题。我的用法如下所示
{{column.title}}
{{row[column.field][column.subfield]| | row[column.field]}
我对loadData+异步加载有同样的经验。
在我这方面,问题是API返回的数据是由另外两个数组组成的数组,而我的表只使用了这两个数组中的一个。
见下文:
*.js
*.html
<tr ng-repeat="row in usrCtrl.servicesTable.data.users" ng-if="row.Services.hasOwnProperty(usrCtrl.selectedService)">
通过在javascript端返回“resp.data.users”,并在html端正确循环“usrCtrl.servicesTable.data”,寻呼机出现了
Loïc展示你认为相关的代码和HTML,人们会更容易提供帮助。还可以指定您正在使用的版本。谢谢您的建议!!我已经粘贴了相关的HTML和JS文件以供进一步参考。对于未来的用户,最好只是作为成功回调的一部分进行刷新。这让我在一定程度上做到了这一点,但对于其他有此问题的人,我还必须在“ng table”类出现之前将其从我的表中删除!谢谢
return $http(options).then(function (resp) {
params.total(resp.data.users.length)
return resp.data
}
<tr ng-repeat="row in usrCtrl.servicesTable.data.users" ng-if="row.Services.hasOwnProperty(usrCtrl.selectedService)">