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

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
– bart cubrich, Commented Oct 20, 2021 at 18:26
It's better to render such lists from js with templates for example and then filter them with js — ZloiGoroh
– ZloiGoroh, Commented Oct 20, 2021 at 18:28
To create the "Run code snippet" you need to click the icon after picture icon, the one with <>. — Jose Lora
– Jose Lora, Commented Oct 21, 2021 at 0: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
– bart cubrich, Commented Oct 21, 2021 at 0:35

Stephen Ostermiller · Accepted Answer · 2021-10-22 08:45:50Z

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>

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
Found the answer here: stackoverflow.com/questions/1920600/…

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related