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

Question

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- 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>

Can someone tell me how to set up the "Run code snippet" option for this question? I have been trying to figure it out. Someone usually edits my question to help me out, but it would be better if I could do it myself. — bart cubrich, Oct 20 '21 at 18:26
It's better to render such lists from js with templates for example and then filter them with js — ZloiGoroh, Oct 20 '21 at 18:28
To create the "Run code snippet" you need to click the icon after picture icon, the one with `<>`. — Jose Lora, Oct 21 '21 at 00:11
Thanks for that, I can't figure out how to use document ready specifically with that, but I will work on that later. — bart cubrich, Oct 21 '21 at 00:35

score 1 · Accepted Answer · edited Oct 22 '21 at 08:45

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 - 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>

This is really great, is there a way to prevent showing the search that searches the entire table? I am hiding some of the columns, so it might confuse people to use that one. The one that is below `Show 'x' Entries` — bart cubrich, Oct 21 '21 at 16:44
Found the answer here: https://stackoverflow.com/questions/1920600/how-can-i-remove-the-search-bar-and-footer-added-by-the-jquery-datatables-plugin — bart cubrich, Oct 21 '21 at 17:09

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

1 Answers1