CODEWITHSUNDEEP
javascriptangularjspaginationngtable
Shamoon
Shamoon

Reputation: 43491

How can I do server-side pagination with ng-table?

My code is

$scope.loadQuestions = function() {
  $scope.questionCount = 0;
  $scope.questionTable = new NgTableParams({
    count: []
  }, {
    total: 19387,
    getData: function($defer, params) {
      $scope.filter.sort = params.orderBy();
      $scope.filter.page = params.page();
      return $http.get("/api/questions", {
        params: $scope.filter
      }).then(function(response) {
        $scope.questionCount = response.data.count;
        return response.data.questions;
      });
    }
  });
};

If I do this, it's fine. But that's because I hardcoded the total, which doesn't make sense obviously. If I do

  return $http.get("/api/questions", {
    params: $scope.filter
  }).then(function(response) {
    params.total(response.data.count);
    $scope.questionCount = response.data.count;
    return response.data.questions;
  });

then it ng-table fires the http request twice for some reason. So what's the right way to do it?

Upvotes: 6

Views: 3469

Answers (3)

Umang
Umang

Reputation: 1

For this you need to create function , inside that function calling the api.

For second call you need to changes ngtableparam name means like if earlier was tableparam now you need to create tableparam1 or something.

please see the below code

on ng click

    $scope.NextPrev=function(param){
        //code here
        //call another function  
        $scope.tablerefresh($scope.Inedx)
    }
    
     
    $scope.tablerefresh=function(param){
        $scope['tableparater1']={
           reload: function () {},
           settings: function () {return {} }
         }
         $timeout($scope.getdatafromApi(number) ,100); //call those function that gets the data from api
         $scope.tableparater1.reload();
    };
    $scope.getdatafromApi=function(number){
        $.ajax({
           //ajax code here
        }).then (function (response)) {
            data=response;
            $scope.tablaparm.reload(); // reloadfirst call data
        }
       //assigning the data into $scope.tableparater1
       $scope.tableparater1=new ngTableParams({})
    }

Upvotes: 0

arman1991
arman1991

Reputation: 1166

In assuming that you are using one of the older versions of ng-table script, the first step is to get the data from your api service, and then to intialize the parameters for ng-table that you want.

With $http service you will get the data only ONE TIME if the request is successful, and inside that service initialize your ngTableParams. So you will avoid problems with multiple callbacks.

Note also the changes in getData part how ordering and filtering are solved with pagination.

Here is the solution that I used for my projects, hope it helps.

$http.get('/api/questions').success(function (data) {
                $scope.questionTable = new ngTableParams({
                    page: 1,
                    count: 10
                },
                {
                  total: data.length,
                  getData: function ($defer, params) {
                    var filteredData = params.filter() ? $filter('filter')(data, params.filter()) : data;
                    var orderedData = params.sorting() ? $filter('orderBy')(filteredData, params.orderBy()) : data;
                    params.total(orderedData.length);
                    $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
                }
        });
});

Upvotes: 0

harishr
harishr

Reputation: 18055

I am not entierly sure if below would solve your issue, but I do use below code and its not causing double call issue

                getData: function ($defer, params) {
                    if (timeout) $timeout.cancel(timeout);
                    timeout = $timeout(function () {
                        callback().then(function (data) {
                            params.total(data.TotalCount);
                            $defer.resolve(data.PageData);
                        });
                    }, 700);
                }

Note: code pasted above is part of a directive, the $timeout part is to avoid multiple calls (throttling) and callback() does the actual $http call.

The important part to take for you from here is may be: $defer.resolve(data.PageData) is doing the trick for me also there is no return statement like it is there in your case.

Upvotes: 0

Related Questions