如何使用 JavaScript 使每一列（独立地）可过滤 HTML？

Posted 2023-05-07

【中文标题】如何使用 JavaScript 使每一列（独立地）可过滤 HTML？

【英文标题】：How to make HTML filterable by every column (independently) using JavaScript?

【发布时间】：2021-12-07 14:02:12

【问题描述】：

按照这篇文章中的建议，我创建了一个可以根据任何列进行过滤的表。

How to filter a html table using simple javascript?

但我想做的是使用类似文档就绪功能这样简单的东西在每一列上创建一个搜索栏，这样当你搜索它时它只适用于该列。

仅使用文档准备功能是否可以实现简单的解决方案？

我在每列中使用 CSS 和特殊标签之前创建了一个版本，但这会出现问题，具体取决于我后来尝试格式化表格的方式。

$(document).ready(function() 
  $('#permits').DataTable(
    "pagingType": "full_numbers",
    "order": [
      [1, "asc"]
    ]
  );
);

<div class="panel panel-primary filterable">
  <table border="1" class="table dataTable no-footer" id="permits" role="grid" aria-describedby="permits_info" style="width: 1612px;">
    <thead>
      <tr style="text-align: right;" role="row">
        <th class="sorting" tabindex="0" aria-controls="permits" rowspan="1" colspan="1" aria-label="Project ID: activate to sort column ascending" style="width: 65px;">Project ID</th>
        <th class="sorting_asc" tabindex="0" aria-controls="permits" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Company: activate to sort column descending" style="width: 64px;">Company</th>
        <th class="sorting" tabindex="0" aria-controls="permits" rowspan="1" colspan="1" aria-label="Permit Engineer: activate to sort column ascending" style="width: 114px;">Permit Engineer</th>
        <th class="sorting" tabindex="0" aria-controls="permits" rowspan="1" colspan="1" aria-label="Application Recieved: activate to sort column ascending" style="width: 77px;">Application Recieved</th>
        <th class="sorting" tabindex="0" aria-controls="permits" rowspan="1" colspan="1" aria-label="Current Project Status: activate to sort column ascending" style="width: 212px;">Current Project Status</th>
        <th class="sorting" tabindex="0" aria-controls="permits" rowspan="1" colspan="1" aria-label="Status: activate to sort column ascending" style="width: 55px;">Status</th>
        <th class="sorting" tabindex="0" aria-controls="permits" rowspan="1" colspan="1" aria-label="Address: activate to sort column ascending" style="width: 62px;">Address</th>
        <th class="sorting" tabindex="0" aria-controls="permits" rowspan="1" colspan="1" aria-label="CITY: activate to sort column ascending" style="width: 32px;">CITY</th>
        <th class="sorting" tabindex="0" aria-controls="permits" rowspan="1" colspan="1" aria-label="STATE: activate to sort column ascending" style="width: 44px;">STATE</th>
        <th class="sorting" tabindex="0" aria-controls="permits" rowspan="1" colspan="1" aria-label="ZIP: activate to sort column ascending" style="width: 55px;">ZIP</th>
        <th class="sorting" tabindex="0" aria-controls="permits" rowspan="1" colspan="1" aria-label="COUNTY: activate to sort column ascending" style="width: 60px;">COUNTY</th>
        <th class="sorting" tabindex="0" aria-controls="permits" rowspan="1" colspan="1" aria-label="E_PHONE: activate to sort column ascending" style="width: 67px;">E_PHONE</th>
        <th class="sorting" tabindex="0" aria-controls="permits" rowspan="1" colspan="1" aria-label="E_EMAIL: activate to sort column ascending" style="width: 125px;">E_EMAIL</th>
        <th class="sorting" tabindex="0" aria-controls="permits" rowspan="1" colspan="1" aria-label="Most Recent Update: activate to sort column ascending" style="width: 48px;">Most Recent Update</th>
      </tr>
    </thead>
    <tbody>
      <tr role="row" class="odd">
        <td>N142250004</td>
        <td class="sorting_1">Quick Draw Inc.- Firearms Range</td>
        <td>John Person<br>999-999-9999- [e-mail]</td>
        <td>2021-09-02</td>
        <td>NOI_DATE</td>
        <td>Reviewing Application</td>
        <td>111 S Mountain Vista Parkway</td>
        <td>Provo</td>
        <td>UT</td>
        <td>84601</td>
        <td>Utah</td>
        <td>999-999-9999</td>
        <td>[e-mail]</td>
        <td>2021-09-02 16:50:24</td>
      </tr>
      <tr role="row" class="even">
        <td>N149200002</td>
        <td class="sorting_1">Storage - Facility</td>
        <td>Jake A. Guy<br>[phone] - [e-mail]</td>
        <td>2020-09-15</td>
        <td>PUBLIC_COMMENT_START_DATE</td>
        <td>Released for Public Comment</td>
        <td>In the middle of the salt lake</td>
        <td>Salt Lake City</td>
        <td>UT</td>
        <td>84104</td>
        <td>Salt Lake</td>
        <td>999-999-9999</td>
        <td>[e-mail]</td>
        <td>2021-10-14 10:20:02</td>
      </tr>
  </table>
</div>

【问题讨论】：

有人能告诉我如何为这个问题设置“运行代码 sn-p”选项吗？我一直在试图弄清楚。有人通常会编辑我的问题来帮助我，但如果我能自己做会更好。

最好从 js 中用模板渲染这样的列表，然后用 js 过滤它们

你这是什么意思？

要创建“运行代码sn-p”，您需要单击图片图标后的图标，即<>。

谢谢你，我不知道如何使用专门为此准备的文档，但我稍后会处理。

【参考方案1】：

您可以使用 Datatables 库按列过滤，您只需要指定列并使用方法 search 和 draw 并使用要过滤的列 id 创建过滤器输入，如下所示：

$(document).ready(function() 
    $('#permits').DataTable( 
        "pagingType": "full_numbers",
        "order": [[ 1, "asc" ]]
    );
    
    $('#filter-boxes input').on( 'keyup', function () 
      var col = $(this).data("col");
      $('#permits').DataTable().column( col ).search( $(this).val() ).draw();
     );
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css" rel="stylesheet"/>
<div class="panel panel-primary filterable">
  <div id="filter-boxes">
    <input data-col="0" type="text" placeholder="Search Project ID">
    <input data-col="1" type="text" placeholder="Search Company">
    <input data-col="2" type="text" placeholder="Search Permit Engineer">
    <input data-col="3" type="text" placeholder="Search Application Recieved">
    <input data-col="4" type="text" placeholder="Search Current Project Status">
    <input data-col="5" type="text" placeholder="Search Status">
    <input data-col="6" type="text" placeholder="Search Address">
    <input data-col="7" type="text" placeholder="Search CITY">
    <input data-col="8" type="text" placeholder="Search STATE">
    <input data-col="9" type="text" placeholder="Search ZIP">
    <input data-col="10" type="text" placeholder="Search COUNTY">
    <input data-col="11" type="text" placeholder="Search E_PHONE">
    <input data-col="12" type="text" placeholder="Search E_EMAIL">
    <input data-col="13" type="text" placeholder="Search Most Recent Update">
  </div>
  <table border="1" class="table dataTable no-footer" id="permits" role="grid" aria-describedby="permits_info" style="width: 1612px;">
      <thead>
          <tr style="text-align: right;" role="row">
              <th class="sorting" tabindex="0" aria-controls="permits" rowspan="1" colspan="1" aria-label="Project ID: activate to sort column ascending" style="width: 65px;">Project ID</th>
              <th class="sorting_asc" tabindex="0" aria-controls="permits" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Company: activate to sort column descending" style="width: 64px;">Company</th>
              <th class="sorting" tabindex="0" aria-controls="permits" rowspan="1" colspan="1" aria-label="Permit Engineer: activate to sort column ascending" style="width: 114px;">Permit Engineer</th>
              <th class="sorting" tabindex="0" aria-controls="permits" rowspan="1" colspan="1" aria-label="Application Recieved: activate to sort column ascending" style="width: 77px;">Application Recieved</th>
              <th class="sorting" tabindex="0" aria-controls="permits" rowspan="1" colspan="1" aria-label="Current Project Status: activate to sort column ascending" style="width: 212px;">Current Project Status</th>
              <th class="sorting" tabindex="0" aria-controls="permits" rowspan="1" colspan="1" aria-label="Status: activate to sort column ascending" style="width: 55px;">Status</th>
              <th class="sorting" tabindex="0" aria-controls="permits" rowspan="1" colspan="1" aria-label="Address: activate to sort column ascending" style="width: 62px;">Address</th>
              <th class="sorting" tabindex="0" aria-controls="permits" rowspan="1" colspan="1" aria-label="CITY: activate to sort column ascending" style="width: 32px;">CITY</th>
              <th class="sorting" tabindex="0" aria-controls="permits" rowspan="1" colspan="1" aria-label="STATE: activate to sort column ascending" style="width: 44px;">STATE</th>
              <th class="sorting" tabindex="0" aria-controls="permits" rowspan="1" colspan="1" aria-label="ZIP: activate to sort column ascending" style="width: 55px;">ZIP</th>
              <th class="sorting" tabindex="0" aria-controls="permits" rowspan="1" colspan="1" aria-label="COUNTY: activate to sort column ascending" style="width: 60px;">COUNTY</th>
              <th class="sorting" tabindex="0" aria-controls="permits" rowspan="1" colspan="1" aria-label="E_PHONE: activate to sort column ascending" style="width: 67px;">E_PHONE</th>
              <th class="sorting" tabindex="0" aria-controls="permits" rowspan="1" colspan="1" aria-label="E_EMAIL: activate to sort column ascending" style="width: 125px;">E_EMAIL</th>
              <th class="sorting" tabindex="0" aria-controls="permits" rowspan="1" colspan="1" aria-label="Most Recent Update: activate to sort column ascending" style="width: 48px;">Most Recent Update</th>
          </tr>
      </thead>
      <tbody>
          <tr role="row" class="odd">
              <td>N142250004</td>
              <td class="sorting_1">Quick Draw Inc.- Firearms Range</td>
              <td>John Person<br>385-555-6503 - [e-mail]</td>
              <td>2021-09-02</td>
              <td>NOI_DATE</td>
              <td>Reviewing Application</td>
              <td>111 S Mountain Vista Parkway</td>
              <td>Provo</td>
              <td>UT</td>
              <td>84601</td>
              <td>Utah</td>
              <td>999-555-9999</td>
              <td>[e-mail]</td>
              <td>2021-09-02 16:50:24</td>
          </tr>
          <tr role="row" class="even">
              <td>N149200002</td>
              <td class="sorting_1">Storage - Facility</td>
              <td>Jake A. Guy<br>[phone] - [e-mail]</td>
              <td>2020-09-15</td>
              <td>PUBLIC_COMMENT_START_DATE</td>
              <td>Released for Public Comment</td>
              <td>In the middle of the salt lake</td>
              <td>Salt Lake City</td>
              <td>UT</td>
              <td>84104</td>
              <td>Salt Lake</td>
              <td>999-555-9999</td>
              <td>[e-mail]</td>
              <td>2021-10-14 10:20:02</td>
          </tr>
      </tbody>
  </table>
  </div>

【讨论】：

这真是太棒了，有没有办法阻止显示搜索整个表的搜索？我隐藏了一些列，因此使用该列可能会使人们感到困惑。低于Show 'x' Entries

在这里找到答案：***.com/questions/1920600/…