Javascript 在维护筛选器选项的同时分页html表

对于客户，我们正在制作一个网页项目。这包括许多包含更多记录的表。 我正在寻找一种客户端方式，只显示表的某一部分（前100名，上个月的记录，诸如此类），但保留所有记录供搜索过滤器使用

我目前使用的搜索过滤器是来自W3.JS（W3.htmlFilter）的，但加载后仍显示500多条记录

主要目标如上所述，但我也会接受一个像样的解决方案，它允许我显示10条记录，而不会丢失过滤器的可选性

该表使用foreach填充，foreach根据Razor提供的集合构造每个记录

已尝试设置表的最大高度并为其设置Y形溢出。 已经尝试了显示：内联块，但这破坏了所有布局。 已经尝试了一些JS，它只显示某些记录，但这意味着我无法访问未显示的记录（由于Razor）

要填充我的数据，我使用此剃须刀：

@{
    var allFoo = db.GetFoos();
    var foosToShow = foos.Where(v => v.SomeCondition == true);
}

应用于表的筛选器：

<input id="filter" oninput="w3.filterHTML('#foosTable', '.filterItem', this.value)" class="w3-input" placeholder="Search for foo..." />

实际填充记录：

<tbody>
 @foreach (Foo foo in foosToShow)
 {
 <tr class="filterItem" onclick="TransferElement(this)">
  <td>@foo.Prop1</td>
  <td>@foo.Prop2</td>
  <td>@foo.Prop3</td>
  <td>@foo.Prop4</td>
  <td>@foo.Prop5</td>
  <td>@foo.Prop6</td>
 </tr>
 }
</tbody>

@foreach（foosToShow中的Foo-Foo）
{
@foo.Prop1
@foo.Prop2
@foo.Prop3
@foo.Prop4
@foo.Prop5
@foo.Prop6
}

---

预期结果：X记录的可筛选列表很长，其中X可以设置。

以下是使用datatables的解决方案：

风险值数据=[
[
“老虎尼克松”，
“系统架构师”，
“爱丁堡”
],
[
“加勒特·温特斯”，
“董事”，
“爱丁堡”
]
]
$（文档）.ready（函数（）{
$（'#表_id'）。数据表（{
数据：数据
} );
} );
名称
工作
城市

我建议尝试一下：。它支持过滤、排序、分页、服务器端处理等等。有很好的结果：）@Aaron我也遇到过，但据我所知，它在每次搜索时都会调用服务器？考虑到服务器的位置和连接速度，这并不是一个真正的选项。这取决于您如何实现它。您还可以简单地使用数组作为数据源，并具有搜索等所有功能。如果需要帮助，请随时留言：）