Paginação, Busca e Ordenação de Tabela com AngularJS
Oi pessoal!
Neste artigo resolvi escrever de forma bem básica, passo a passo, como fazer paginação, busca e ordenação de tabela com AngularJS.
Certamente existem diversas maneiras de fazer isto, como em quase todas as outras coisas, várias formas talvez até mais simples, ou sofisticadas, porém, esta é apenas mais uma.
A implementação a seguir consiste em formulário de busca, ordenação da tabela por colunas e paginação contendo botões utilizando Bootstrap (http://getbootstrap.com/).
Importado para o sistema
Os fontes necessários para o funcionamento do sistema, dirPagination.js, devem ser importados MyApp = angular.module(“dirPagination.js”);
O CONTROLLER
Ordenação da Tabela por Colunas
No controller da tela deverão ser inseridas as seguintes variáveis e a seguinte function:
Observar que deverá ser atribuído à $scope.predicate a propriedade que deverá ser ordenada por padrão. No primeiro carregamento da tabela, esta será a coluna que estará ordenada. No caso deste exemplo, a implementação continha na tabela a coluna Idade mas, no seu caso pode ser qualquer outra coluna: Nome, Endereco…
$scope.reverse = true carrega a tabela pela primeira vez com a coluna escolhida na ordem descendente.
$scope.reverse = false carrega a tabela pela primeira vez com a coluna escolhida na ordem ascendente.
O HTML
Busca
No html deverá ser inserido o formulário de busca como segue:
Observe que as classes (class) são pertinentes ao sistema e são parte do design do mesmo então, podem ser desconsideradas pois cada sistema tem seu design e css próprios.
O que merece atenção é o ng-model pois este que será usado no filter do ng-repeat para a busca em tempo de digitação.
Paginação
No html deverão ser inseridos os botões de paginação como segue:
max-size corresponde ao número máximo de botões que serão exibidos na navegação entre páginas. Neste caso são cinco: << | 1 | 2 | 3 | 4 | 5 | >>
A Tabela
Agora basta implementar a tabela e a coisa toda acontece.
A primeira coisa a ser observada é que no lugar de ng-repeat deverá ser usado dir-paginate. Se você observar o código -fonte da página, verá que dir-paginate nada mais é que um ng-repeat, no caso o que está sendo interpretado pelo nosso módulo dirPagination.js.
Além disso, é em dir-paginate, da mesma forma como em ng-repeat, que são inseridos:
Ordenação - orderBy:predicate:reverse
Filtro de busca - filter:search
Quantidade de itens por página: itemsPerPage:5
Agora só falta implementar os cabeçalhos das colunas da tabela para que a ordenação funcione:
Faça o download: https://www.dropbox.com/s/fzo5xqvudwadx2f/search-sort-and-pagination-angularjs-master.zip?dl=0
Pronto!
Grande abraço
Neste artigo resolvi escrever de forma bem básica, passo a passo, como fazer paginação, busca e ordenação de tabela com AngularJS.
Certamente existem diversas maneiras de fazer isto, como em quase todas as outras coisas, várias formas talvez até mais simples, ou sofisticadas, porém, esta é apenas mais uma.
A implementação a seguir consiste em formulário de busca, ordenação da tabela por colunas e paginação contendo botões utilizando Bootstrap (http://getbootstrap.com/).
Importado para o sistema
Os fontes necessários para o funcionamento do sistema, dirPagination.js, devem ser importados MyApp = angular.module(“dirPagination.js”);
O CONTROLLER
Ordenação da Tabela por Colunas
No controller da tela deverão ser inseridas as seguintes variáveis e a seguinte function:
Observar que deverá ser atribuído à $scope.predicate a propriedade que deverá ser ordenada por padrão. No primeiro carregamento da tabela, esta será a coluna que estará ordenada. No caso deste exemplo, a implementação continha na tabela a coluna Idade mas, no seu caso pode ser qualquer outra coluna: Nome, Endereco…
$scope.reverse = true carrega a tabela pela primeira vez com a coluna escolhida na ordem descendente.
$scope.reverse = false carrega a tabela pela primeira vez com a coluna escolhida na ordem ascendente.
O HTML
Busca
No html deverá ser inserido o formulário de busca como segue:
Observe que as classes (class) são pertinentes ao sistema e são parte do design do mesmo então, podem ser desconsideradas pois cada sistema tem seu design e css próprios.
O que merece atenção é o ng-model pois este que será usado no filter do ng-repeat para a busca em tempo de digitação.
Paginação
No html deverão ser inseridos os botões de paginação como segue:
max-size corresponde ao número máximo de botões que serão exibidos na navegação entre páginas. Neste caso são cinco: << | 1 | 2 | 3 | 4 | 5 | >>
A Tabela
Agora basta implementar a tabela e a coisa toda acontece.
A primeira coisa a ser observada é que no lugar de ng-repeat deverá ser usado dir-paginate. Se você observar o código -fonte da página, verá que dir-paginate nada mais é que um ng-repeat, no caso o que está sendo interpretado pelo nosso módulo dirPagination.js.
Além disso, é em dir-paginate, da mesma forma como em ng-repeat, que são inseridos:
Ordenação - orderBy:predicate:reverse
Filtro de busca - filter:search
Quantidade de itens por página: itemsPerPage:5
Agora só falta implementar os cabeçalhos das colunas da tabela para que a ordenação funcione:
Faça o download: https://www.dropbox.com/s/fzo5xqvudwadx2f/search-sort-and-pagination-angularjs-master.zip?dl=0
Pronto!
Grande abraço
Comentários
Postar um comentário