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

Question

按照此 post 中的建议，我创建了一个 table 可以根据任何列进行过滤。

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

仅使用文档就绪功能是否有简单的解决方案？

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

$(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- jperson@website.com</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>jperson@website.com</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>(999) 999-9999 - jguy@website.com</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>jguy@website.com</td>
        <td>2021-10-14 10:20:02</td>
      </tr>
  </table>
</div>

Answer 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 - jpersons@example.com</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>jperson@example.com</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>(385) 555-6530 - jries@example.com</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>jries@example.com</td>
              <td>2021-10-14 10:20:02</td>
          </tr>
      </tbody>
  </table>
  </div>

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

How to make HTML filterable by every column (independently) using JavaScript?

javascript

html

html-table

document-ready