[英]ng-Grid Pagination not working - AngularJS
HTML: HTML:
<div class="grid-style" data-ng-grid="groupGrid">
</div>
Javascript: 使用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%' }
],
};
});
My problem - Pagination is not working, as in - The current page number is not displayed. 我的问题-分页不起作用,如-无法显示当前页码。 - When I change the page size (like say 4), the number of items in the grid doesn't change (remains 16 - total no. of items I actually have).
-当我更改页面大小(例如说4)时,网格中的项目数不变(保持16-我实际拥有的项目总数)。 - The number of items change in the grid only after clicking the next page button twice.
-仅在单击下一页按钮两次后,网格中的项目数才会更改。
Is your 'pagingOptions.currentPage' input max-invalid? 您的'pagingOptions.currentPage'输入最大无效吗?
https://github.com/angular-ui/ng-grid/issues/598 https://github.com/angular-ui/ng-grid/issues/598
You just had to update ng-grid to the latest stuff 您只需要将ng-grid更新为最新的东西
I've searched for quite a while to do some pagination in ng-grid, but I never got what I wanted. 我已经搜索了很长时间,以便在ng-grid中进行分页,但是我始终没有得到想要的东西。 And then I bumped into ng-table .
然后我碰到ng-table 。
It seems to have what I want, so I suggest that as an alternative for ng-grid. 它似乎有我想要的,所以我建议将其作为ng-grid的替代方法。
To get the current page in ng-grid, pass exact int value to the cuurent page variable, for that I changed in my code as follows. 要在ng-grid中获取当前页面,请将确切的int值传递给当前页面变量,为此我在代码中进行了如下更改。
$scope.pagingOptions = {
pageSizes: [4, 8, 12, 16],
pageSize: 250,
currentPage: parseInt(pageId,10);
};
pageId = 1 or 2 or 3 etc.. as your wish. pageId = 1或2或3等。
Add below code in your js file. 在您的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.