Following the advice in this post I have created a table that can filter based on any column.
How to filter a html table using simple javascript?
But what I would like to do is use something simple like the document ready function to create a search bar over each column so that when you search it it only applies to that column.
Is a simple solution possible with only the document ready function?
I created a version before using CSS and special tags in each column, but this had issues depending on how I later tried to format the 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- [email protected]</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>[email protected]</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 - [email protected]</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>[email protected]</td>
<td>2021-10-14 10:20:02</td>
</tr>
</table>
</div>You can filter by column with Datatables library, you just need to specify the column and use the method search and draw and create the filter input with the column id that you want to filter, like this:
$(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 - [email protected]</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>[email protected]</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 - [email protected]</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>[email protected]</td>
<td>2021-10-14 10:20:02</td>
</tr>
</tbody>
</table>
</div>