如何使HTML可过滤的每一列(独立)使用JavaScript?

Question

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

如何使用简单的javascript过滤html表?

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

一个简单的解决方案是可能的，只有文档准备功能?

我创建了一个版本，然后在每个列中使用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>

Answer 1

您可以使用datatable库按列进行过滤，您只需要指定列并使用方法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>