Return of select brings previous value - jQuery

Asked

Viewed 103 times

1

I have a table #table and I would like every time I make a filter by select it to add the amount that is in column 6 eq(5). With the code below it is running, however it displays the previous value I select. For example, it is displaying 3 lines with 5, 5 and 5 in each of them. When I change the option of select for any other option, then it will show me the sum, 25 on the 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);
});

What event could I use for him to calculate when I change the selection of <select>. I had thought of the obvious, the change.

I am beginner eh jQuery, so if the code can be written in a better way, feel free to suggest.

Thank you.

javascript html jquery html5

  • The value of select doesn’t really matter to me. I use it only for filter, if I select Test option, it filters to 3 rows in the table, for example. I then count the filtered lines, by the class .filtered. And so I add up the face line to know the total I have.

  • If when changing the select is made the stroke and at the same time called the "onchange", will give problem because the two things will not be processed in sync.

  • It is jQuery himself who makes a script that uses the tablesorter class. Look at this image https://uploaddeimagens.com.br/imagens/img-jpg-188. I want to add 50 + 1 when I change the filter of any select (black arrow). It adds up, but it will show the 51 only after I change the filter again.

  • And how could I make it work, is it possible?

  • The plugin is this http://tablesorter.com/docs/?

  • Still counting after I change my options. =/

  • This is how the ths are: <th data-placeholder='Filter' class='filter-select filter-Exact'><b>Nº License</b></th> and the table: <table id='table' class='tablesorter'>

Show 2 more comments

2 answers

1


The plugin Tablesorter Filter Widget has a Trigger that is fired after the filter is finished.

So put the calculations inside the 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);
});

Place after plugin startup:

$("#tabela").tablesorter();

  • <src="jquery.tablesorter-customized.js" type="text/javascript"></script> <script src="jquery.tablesorter.js"></script> <script src="jquery.tablesorter.widgets.js"></script> . But in both I don’t have this $("#table"). tablesorter();

  • @netovgs It would be good to provide an example of table HTML including the selects for us take a look.

  • I put your code at the end of mine, and you didn’t return anything.

  • @netovgs Had to see where the plugin is initialized. It doesn’t need to be exactly $("#tabela").tablesorter();, but something like

  • @netovgs Swap "change" with "Blur" to see if it works. "Blur" you must change the select and take the focus from it.

  • I did what you said, and already a light has appeared rs...it calculates now as I take the focus from the Select. But then I try to put this: $("#table thead tr td input[type=search]"). eq(0). Focus() to focus on a side input search and so it calculate. But who says it works?! If I only use this code it selects exactly the object, now if I put . Focus, it doesn’t focus on the input. Is the code correct or does it have another way to do it? Seila, a lostfocus after the Blur...is for little rsrs. Thank you.

  • Let’s go continue this discussion in chat.

  • Anyone with any suggestions to help? Maybe how to give a tab after the select change and so run Blur...I don’t know if it would be the right way to go. =/

  • Now yes!!! It has the same result as mine, but without a doubt yours is much more practical and clean. Thank you @dvd.

Show 4 more comments

0

I did it this way:

$(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);
    }); 
});

I don’t know if this is the best way to do it, if you’re following good practice. If anyone has a more correct form, please share.

@dvd thanks for your help.

Hugs.

Browser other questions tagged javascript html jquery html5

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