jQueryプラグインのBootgridで作った表に列ごとのフィルターを付けたい

#概要
現在jQueryプラグインのBootgridを利用して表を作成しております。
こちらの表に、列ごとに内容に応じて表示・非表示のフィルターをかけれるようにしたいと考えています。

#イメージ

こちらの表であれば、検索ボックス(Search)に相当するものをアップロード日時の行、投稿者の行の上にそれぞれ置くことで、内容をフィルタリングしたいです。

#考えたこと
①：単純にSearchのボックスを複数個作り、配置できれば検索でフィルタリングが出来るかと思いました。

②：あるいは、HTMLでボックスを作り、書いた内容をSearchの中身に追加させれればフィルタリングが出来るかと思います。

ただどちらの方法でも実装させる方法のイメージが付かず、皆さんにご助言を頂ければと投稿した次第です。

#試したこと
他にこちらのリンクの内容でも上手くいくかと思ったのですが、特にフィルタリングは出来ませんでした。
https://stackoverflow.com/questions/51831994/how-to-apply-bootgrid-filter

#参考
現状でもフィルタリングしたい内容を検索ボックスに入れることで解決は出来ますが、項目が多く、UIのためフィルターを付けることが求められています。
また、「投稿者」「ファイル名」といった項目の中身は、PHPによりデータベースから引っ張ってきています。
今回のサンプルのコードを以下に記載しております。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<link rel="stylesheet" href="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.css"/> 
6    <script src="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11/datatables.min.js"></script>
7    <script>
8jQuery(function($){
9    $("#foo-table").DataTable({
10    // 件数切替機能 無効
11    lengthChange: false,
12    // ページング機能 無効
13    paging: false
14});
15});
16    </script>
17    <title>bootgridテストページ</title>
18<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
19<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.0/js/jquery.tablesorter.min.js"></script>
20</head>
21<body>
22<table id="foo-table" class="table table-bordered">
23<thead>
24  <tr>
25    <th>アップロード日時</th>
26    <th>投稿者</th>
27    <th>ファイル名</th>
28    </thead>
29  </tr>
30    <tr>
31           <td>9/1</td>
32            <td>山田</td>
33            <td>200901共有ファイル.pdf</td>
34</tr>
35<tr>
36            <td>9/11</td>
37            <td>佐藤</td>
38            <td>200911共有ファイル修正.pdf</td>
39<tr>
40            <td>9/11</td>
41            <td>山田</td>
42            <td>社内報9月版.text</td>
43</tr>
44</div>
45</footer>
46</body>