Série Angular JS: Filter ordenando tabela por coluna

Série Angular JS: Filter ordenando tabela por coluna

12:00 19 February in Implantação de Soluções
0 Comments

Olá, pessoal!

Vamos ver hoje como ordenar os dados em ordem crescente ou decrescente por coluna quando for clicado. É bem simples fazer isso.

Para separar o exemplo do artigo anterior, apenas dupliquei o filteradvance2.html e criei uma nova rota. Então, o resultado dos exemplos mostrado no artigo você deve ver no arquivo filteradvance2.html.Veja como ficou a rota:

1 app.js
2
3 when("/filteradvance2", {
4         templateUrl : "filteradvance2.html",
5         controller:filterController
6         }).

Abra o arquivo index.html e vamos adicionar bootstrap css no head:

Vamos precisar para usar um ícone na coluna.

Abra o arquivo filteradvance2.html e vamos dar continuidade. Para ordenar dados, temos o filter orderBy – no nosso caso vamos dizer que a ordenação vai acontecer com base na coluna que foi clicada. Portanto, vamos fazer isso aqui no head da coluna:

1 <thead>
2 <th ng-click="sort('name')">Name
3 <i ng-class="{'icon-chevron-up':isSortUp('name'),'icon-chevron-down':isSortDown('name')}"></i>
4 </th>
5 <th ng-click="sort('lastname')">Lastname
6 <i ng-class="{'icon-chevron-up':isSortUp('lastname'),'icon-chevron-down':isSortDown('lastname')}"></i>
7 </th>
8 <th ng-click="sort('age')">Age
9 <i ng-class="{'icon-chevron-up':isSortUp('age'),'icon-chevron-down':isSortDown('age')}"></i>
10 </th>
11 </thead>

Vamos entender agora. A função sort em ng-click ainda não existe e a criaremos agora. Ela basicamente recebe a propriedade que deve ser ordenada. Na tag <i /> inserimos o ícone e criamos duas funções (uma para ordem crescente e outra pra decrescente, que também vai receber a propriedade para ordenar).

Criando as funções no controller

Agora vamos dar carne ao esqueleto, criando as funções no filterController:

1 //restante do codigo omitido
2
3       $scope.sortField = undefined;
4       $scope.reverse = false;
5
6      $scope.isSortUp = function(fieldName){
7         return $scope.sortField === fieldName && !$scope.reverse;
8      };
9      $scope.isSortDown = function(fieldName){
10         return $scope.sortField === fieldName && $scope.reverse;
11      };
12      //order data
13      $scope.sort = function(fieldName){
14         if ($scope.sortField === fieldName) {
15             $scope.reverse = !$scope.reverse;
16         }else{
17             $scope.sortField = fieldName;
18             $scope.reverse = false;
19
20         };
21      }

Vamos testar? Portanto vamos clicar na coluna Name da tabela e ver o acontece:

02 filteradvancedorderasc

Ficou ordenado de forma crescente, agora vamos clicar novamente:

02 filteradvancedorderdesc

Simples, não? Vou ficando por aqui…

Abraços!

[Créditos da imagem em destaque: Shutterstock]

**Este texto é uma produção independente e, portanto, de inteira responsabilidade do autor, não refletindo a opinião da Infobase.

Camilo Lopes

camilo.lopes@iinterativa.com.br

Camilo Lopes é bacharel em Sistemas de Informação e Especialista em Gestão e Estratégia de Negócios. Trabalha com TI desde 2003 e possui as certificações SCJP 5 e SCM. Trabalhou na IBM Brasil como Analista Programador Java, passou pelo laboratório da Enterprise Computing Lab (ECL) HP como Software Engineer, Ci&T como Engenheiro de Software em projeto JEE. Tem experiência internacional em Índia, Dubai e Londres. Também é autor dos livros “Guia do Exame SCJP”, “Guia Prático JEE com Frameworks” e “TDD na prática”.