[英]ng-Grid Pagination not working - AngularJS
HTML:
<div class="grid-style" data-ng-grid="groupGrid">
</div>
使用Javascript:
appRoot.controller('GroupController', function ($scope, $location, $resource, $http) {
var groupResource = $resource('/api/group', {}, { update: { method: 'PUT' }, add: { method: 'POST'} });
$scope.groupList = [];
groupResource.query(function (data) {
$scope.groupList.length = 0;
angular.forEach(data, function (groupData) {
$scope.groupList.push(groupData);
});
});
$scope.totalServerItems = 0;
$scope.pagingOptions = {
pageSizes: [4, 8, 12, 16],
pageSize: 250,
currentPage: 1
};
$scope.setPagingData = function (data, page, pageSize) {
var pagedData = data.slice((page - 1) * pageSize, page * pageSize);
$scope.groupList = pagedData;
$scope.totalServerItems = data.length;
$scope.currentPage = page;
if (!$scope.$$phase) {
$scope.$apply();
}
};
$scope.getPagedDataAsync = function (pageSize, page, searchText) {
setTimeout(function () {
var data;
if (searchText) {
var ft = searchText.toLowerCase();
$http.get('/api/group').success(function (largeLoad) {
data = largeLoad.filter(function (item) {
return JSON.stringify(item).toLowerCase().indexOf(ft) != -1;
});
$scope.setPagingData(data, page, pageSize);
});
} else {
$http.get('/api/group').success(function (largeLoad) {
$scope.setPagingData(largeLoad, page, pageSize);
});
}
}, 100);
};
$scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);
$scope.$watch('pagingOptions', function (newVal, oldVal) {
if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPage) {
$scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);
}
}, true);
$scope.selectedGroups = [];
$scope.groupGrid = {
data: 'groupList',
multiSelect: false,
selectedItems: $scope.selectedGroups,
enableColumnResize: false,
enablePaging: true,
showFooter: true,
totalServerItems: 'totalServerItems',
pagingOptions: $scope.pagingOptions,
columnDefs: [
{ field: 'groupName', displayName: 'Group Name', width: '25%' }
],
};
});
我的問題-分頁不起作用,如-無法顯示當前頁碼。 -當我更改頁面大小(例如說4)時,網格中的項目數不變(保持16-我實際擁有的項目總數)。 -僅在單擊下一頁按鈕兩次后,網格中的項目數才會更改。
您的'pagingOptions.currentPage'輸入最大無效嗎?
https://github.com/angular-ui/ng-grid/issues/598
您只需要將ng-grid更新為最新的東西
我已經搜索了很長時間,以便在ng-grid中進行分頁,但是我始終沒有得到想要的東西。 然后我碰到ng-table 。
它似乎有我想要的,所以我建議將其作為ng-grid的替代方法。
要在ng-grid中獲取當前頁面,請將確切的int值傳遞給當前頁面變量,為此我在代碼中進行了如下更改。
$scope.pagingOptions = {
pageSizes: [4, 8, 12, 16],
pageSize: 250,
currentPage: parseInt(pageId,10);
};
pageId = 1或2或3等。
在您的js文件中添加以下代碼。
var pageop=false;
$scope.$watch('pagingOptions.pageSize', function (newVal, oldVal) {
if(pageop){
$scope.getPagedDataAsync($scope.pagingOptions.pageSize,$scope.pagingOptions.currentPage);
}else{
pageop=true;
}
}, true);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.