1

Tenho uma tabela #tabela e gostaria que a cada vez que eu faço um filtro pelo select ele some a quantidade que está na coluna 6 eq(5). Com o código abaixo ele está executando, porém ele exibe o valor anterior que eu seleciono. Por exemplo, está exibindo 3 linhas com 5, 5 e 5 em cada uma delas. Quando eu troco o option do select para qualquer outra opção, aí que ele vai me mostrar a soma, 25 no console.

 $('select').on('change', function() {
    var qtd = 0
    $("#tabela tbody tr:not(.filtered)").each(function(){
        qtd += parseInt($(this).find('td').eq(5).html())
    });
    console.log(qtd);
});

Qual evento eu poderia utilizar para que ele calculasse quando troco a seleção do <select>. Eu havia pensado no óbvio, o change.

Sou iniciante eh jQuery, então se o código puder ser escrito de uma melhor forma, fique a vontade para sugerir.

Obrigado.

7
  • O valor do select na verdade não me importa. Eu utilizo ele apenas para filtro, se seleciono opção Teste, ele filtra para 3 linhas na tabela, por exemplo. Eu então conto as linhas filtradas, pela classe .filtered. E assim vou somando a cara linha para saber o total que tenho.
    – netovgs
    Commented 29/01/2018 às 23:39
  • Se ao mudar o select é efetuado o fltro e ao mesmo tempo chamado o "onchange", vai dar problema porque as duas coisas não vão ser processadas em sincronia.
    – Sam
    Commented 29/01/2018 às 23:53
  • É o próprio jQuery que faz, um script que uso a classe tablesorter. Veja nesta imagem uploaddeimagens.com.br/imagens/img-jpg--188. Eu quero somar o 50 + 1 quando eu troco o filtro de qualquer select (seta preta). Ele soma, mas ele vai mostrar o 51 só depois q eu trocar o filtro de novo.
    – netovgs
    Commented 29/01/2018 às 23:55
  • E como eu poderia fazer que isso funcione, é possível?
    – netovgs
    Commented 29/01/2018 às 23:57
  • O plugin é este tablesorter.com/docs?
    – Sam
    Commented 30/01/2018 às 0:10

2 Respostas 2

1

O plugin Tablesorter Filter Widget possui um trigger que é disparado após o fim do filtro.

Então coloque os cálculos dentro do trigger:

$("#tabela").on("filterEnd",function() {
   var qtd = 0
   $("#tabela tbody tr:not(.filtered)").each(function(){
      qtd += parseInt($(this).find('td').eq(5).html())
   });
   console.log(qtd);
});

Coloque após a inicialização do plugin:

$("#tabela").tablesorter();
9
  • <script src="jquery.tablesorter-customized.js" type="text/javascript"></script> <script src="jquery.tablesorter.js"></script> <script src="jquery.tablesorter.widgets.js"></script> Estes são os scripts que eu chamo na página menu.php e nesta página que tenho o código eu faço um include neste menu.php. Mas em ambas eu não tenho esse $("#tabela").tablesorter();
    – netovgs
    Commented 30/01/2018 às 0:30
  • @netovgs Seria bom disponibilizar um exemplo de HTML da tabela incluindo os selects pra gente dá uma olhada.
    – Sam
    Commented 30/01/2018 às 0:42
  • Coloquei este seu código no fim do meu, e não retornou nada.
    – netovgs
    Commented 30/01/2018 às 0:43
  • @netovgs Tinha que ver onde é que o plugin é inciado. Não precisa ser exatamente $("#tabela").tablesorter();, mas alguma coisa parecida
    – Sam
    Commented 30/01/2018 às 0:50
  • @netovgs Troca o "change" por "blur" para ver se funciona. O "blur" vc deve alterar o select e tirar o foco dele.
    – Sam
    Commented 30/01/2018 às 1:07
0

Consegui fazendo da seguinte forma:

$(document).ready(function() {
    var qtd = 0;

    $('select').on('blur', function(e) {  
        qtd = 0;
        $("#tabela tbody tr:not(.filtered)").each(function() {
            qtd += parseInt($(this).find('td').eq(5).html());  
        });
    });

    $('select').on('change', function() {       
        setTimeout (function() { 
            $("#tabela thead tr td input[type=search]").eq(0).focus(); 
            $('#total').html(qtd);
        }, 300);
    }); 
});

Não sei se esta é a melhor forma para se fazer isso, se está seguindo as boas práticas. Caso alguém tenha uma forma mais correta, por favor compartilhe.

@dvd obrigado por sua ajuda.

Abraços.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .