Javascript PHP How to make a realtime count of table row when change

Question

I have a table that when i type on input field it will show those like data that i searched realtime, i mean it filtered the data when i type in textbox.

i already did the filtered but i want to add some features that shows a text that count how many rows are filtered.

like this

enter image description here

this is my filtering code

function searchTable(inputVal)
{
var table = $('#tblData');
table.find('tr').each(function(index, row)
{
    var allCells = $(row).find('td');
    if(allCells.length)
    {
        var found = false;
        allCells.each(function(index, td)
        {
            var regExp = new RegExp(inputVal, 'i');
            if(regExp.test($(td).text()))
            {
                found = true;
                return false;
            }
        });
        if(found == true)$(row).show();else $(row).hide();
    }
});
}

When you clicked [Add new criteria] button. You recall function searchTable and count row at here. And I think find [tr] tag is enough — Quynh Nguyen
– Quynh Nguyen, Commented Aug 1, 2016 at 12:42
Dont you know how many rows are being returned at the time you process the result from your ajax call — RiggsFolly
– RiggsFolly, Commented Aug 1, 2016 at 12:45
sir, but my add new criteria button and my search input type are different, when i type on search input field it automatically filtered, that button is for my modal display the data but i also want to display a message below how many data are display by filtering, — Raffy T Lawrence
– Raffy T Lawrence, Commented Aug 1, 2016 at 12:46

Tuğca Eker · Accepted Answer · 2016-08-01 13:12:31Z

1

You can count all / hidden / shown childs using jQuery selectors at the end of your code.

You can use these selectors respectively; tr, tr:hidden, tr:visible

function searchTable(inputVal) {
    var table = $('#tblData');
    table.find('tr').each(function(index, row) {
        var allCells = $(row).find('td');
        if (allCells.length) {
            var found = false;
            allCells.each(function(index, td) {
                var regExp = new RegExp(inputVal, 'i');
                if (regExp.test($(td).text())) {
                    found = true;
                    return false;
                }
            });
            if (found == true) $(row).show();
            else $(row).hide();
        }
    });
    /* Use these values and print / append something to your HTML. */
    var allChilds = $('#tblData').find('tr').length;
    var shownChilds = $('#tblData').find('tr:visible').length;
    var hiddenChilds = $('#tblData').find('tr:hidden').length;
    /* Use these values and print / append something to your HTML. */
    var countTemplate = "Your template, Total:"+allChilds;
    $("#counts").html(countTemplate);

}

edited Aug 1, 2016 at 13:12

answered Aug 1, 2016 at 12:47

Tuğca Eker

1,49313 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Raffy T Lawrence Over a year ago

sir but its duplicating when i append, how do i remove the previous append on keyup

Tuğca Eker Over a year ago

I have updated my code. Add <div id="counts"></div> to your HTML and update content of it on each searchTable() function call.

Tomaj · Accepted Answer · 2016-08-01 13:20:46Z

Here's modified code of your function:

searchTable = function(inputVal) {
  showing = 0;
  rows.each(function(index, row) {
    var allCells = $(row).find('td');
    if (allCells.length) {
      var found = false;
      allCells.each(function(index, td) {
        var regExp = new RegExp(inputVal, 'i');
        if (regExp.test($(td).text())) {
          showing++;
          found = true;
          return false;
        }
      });
      if (found == true) $(row).show();
      else $(row).hide();
    }
    $showingSpan.text(showing.toString());
    $totalSpan.text(total.toString());
    $filteredSpan.text((total - showing).toString());
  });
};

And here's working fiddle with implemented functionality of counting filtered and visible rows. You didn't mention what version of jQuery you are using so I assumed the 2.2.4 version.

Collectives™ on Stack Overflow

Javascript PHP How to make a realtime count of table row when change

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related