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

Question

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?

Broderickbrodeur

Though it can be understood what you want, your question is confusing to me. – Drislane

Which part - I'm happy to clarify? – Broderickbrodeur

Are they not doing that in their real world example? – Schliemann

Answer 1

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()));
                }
        });
});

Chloro

Of course it don't have to be server side pagination, but in this situation I gave generally solution that works correctly. And this is not a reason to vote down my answer... – Chloro

The question asks specifically for server side pagination – Outfox

Answer 2

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.

Macur

Answer 3

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({})
    } 

Leifeste