Table paging with Angularjs

Question

I was trying to put a pagination in my table, after a help I managed to partially solve the problem, but it was not the way I expected.

I can get the currentPage every click on <pagination> the problem is how to load the data when I change page. The old way was using setFirstResult and setMaxResults of Hibernate but when I clicked on the next page it always repeated the last line of the previous page on the new page.

What would be the best way to get the data according to the page clicked, what I pass as parameter to this query?

Front-end

Controller:

angular.module("oraculo").controller("colaboradorController", function($scope, $routeParams, $location, colaboradorAPI, colaboradores){

        $scope.tamanhoMaximo = 6;
        $scope.currentPage = 1;
        $scope.totalItems = 60;
        //Onde fica armazenada toda a consulta
        $scope.colaboradores = colaboradores.data;
        ...

Page:

...
</table>
<pagination total-items="totalItems" ng-model="currentPage" max-size="tamanhoMaximo" class="pagination-sm" boundary-links="true" rotate="false" num-pages="numPages" ng-click="loading(currentPage)"></pagination>

---

Back-end

DAO:

@SuppressWarnings("unchecked")
    public List<Colaborador> listarColaboradores() {
        List<Colaborador> lista = new ArrayList<>();
        Session sessao = HibernateUtil.getSessionFactory().openSession();
        Transaction transacao = null;
        try {
            transacao = sessao.beginTransaction();
            Query consulta = sessao.getNamedQuery("Colaborador.listar");
            lista = consulta.list();
            transacao.commit();
        } catch (RuntimeException ex) {
            ex.printStackTrace();
            throw ex;
        } finally {
            sessao.close();
        }
        return lista;
    }

---

I was doing it this way earlier:

DAO:

@SuppressWarnings("unchecked")
    public List<Colaborador> listarColaboradores(Integer paginaInicio, Integer count) {
        List<Colaborador> lista = new ArrayList<>();
        Session sessao = HibernateUtil.getSessionFactory().openSession();
        Transaction transacao = null;

        try {
            transacao = sessao.beginTransaction();
            Query consulta = sessao.getNamedQuery("Colaborador.listar");
            consulta.setFirstResult(paginaInicio);
            consulta.setMaxResults(count);
            lista = consulta.list();
            transacao.commit();
        } catch (RuntimeException ex) {
            ex.printStackTrace();
            throw ex;
        } finally {
            sessao.close();
        }
        return lista;
    }

Controller:

@Get
@Path("/colaboradores/{paginaInicio}")
    public void listarTodos(Integer paginaInicio) {
        result.use(Results.json())
       .withoutRoot()
       .from(colaboradorDAO.listarColaboradores(paginaInicio, 4))
       .serialize();
}

In the Front-end:

Controller:

 $scope.loading = function(currentPage){
        console.log("currentPage: "+currentPage);
        colaboradorAPI.getColaboradores(currentPage).success(function(data){
            $scope.colaboradores = data;
        });
    }

Service:

var _getColaboradores = function(paginaInicio){
        return $http.get(config.baseURL + "/Oraculo/colaborador/colaboradores/" + paginaInicio);
};

That’s how I call function loading in the ng-click of pagination, and step the currentPage. Then I pass the currentPage as a parameter for the back-end.

My Project: https://github.com/sinkz/Angular

Answer 1

Here I have an example almost the same as yours except that in my case is an infinite scroll similar to facebook.

Observer the following, when the user opens the page will be displayed 50($Scope.page.ini -> $Scope.page.end) records and every query 30 ($Scope.page.ini = 50, $Scope.page.end = 80, $Scope.page.ini = 80, $Scope.page.end = 110 and so on) new records are presented.

AppPeople.controller("PeopleController", function($scope, $people) {
    $scope.data = [];
    $scope.page = {ini : 0, end : 50, increment: 30};
    $scope.busy = false;

    $scope.search = function() {
        $scope.busy = true;
        $scope.promise = $people.query({ini:$scope.page.ini, end: $scope.page.end}, function(response) { 
            $scope.loadPeople(response);
            $scope.incrementPageNumber();
            $scope.busy = false;
        }).$promise;
    };

    $scope.incrementPageNumber = function(){
        $scope.page.ini  = $scope.page.end;
        $scope.page.end += $scope.page.increment;
    };

    $scope.loadPeople = function(people){
        angular.forEach(people, function(item, i) {
            $scope.data.push(item);
        });
    };
});

In the sequence of clicking on the next page you will have:

1. setFirstResult=0, setMaxResults=50
2. setFirstResult=50, setMaxResults=80
3. setFirstResult=80, setMaxResults=110
4. setFirstResult=110, setMaxResults=130
5. setFirstResult=130, setMaxResults=140

Note: setFirstResult always receives the previous setMaxResults, except in the first query where it will be 0. Already setMaxResults is always incremented from 30 to 30, except the first time it will display 50.

Final version: query.setFirstResult((page -1) * 6); query.setMaxResults(page * 6);