Question

对于一个客户，我们正在制作一个网页项目。这包括很多具有更多记录的表。我正在寻找一种仅显示表的特定部分（例如TOP 100，过去一个月的记录，之类的东西）的客户端方法，但保留所有记录供搜索过滤器使用。 / p>

我当前使用的搜索过滤器是W3.JS（w3.htmlFilter）中的一个，但是加载后仍然显示超过500条记录。

上面已经描述了主要目标，但是我也接受一个不错的解决方案，该解决方案可以让我显示10条记录，而不会失去过滤器的可选性。

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

已经尝试设置Table Max-Height并将其设置为Y溢出。已经尝试使用display：inline-block，但这破坏了所有布局。已经尝试了一些仅显示某些记录的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>

预期结果：X条记录的可过滤列表很长，可以在其中设置X。

Answer 1

这是使用数据表的解决方案：

{{1}}

您唯一需要更改的是将变量数据添加到数据数组中。一切无需服务器端处理即可工作。您还可以执行以下操作：创建一个getdata.php文件，并通过将查询结果作为JSON回显，将此文件用作数据源。

有关更多信息：https://datatables.net/manual/data/

分页html表，同时保持过滤器选项

1 个答案: