可脚 - 如何显示筛选的记录数?

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"，我希望显示的消息是： "行数：2">

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

提前感谢您的帮助。

Answer 1

您可以在h1中添加span：

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

并使用脚后事件填充它：

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