-->

How can I get server-side-pagination in ng-grid in

2019-08-11 19:33发布

问题:

I have a ng-grid in angular application ,the data coming to grid from database by calling the web-services .services are 1.(GET) getAllCustomerListCount which gives integer number like 6202.

2.(GET) getAllCustomerListByRange which takes two parameters like startFrom parameter takes integer which represent starting or begin range to display ,and another parameter noOfRecords takes integer which represent no.of records to display .

As of now i am calling the getAllCustomerListCount first to get the total no.of records from database,and secondly calling getAllCustomerListByRange by passing startFrom as 0 and noOfRecords as first service result getAllCustomerListCount i.e., total no.of records.It displays the grid data but it is too slow to display the 50 records per page and loading the total records 6202 records into grid .

Now i want to improve the performance even i place the page size 100 of grid.How can i call the services by selecting the next page in grid .My intention is not to allow load all the 6202 records in to grid at first time but it should display the total as 6202 and by clicking the next page in the grid have to call the services and get the 50 records data from database at that time only . Please help me how can i solve my problem.One more thing i can share my controller.

model plunker http://plnkr.co/edit/R8hmvzTTthGkDurtMErR?p=preview

in controller:

$scope.totalServerItems = 0;
    $scope.pagingOptions = {
        pageSizes: [50, 100, 200],
        pageSize: 50,
        currentPage: 1
    };  
    $scope.setPagingData = function(data, page, pageSize){  
        var pagedData = data.slice((page - 1) * pageSize, page * pageSize);
        $scope.myData = pagedData;
        $scope.totalServerItems = data.length;
        if (!$scope.$$phase) {
            $scope.$apply();
        }
    };