Dynamic Table Paging with Angularjs

Asked

Viewed 2,375 times

0

I have the following scenario:

inserir a descrição da imagem aqui

I recover this data from a Rest API with Vraptor. I would like to display only two items per page, but I don’t know where to start. I implemented this pagination using the ui-bootstrap.

How do I make a dynamic query and display only two items per page?

Back-end:

Controller:

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

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

Front-end:

Controller:

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

 $scope.tamanhoMaximo = 6;
 $scope.totalItems = 175;
 $scope.currentPage = 1;

 ...//Código Omitido

Page:

...//Trecho omitido
</table>
<pagination total-items="totalItems" ng-model="currentPage" max-size="tamanhoMaximo" class="pagination-sm" boundary-links="true" rotate="false" num-pages="numPages"></pagination>
<pre>Page: {{currentPage}} / {{numPages}}</pre>

1 answer

2


Do so:

public List<Colaborador> listarColaboradores(Integer paginaInicio, Integer paginaFim) {
    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(paginaFim);

        lista = consulta.list();
        transacao.commit();
    } catch (RuntimeException ex) {
        ex.printStackTrace();
        throw ex;
    } finally {
        sessao.close();
    }
    return lista;
}

In your service you can pass two parameters setting the beginning and end of the page. In your case, for example, it would be in the first consultation: 0 and 2, in the second consultation: 2 and 4 and so on.

  • i would pass these parameters either by GET or by POST?

  • You can pass via GET

  • Got it, I’m just passing the currentPage, it’s almost working but it’s still not paying the right way. What I spend on this MaxResults ?

  • And when I jump to the next page it repeats the last record of the previous page, in addition to the registration with code = 1 not appear in the query

  • Maxresults vc defines until which page will be returned. Imagine the following situation. You have 100 records in the database. Passing Firstresult=10 and Maxresults=20 Hibernate will return only the records between this track, that is, records between 10 and 20, understood?

  • He doesn’t repeat the last record, he switches to the next

  • Got it, how I don’t show it on the next page?

  • On the return of your service you arrow $Scope. <object_name> = <return of service>

Show 3 more comments

Browser other questions tagged

You are not signed in. Login or sign up in order to post.