Javascript ng网格分页不工作-AngularJS
HTML:Javascript ng网格分页不工作-AngularJS,javascript,angularjs,pagination,ng-grid,Javascript,Angularjs,Pagination,Ng Grid,HTML: <div class="grid-style" data-ng-grid="groupGrid"> </div> appRoot.controller('GroupController', function ($scope, $location, $resource, $http) { var groupResource = $resource('/api/group', {}, { update: { method: 'PUT' }, add:
<div class="grid-style" data-ng-grid="groupGrid">
</div>
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”输入最大值是否无效
您只需将ng grid更新为最新的内容我已经搜索了很长一段时间,以便在ng grid中进行分页,但我从未得到我想要的。然后我就撞到了
它似乎有我想要的,所以我建议作为ng grid的替代方案。要在ng grid中获取当前页面,请将精确的int值传递给cuurent page变量,因为我在代码中更改了如下内容
$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);
我不知道,我删除了那些页面。我离开了ng网格,一位前同事建议我使用ng表格。谢谢你。