1

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 . enter image description here

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();
        }
    };
user3812457
  • 157
  • 1
  • 2
  • 13
  • I don't see where you are accessing a database in your controller. You just used the server side paging example from ng-grid. This is not really server sided processing, it just loads a full json file and filters it on client side. What you want to do seems more like a REST call to server which fetches the required (and limited) data from your db. So plz tell us what kind of server script/db you are using (php/mysql or node/mongo or whatever?) – mainguy Sep 02 '14 at 09:32
  • Thank you for replay ,In my controller by using the `$http.get` to process the web services (getAllCustomerListCount and getAllCustomerListByRange).I think it is fine for me to call the services in controller so i didn't share those details. I mentioned as model plunker ,so it is just reference for my environment at line no.26 instead of `largeLoad.json` i am calling the mentioned services .So how can I get ride of load of total records loaded at a time. – user3812457 Sep 02 '14 at 11:31
  • By passing the necessary info as parameters (pagenumber, pagesize, filtering and sorting info) to your server sided script, which then retrieves the required dataset for one page from your db and retrurns them as json data. For more details I need to know which server sided stack you are using. Maybe look at this answer for php/mySql: http://stackoverflow.com/questions/24516502/ng-grid-server-side-paging/24531453#24531453 – mainguy Sep 02 '14 at 11:57
  • mainguy is right, you need to pass the page params to your server-side query so that it returns the subset of rows you want for the current page. I'd probably make that query a service rather than an http call right in the middle of my ng-grid code. Show us the real server call for more specific advice. – lmyers Sep 04 '14 at 12:19

0 Answers0