2016-03-08 13 views
5

mio codice èCome posso eseguire l'impaginazione lato server con ng-table?

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

Se faccio questo, va bene. Ma è perché ho codificato lo total, che ovviamente non ha senso. Se faccio

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

allora ng-table incendi la richiesta http due volte per qualche motivo. Quindi qual è il modo giusto per farlo?

+0

Anche se può essere capito cosa vuoi, la tua domanda mi confonde. –

+0

Quale parte - sono felice di chiarire? – Shamoon

+0

Non lo stanno facendo nel loro [esempio del mondo reale] (http://ng-table.com/#/intro/demo-real-world)? – klskl

risposta

1

Nel presupporre che si stia utilizzando una delle versioni precedenti dello script ng-table, il primo passo è ottenere i dati dal proprio servizio API e quindi inizializzare i parametri per ng-table che si desidera.

Con $http servizio si ottengono i dati solo UNA VOLTA se la richiesta ha successo, e dentro quel servizio inizializzare il ngTableParams. Quindi eviterete problemi con più callback.

Nota anche le modifiche in getData parte come l'ordinamento e il filtro vengono risolti con l'impaginazione.

Ecco la soluzione che ho usato per i miei progetti, spero che aiuti.

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

Ovviamente non deve essere l'impaginazione lato server, ma in questa situazione ho dato generalmente una soluzione che funziona correttamente. E questo non è un motivo per votare la mia risposta ... – arman1991

+0

La domanda chiede specificatamente per l'impaginazione lato server – curlyhairedgenius

0

Non sto entierly sicuro se al di sotto avrebbe risolto il problema, ma io faccio uso di sotto del codice e la sua non causando numero doppio di chiamata

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

Nota: codice incollato sopra è parte di una direttiva, il $ timeout parte è per evitare più chiamate (limitazione) e callback() fa la chiamata $ http effettiva.

La parte importante da prendere per voi da qui può essere: $defer.resolve(data.PageData) sta facendo il trucco per me anche non c'è la dichiarazione return come se fosse nel vostro caso.