Filter.js将过滤器应用于 HTML 表的每一列

一个超小（小于 1kb）的表格过滤插件，可为您的 HTML 表格的每一列生成一个搜索字段，使用户能够以方便的方式过滤您的表格数据。

如何使用它：

1. 将过滤器添加到您的 HTML 表格的标题列，如下所示：

<table class="table">
  <thead>
    <tr class="filters">
      <th><input type="text" placeholder="#" disabled></th>
      <th><input type="text" placeholder="First Name" disabled></th>
      <th><input type="text" placeholder="Last Name" disabled></th>
      <th><input type="text" placeholder="Username" disabled></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Prakhar</td>
      <td>Srivastava</td>
      <td>@Prakhar</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Rahul</td>
      <td>Singh</td>
      <td>@Rahul</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Ankit</td>
      <td>Mishra</td>
      <td>@Ankit</td>
    </tr>
  </tbody>
</table>

2.加载最新的jQuery 库后加载Filter.js主脚本。

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/filter.js"></script>

3. 在需要时加载必要的样式表。

<link href="filter.css" rel="stylesheet" />

4. 在表格底部添加一个行数计数器。可选的。

No.of Rows : <span id="rowcount"></span>

 源码下载：

GitHub - pspro0305/Html-table-with-custom-filters: Filters for each column seperately for HTML tables using Javascript and Jquery.https://github.com/pspro0305/Html-table-with-custom-filters