Table Filters with jQuery

Asked

Viewed 371 times

2

I implemented a table filter with jQuery, as code below, but I would like to implement a record return counter, as I search.

$(function(){
    $(".input-search").keyup(function(){
        //pega o css da tabela 
        var tabela = $(this).attr('alt');
        if( $(this).val() != ""){
            // OCULTA VALORES NÃO ENCONTRADOS.
            $("."+tabela+" tbody>tr").hide();
            // EXIBE OS RESULTADOS ENCONTRADOS.
            $("."+tabela+" td:contains-ci('" + $(this).val() + "')").parent("tr").show();

        } else{
            //EXIBE TABELA TODA 
            $("."+tabela+" tbody>tr").show();

        }
    }); 
});
$.extend($.expr[":"], {
    "contains-ci": function(elem, i, match, array) {
        return (elem.textContent || elem.innerText || $(elem).text() || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
    }

});
jquery table
  • 1

    The table is generated through database query?

1 answer

1

If I understand what you need correctly, I think I can handle it. I added the counter right at the beginning to have access to the scope, then we reset it so that it does not take trace of other counts. Then, when the item is displayed, we add the count to have the total of records displayed.

Updated code:

    $(function() {

        var contador = 0;

        $(".input-search").keyup(function() {

            contador = 0;

            //pega o css da tabela 
            var tabela = $(this).attr('alt');
            if ($(this).val() != "") {
                // OCULTA VALORES NÃO ENCONTRADOS.
                $("." + tabela + " tbody>tr").hide();
                // EXIBE OS RESULTADOS ENCONTRADOS.
                $("." + tabela + " td:contains-ci('" + $(this).val() + "')").parent("tr").show();

                contador = $("." + tabela + " td:contains-ci('" + $(this).val() + "')").length;

            } else {
                //EXIBE TABELA TODA 
                $("." + tabela + " tbody>tr").show();

            }
        });
    });

    $.extend($.expr[":"], {
        "contains-ci": function(elem, i, match, array) {
            return (elem.textContent || elem.innerText || $(elem).text() || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
        }
    });

  • 1

    Thanks Bruno_, However I implemented the changes suggested by you, but counter is not incrementing, I do not understand why you put the counter within an IF.another question, using the following code to present value This counter '$("#result"). html(result);' declared a DIV in html to display right after table .

  • 1

    I’m glad it worked out Rafael. IF there was an object that didn’t exist, I wouldn’t add it to the counter. jQuery does not return an error if the show expression did not obtain an object, so one way to validate whether it exists is to check with .length. If the object that was caught by the code was 1, incremented 1 in the counter.

  • 1

    So Bruno, as said the counter is not incrementing,I already put INPUT display of the counter variable to check is nothing. I don’t know it was so clear my doubt.I would like to implement a counter every time I perform a survey would return total record in the table.

  • 1

    Take a test, place after the Else {} closure<-- a console.log(counter) and see the console if it is displaying any value. If it is, point the output to html, example $("#counter"). html(counter);

  • 1

    Really nothing Brother '} Else{ //DISPLAY TABLE ALL $("."+table+" tbody>tr"). show(); } console.log(counter) ; Alert("Test "+counter); }); I put up to Alert...because it resets variable right after snippet '$(".input-search"). keyup(Function(){ '

  • I updated the code, I was really wrong, see if it works now. I don’t know where I took it, but I imagined a loop there and it doesn’t, just count the number of items that will be displayed.

  • It was apparent that it worked, but with some tests I realized that as you type in the search field, counter presents some inconsistencies s.I will study a way to better implement. I even did it in PHP, but with I’m learning Jquery I’ll implement it with it.Thanks

Show 2 more comments

Browser other questions tagged jquery table

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