angularjs – 从后端获取数据时,分页控件未显示在ng表中
发布时间:2020-12-17 09:15:50 所属栏目:安全 来源:网络整理
导读:我从后端获取数据列表,并使用ng-table进行显示.问题是它没有显示分页控件.以前,当我使用虚拟数据显示ng表时,分页工作完全正常.有人可以帮我吗? 这是我的HTML: table ng-table="tableParams" show-filter="true" class="table" thead tr th ng-repeat="colu
|
我从后端获取数据列表,并使用ng-table进行显示.问题是它没有显示分页控件.以前,当我使用虚拟数据显示ng表时,分页工作完全正常.有人可以帮我吗?
这是我的HTML: <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>
以下是我的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',{
title: 'User Karma',field: 'userkarma',{
title: 'Date Joined',field: 'datejoined',{
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()));
}
});
这是因为在异步数据加载后用于刷新数据的通常的$scope.tableParams.reload()函数不会刷新表中的总项数.以前没有发生过,因为当您使用虚拟数据时,该值在开始时被正确设置.
你需要添加一个params.total(data.length); getData函数手动刷新该值. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
