Javascript Angular.js中的分页
我试图在Angular js中添加分页。因为我的服务器在每个查询中返回大量行,所以我使用一些限制偏移量一次只获取101行(必需行+1)。(构建20页的数组,为下一个请求重用额外的行值。) 否-每页行数=5 因此,如果得到101行,意味着我可以分页多达20页。因为我已经有了一个额外的行,所以我知道还有更多的数据,所以在下一页的请求中,我再次查询得到第101-201行。但我的疑问是,如何在下一页和上一页函数中添加逻辑,以及如何构建下一个或上一个数据集 我的app.js- 我的第一次请求- $scope.startingid=null; $scope.numberofrows=101Javascript Angular.js中的分页,javascript,angularjs,angularjs-directive,pagination,angularjs-ng-repeat,Javascript,Angularjs,Angularjs Directive,Pagination,Angularjs Ng Repeat,我试图在Angular js中添加分页。因为我的服务器在每个查询中返回大量行,所以我使用一些限制偏移量一次只获取101行(必需行+1)。(构建20页的数组,为下一个请求重用额外的行值。) 否-每页行数=5 因此,如果得到101行,意味着我可以分页多达20页。因为我已经有了一个额外的行,所以我知道还有更多的数据,所以在下一页的请求中,我再次查询得到第101-201行。但我的疑问是,如何在下一页和上一页函数中添加逻辑,以及如何构建下一个或上一个数据集 我的app.js- 我的第一次请求- $scop
Api.customer.query({ productId : $scope.customer , productperiod :$scope.customerPeriod,startingid:$scope.startingid,numberofrows:$scope.numberofrows }).$promise.then(function(result) {
if(result){
if(result&&result.length==0){
$scope.addErrorAlert("No Customer data found with this productId and Period.", true);
$scope.displayPage = 'search';
return;
}
$scope.customerResult = result;
$scope.displayPage = 'drill';
$scope.showData();
}
//分页逻辑-
如果结果集是少量数据,我的代码工作正常。但是需要以这样一种方式实现,即它也可以处理大量的行。
毫无疑问-
1.如何为请求101-201构建数据。
2.下一页和上一页逻辑
$scope.paged = function (valLists,itemsPerPage)
{
var retVal = [];
for (var i = 0; i < valLists.length; i++) {
if (i % itemsPerPage === 0) {
retVal[Math.floor(i / itemsPerPage)] = [valLists[i]];
} else {
retVal[Math.floor(i / itemsPerPage)].push(valLists[i]);
}
}
return retVal;
};
$scope.pagination = function () {
$scope.ItemsByPage = $scope.paged( $scope.customerResult, $scope.itemsPerPage );
};
$scope.showData = function( ){
// $scope.noOfrows = 101;
$scope.itemsPerPage = 5;
$scope.currentPage = 0;
$scope.pagination();
$scope.range = function() {
var rangeSize = 4;
var ps = [];
var start;
start = $scope.currentPage;
if ( start > $scope.pageCount()-rangeSize ) {
start = $scope.pageCount()-rangeSize+1;
}
for (var i=start; i<start+rangeSize; i++) {
ps.push(i);
}
return ps;
};
$scope.prevPage = function() {
if ($scope.currentPage > 0) {
$scope.currentPage--;
}
};
$scope.DisablePrevPage = function() {
return $scope.currentPage === 0 ? "disabled" : "";
//?? TODO add logic for samething as disabled next page and build table data
};
$scope.pageCount = function() {
return Math.ceil($scope.customerResult.length/$scope.itemsPerPage)-1;
};
$scope.nextPage = function() {
if ($scope.currentPage < $scope.pageCount()) {
$scope.currentPage++;
}
};
$scope.DisableNextPage = function() {
if($scope.currentPage === $scope.pageCount()){
if($scope.noOfrows >$scope.customerResult.length)
return $scope.currentPage === $scope.pageCount() ? "disabled" : "";
$scope.noOfrows = $scope.noOfrows+ 100;
Api.customerReq.query({ productId : $scope.customerProduct , productperiod :$scope.customerPeriod, noOfrows:$scope.noOfrows }).$promise.then(function(result) {
if(result){
if(result&&result.length==0){
return $scope.currentPage === $scope.pageCount() ? "disabled" : "";
}
$scope.showData();// how to build all data on when i query for 101-201 data?
}
});
}
};
$scope.setPage = function(n) {
$scope.currentPage = n;
};
};
$scope.paged=函数(valLists、itemsPerPage)
{
var-retVal=[];
对于(var i=0;i$scope.pageCount()-rangeSize){
start=$scope.pageCount()-rangeSize+1;
}
对于(变量i=开始;i 0){
$scope.currentPage--;
}
};
$scope.DisablePrevPage=函数(){
返回$scope.currentPage==0?“已禁用”:“”;
//?TODO为下一页禁用的samething添加逻辑并生成表数据
};
$scope.pageCount=函数(){
返回Math.ceil($scope.customerResult.length/$scope.itemsPerPage)-1;
};
$scope.nextPage=函数(){
如果($scope.currentPage<$scope.pageCount()){
$scope.currentPage++;
}
};
$scope.DisableNextPage=函数(){
如果($scope.currentPage==$scope.pageCount()){
if($scope.noOfrows>$scope.customerResult.length)
返回$scope.currentPage==$scope.pageCount()?“已禁用”:“”;
$scope.noOfrows=$scope.noOfrows+100;
查询({productId:$scope.customerProduct,productperiod:$scope.customerPeriod,noOfrows:$scope.noOfrows})。$promise.then(函数(结果){
如果(结果){
if(result&&result.length==0){
返回$scope.currentPage==$scope.pageCount()?“已禁用”:“”;
}
$scope.showData();//当我查询101-201数据时,如何在其上构建所有数据?
}
});
}
};
$scope.setPage=函数(n){
$scope.currentPage=n;
};
};
我们将向您提供任何建议或帮助,或者任何可用的文档??您想手动分页吗?是的..有任何建议吗?我可以建议您使用一个现成的模块,例如dirPagination,使用非常简单,如果您想看一下: