Footable

Question

在下面的例子中：

<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

我想显示过滤记录的数量。例如，如果我在过滤器中输入单词 "Jerry"，我希望消息显示为： "Rows count: 2"

如果我在过滤器中不插入任何内容，我希望消息显示显示的记录总数。

在此先感谢您的帮助。

Answer 1

您可以将 span 添加到 h1:

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

并使用 footable 的 postdraw event 填充它：

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

Footable - 如何显示过滤记录的数量？

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

jquery

rows

codepen