Javascript AngularJS中服务器端和客户端分页的组合

我将spring框架用于后端和AngularJS。我需要对一个表使用服务器端和客户端分页，所以我将把页码和页面大小传递给rest服务。现在，我需要执行以下场景：

如果数据库中有20000条记录：

从数据库中获取前2500条记录，然后对它们进行分页

在对前2500条记录进行分页后，获取下一个2500条记录（从2501到5000），依此类推，直到完成数据库中的所有记录

---

我可以用角度数据表或任何角度表来实现这一点吗？

我们的要求与您描述的完全相同。我们在网上搜索，没有找到答案。最后我们研究并提出了一个解决方案。希望它能帮助其他正在寻找解决方案的人

我们正在使用。在angular ui.grid中，您可以使用默认的客户端分页，也可以实现外部（或服务器端）分页

但是，在您的需求中，您需要结合客户端和服务器端分页，这是灵活的，并且在您有大量数据（缺少的记录数）时非常需要

若你们不知道如何使用服务器端分页，那个么看看这个问题。您可以查看工作服务器端分页实现

我修改这个实现是为了实现客户端和服务器端分页的组合

var useHybridPagination = true;
var paginationPageSize = 25;
var serverPaginationPageSize = 2500;    
var serverPaginationOffset = 0;
var serverPaginationGridData = {};

var clientPaginationOptions  = {
        pageNumber: 1,
        pageSize: paginationPageSize,           
      };

var serverPaginationOptions = {
        pageNumber: 1,
        pageSize: serverPaginationPageSize,         
      };    

var paginationRowRange = {}
paginationRowRange.startRowIndex = 1;
paginationRowRange.endRowIndex = paginationPageSize;

var serverPaginationRowRange = {}
serverPaginationRowRange.startRowIndex = 1;
serverPaginationRowRange.endRowIndex = serverPaginationPageSize;   

我将使用服务器端分页逻辑来提取每2500条记录。而且，要在客户端（2500条记录）的页面间导航，只需进行很少的修改。如果用户在客户端的2500条记录中存在新的页面，则按照服务器PaginationOptions.pageSize所示对记录数进行切片，并加载网格。或者获取接下来的2500条记录并重新评估行索引

$scope.clientPaginationOptions  = clientPaginationOptions ;
$scope.serverPaginationOptions = serverPaginationOptions;
$scope.paginationRowRange = paginationRowRange;
$scope.serverPaginationRowRange = serverPaginationRowRange;
$scope.serverPaginationOffset = serverPaginationOffset;
$scope.serverPaginationGridData = serverPaginationGridData;

$scope.gridOptions = {
    paginationPageSizes: [25, 50, 75],
    paginationPageSize: $scope.clientPaginationOptions .pageSize,
    useExternalPagination: true,        
    columnDefs: [
      { name: 'name' },
      { name: 'gender', enableSorting: false },
      { name: 'company', enableSorting: false }
    ],
    onRegisterApi: function(gridApi) {
      $scope.gridApi = gridApi;

      gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) {
        $scope.clientPaginationOptions .pageNumber = newPage;
        $scope.clientPaginationOptions .pageSize = pageSize;

        let startRowIndex = (($scope.clientPaginationOptions .pageNumber - 1) * $scope.clientPaginationOptions .pageSize) + 1;
        let endRowIndex =  (startRowIndex - 1 ) + clientPaginationOptions .pageSize;            

        if(endRowIndex > $scope.serverPaginationRowRange.endRowIndex || startRowIndex < $scope.serverPaginationRowRange.startRowIndex){             

            $scope.serverPaginationOptions.pageNumber = parseInt(($scope.clientPaginationOptions .pageNumber * pageSize)/$scope.serverPaginationOptions.pageSize) + 1;

            let serverStartRowIndex = (($scope.serverPaginationOptions.pageNumber - 1) * $scope.serverPaginationOptions.pageSize) + 1;
            let serverEndRowIndex =  (serverStartRowIndex - 1 ) + $scope.serverPaginationOptions.pageSize;                  

            let paginationRowRangeTmp = {}
            paginationRowRangeTmp.startRowIndex = serverStartRowIndex;
            paginationRowRangeTmp.endRowIndex = serverEndRowIndex;    
            $scope.serverPaginationRowRange = paginationRowRangeTmp;                

            $scope.serverPaginationOffset = serverStartRowIndex - 1;
        }

        startRowIndex = startRowIndex - $scope.serverPaginationOffset;
        endRowIndex = endRowIndex - $scope.serverPaginationOffset;          

        let paginationRowRangeTmp = {}
        paginationRowRangeTmp.startRowIndex = startRowIndex;
        paginationRowRangeTmp.endRowIndex = endRowIndex;    
        $scope.paginationRowRange = paginationRowRangeTmp; 

        getPage();
      });
    }
};
getPage();

var getPage = function() {

    if(useHybridPagination && !_.isEmpty($scope.serverPaginationGridData)){
        var currentPageData = getcurrentPageData();
        $timeout(function() {
            $scope.gridOptions.data = datatoLoadGrid;
           }, 1);
    }
    else{
        var url = 'https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json';
        $http.get(url,$scope.serverPaginationRowRange)
            .then(function (returnData) {
                $scope.gridOptions.totalItems = returnData.data.totalPaginationRecords;
                let datatoLoadGrid = returnData.data.gridData;

                if(useHybridPagination){
                    $scope.serverPaginationGridData = datatoLoadGrid;
                    datatoLoadGrid = getcurrentPageData();
                }
                $scope.gridOptions.data = datatoLoadGrid;
            });
    }
};  

var getcurrentPageData = function(){
    var gridData = [];

    var tmpGridrecords = $scope.serverPaginationGridData;
    if(!_.isEmpty(tmpGridrecords) && tmpGridrecords.length > 0)
        gridData = tmpGridrecords.slice($scope.paginationRowRange.startRowIndex-1, $scope.gridOptions.endRowIndex);

    return gridData;
};  

$scope.clientPaginationOptions=clientPaginationOptions；
$scope.serverPaginationOptions=serverPaginationOptions；
$scope.paginationRowRange=paginationRowRange；
$scope.serverPaginationRowRange=serverPaginationRowRange；
$scope.serverPaginationOffset=serverPaginationOffset；
$scope.serverpaginationridata=serverpaginationridata；
$scope.gridOptions={
分页页面大小：[25,50,75]，
paginationPageSize:$scope.clientPaginationOptions.pageSize，
useExternalPagination:true，
columnDefs：[
{name:'name'}，
{name:'gender'，enableSorting:false}，
{name:'company'，enableSorting:false}
],
onRegisterApi:函数（gridApi）{
$scope.gridApi=gridApi；
paginationChanged（$scope，function（newPage，pageSize）{
$scope.clientPaginationOptions.pageNumber=newPage；
$scope.clientPaginationOptions.pageSize=pageSize；
让startRowIndex=（$scope.clientPaginationOptions.pageNumber-1）*$scope.clientPaginationOptions.pageSize）+1；
让endRowIndex=（startRowIndex-1）+clientPaginationOptions.pageSize；
如果（endRowIndex>scope.serverPaginationRowRange.endRowIndex | | StartRowWindex0）
gridData=tmpGridrecords.slice（$scope.paginationRowRange.startRowIndex-1，$scope.gridOptions.endRowIndex）；
返回网格数据；
};  

如您所见，web服务（或API）返回具有两个属性的数据对象—totalPaginationRecords和gridDatatotalPaginationRecords是可能的记录总数，即在本例中为20000gridData是要加载的网格数据（页面大小为2500）

所有转角条件均已处理。希望我