Footable - How can I show the number of filtered records?

Question

In the example below:

<div class="container">
  <h1>Rows count:  </h1>
  <table class="table is-bordered is-fullwidth" style="margin-top: 16px;">
  <thead>
    <tr>
      <th data-breakpoints="xs">PL</th>
      <th>BIB</th>
      <th data-type="html">Name</th>
      <th data-type="html">Aid Station</th>
      <th>In/Out At</th>
      <th data-breakpoints="xs sm">ETA Next</th>
      <th data-breakpoints="xs sm">Last Pace</th>
      <th data-breakpoints="xs sm">Total Time</th></tr>
   </thead>
   <tbody>
     <tr>
       <td>1</td>
       <td>2</td>
       <td><a href="#">Jerry Garcia</a></td>
       <td><a href="#">Finish</a></td>
       <td>IN 01:04:12</td>
       <td></td>
       <td>09:45</td>
       <td>20:04:12</td>
     </tr>
     <tr>
       <td>2</td>
       <td>50</td>
       <td><a href="#">Branden Bollweg [SOLO]</a></td>
       <td><a href="#">Finish</a></td>
       <td>IN 01:13:35</td>
       <td></td>
       <td>11:18</td>
       <td>20:13:35</td>
     </tr>
      <tr>
       <td>3</td>
       <td>21</td>
       <td><a href="#">Jerry Hole</a></td>
       <td><a href="#">Finish</a></td>
       <td>IN 01:37:35</td>
       <td></td>
       <td>15:18</td>
       <td>10:17:35</td>
     </tr>
   </tbody>
</table>
</div>

$(function() {
  $('.table').footable({
    filtering: {
      enabled: true
    }
  });

});

https://codepen.io/arfry/pen/NWGooNa

I would like to show the number of filtered records. For example, if I enter the word "Jerry" in the filter, I would like the message shown to be: "Rows count: 2"

If instead I insert nothing in the filter I would like the message to show me the total of the records shown.

Thanks in advance for the help.

Answer 1

You could add a span to the h1:

<h1>Rows count: <span class="row-count"></span></h1>

And fill it using the postdraw event of footable:

$(function() {
  $('.table').footable({
    filtering: {
      enabled: true
    },
    on: {
      "postdraw.ft.table": function(event, footable){
        let rowCount = footable.rows.array.length;
        $(".row-count")[0].textContent = rowCount;
      }
    }    
  });  
});