从Versions开始,我在Angular 1.2.17,angular-grid(ng-grid)2.0.11上,并且有Jquery 2.1(比ng-grid使用的默认依赖版本更早).
问题1：分页是服务器端还是客户端？换句话说,API调用是期望从服务器中删除每个结果集行,然后在UI中对其进行分页,或者它是否真的可以使用say query params limit = x& offset = y进行服务器端分页.
问题2：如果ng-grid没有预先提取整个结果集 – 当分页工作时,ng-grid如何知道物品的总数是多少？
下面的我的UI代码工作正常,$scope.getPagedDataAsync被调用,进入服务器并下拉定义的限制和偏移量.
假设我在服务器上有50条记录.我要求limit = 10& offset = 10 – 这将从服务器等给我11-20记录.
$scope.getPagedDataAsync = function (pageSize,page,searchText) {
setTimeout(function () {
var data,limit = pageSize,offset = ((page * pageSize) - pageSize);
if (searchText) {
var ft = searchText.toLowerCase();
DfmAdminAgency.query(function (largeLoad) {
data = largeLoad.filter(function (item) {
return JSON.stringify(item).toLowerCase().indexOf(ft) !== -1;
});
$scope.setPagingData(data,pageSize);
});
} else {
DfmAdminAgency.query({limit: pageSize,offset: offset},function (largeLoad) {
$scope.setPagingData(largeLoad,pageSize);
});
}
},100);
};
无论是否引入限制和偏移,pagesize选项都无法正常工作.如果从页面大小50开始然后减少它就可以了.但是,如果我从pagesize 10返回到pagesize 50,则无法使用额外的行更新表内容.
真的,只是对预期行为的一些简单解释将非常感激.这样我就可以实际报告未按预期执行的操作.
我可能应该重新迭代,我相信我可以很好地阅读代码以获得入门示例.看起来：
$scope.totalServerItems
是什么控制ng-grid认为是服务器总项目.并将其设置为传递到方法“setPagingData”的数据的大小：
$scope.totalServerItems = data.length;
但是在方法“getPagedDataAsync”中为了“数据”的值：
DfmAdminAgency.query(function (largeLoad) {
$scope.setPagingData(largeLoad,pageSize);
});
在ng-grid上的页面之间进行分页时会调用上面的内容.换句话说,每次点击分页时,它都会向服务器查询完整的结果集…这表明它实际上是从服务器获取整个结果集,然后只进行准局部分页.当然这不是预期的行为？！或者数据服务提供商是否有责任保留有关完整数据大小的信息,并提供缓存数据等以提供给ng-grid表,同时调用服务器的相同数据会不合适？
解决方法
function getData() {
$resource(urlService.getBaseUrl() + $scope.restUrl + ':id').query({
page: $scope.pagingOptions.currentPage,pageSize: $scope.pagingOptions.pageSize
},function (responseItems,getResponseHeaders) {
var xPageObject = getResponseHeaders('x-pagination');
xPageObject = angular.fromJson(xPageObject);
if (xPageObject) {
$scope.totalPages = xPageObject.TotalPages;
$scope.totalItems = xPageObject.TotalCount;
} else {
console.log("No paging header found");
}
$scope.items = responseItems;
});
}
我们的服务器方法适当地页面.为确保我们在分页选项更改时更新,请在分页选项中添加监视：
// Listen on changes to currentPage and reload when updated
$scope.$watch('pagingOptions',function (newVal,oldVal) {
if (newVal !== oldVal) {
if (newVal.pageSize !== oldVal.pageSize) {
newVal.currentPage = 1;
}
getData();
}
},true);
这将确保无论对分页进行何种更改,都将产生新请求.
关于你的totalServerItems问题,它在选项中定义了网格将使用的范围变量：
$scope.options = {
columnDefs: 'columnDefinitions',data: 'items',totalServerItems: 'totalItems'
};
在我的例子中,$scope.totalItems包含项目总数,它将从响应头中填充成功回调.
HTH
