在维护过滤器选项的同时对 html 表进行分页答案

【问题标题】：Paging an html-table while maintaining filter options在维护过滤器选项的同时对 html 表进行分页
【发布时间】：2019-09-22 03:02:07
【问题描述】：

我们正在为一位客户制作网页项目。这包括许多具有更多记录的表。我正在寻找一种客户端方式来仅显示表的某个部分（可能是前 100 名，过去一个月的记录，类似的），但保留所有记录以供搜索过滤器使用。

我目前使用的搜索过滤器是来自 W3.JS (w3.htmlFilter) 的过滤器，但在加载时仍然显示超过 500 条记录。

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

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

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

为了填充我的数据，我使用这个 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 可以设置。

【问题讨论】：

我建议尝试一下：datatables.net。它支持过滤、排序、分页、服务器端处理等等。用它取得了很好的效果:)
@Aaron 我也遇到过这个问题，但据我了解，每次搜索都会调用服务器？考虑到服务器位置和连接速度，这并不是一个真正的选择。
这取决于你如何实现它。您也可以简单地将数组用作数据源，并具有搜索等所有功能。如果您需要帮助，请随时发表评论:)

标签： javascript html search filter

【解决方案1】：

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

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
</head>
<body>
<script>
var data = [
    [
        "Tiger Nixon",
        "System Architect",
        "Edinburgh"
    ],
    [
        "Garrett Winters",
        "Director",
        "Edinburgh"
    ]
]
$(document).ready( function () {
    $('#table_id').DataTable( {
	data: data
	} );
} );
</script>
<table id="table_id" class="display">
    <thead>
        <tr>
            <th>Name</th>
            <th>Job</th>
			<th>City</th>
        </tr>
    </thead>
</table>
</body>
</html>

您唯一需要更改的是带有数据的数组的变量数据。一切正常，无需服务器端处理。您还可以做什么：创建一个 getdata.php 文件并通过将查询结果回显为 JSON 来将此文件用作数据源。

【讨论】：