DataTables filters for each column with multiple filter options
DataTables filters for each column with multiple filter options
bstime
Posts: 2Questions: 1Answers: 0
I have been trying to come up with a solution similar to Datatables searchBuilder but for each column, specific to the data in that column, sort of like how its done in PowerApps dynamics. I want be able to hit a filter icon, that I have created in the Datatables headers, that would dropdown or popup filter options based on that column. searchBuilder is close but I want the data part to be auto populated based on the column and just have the condition and value sections in my dropdown. like seen below
this is sort of what im looking for..
enter image description here
<table id="example" class="display nowrap" width="100%">
<thead>
<tr>
<th>Name
<div class="fliterDD">
<button class="btn" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-filter" aria-hidden="true"></i>
</button>
<div class="dropdown-menu dropdown-menu-right">
Filter in Here
</div>
</div>
</th>
<th>Position
<div class="fliterDD">
<button class="btn" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-filter" aria-hidden="true"></i>
</button>
<div class="dropdown-menu dropdown-menu-right">
Filter in Here
</div>
</div>
</th>
<th>Office
<div class="fliterDD">
<button class="btn" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-filter" aria-hidden="true"></i>
</button>
<div class="dropdown-menu dropdown-menu-right">
Filter in Here
</div>
</div>
</th>
<th>Age
<div class="fliterDD">
<button class="btn" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-filter" aria-hidden="true"></i>
</button>
<div class="dropdown-menu dropdown-menu-right">
Filter in Here
</div>
</div>
</th>
<th>Start date
<div class="fliterDD">
<button class="btn" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-filter" aria-hidden="true"></i>
</button>
<div class="dropdown-menu dropdown-menu-right">
Filter in Here
</div>
</div>
</th>
<th>Salary
<div class="fliterDD">
<button class="btn" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-filter" aria-hidden="true"></i>
</button>
<div class="dropdown-menu dropdown-menu-right">
Filter in Here
</div>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$3,120</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Director</td>
<td>Edinburgh</td>
<td>63</td>
<td>2011/07/25</td>
<td>$5,300</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$4,800</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$3,600</td>
</tr>
<tr>
<td>Jenna Elliott</td>
<td>Financial Controller</td>
<td>Edinburgh</td>
<td>33</td>
<td>2008/11/28</td>
<td>$5,300</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$4,525</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$4,080</td>
</tr>
</tbody>
</table>
<script>
$(document).ready( function () {
var reorderStart = -1; // Save start position
var table = $('#example').DataTable({
colReorder: {
enable: false
},
language: {
searchBuilder: {
button: 'Filter',
}
},
dom: 'Bfrtip',
buttons: [
{
extend: 'excelHtml5',
text: 'Export to Excel',
exportOptions: {
columns: ':visible'
}
},
'createState', 'savedStates', 'searchBuilder'
],
columns: [
{name: 'Name'},
{name: 'Position'},
{name: 'Office'},
{name: 'Age'},
{name: 'Start Date'},
{name: 'Salary'},
],
});
} );
</script>
Answers
See if thisexample gets you started. It creates a standard select input for each column based on the data in the column. You can modify it to fit your needs if you want something different.
Kevin
This example shows placing the select search elements in the header.
https://live.datatables.net/saqozowe/1828/edit
It uses
orderCellsTopto move the sort function to the top header row.Kevin
I was hoping to have the ability to select from a list of conditions like searchbuilder does on each column
SearchBuilder doesn't have any API's to utilize ite code with your own inputs. Datatables and its extensions (except Editor) are open source allowing you to modify the code. You can modify SearchBuilder to allow for your own inputs. Or you can write the code needed to support various conditions. You can find numeric and date range plugins at the bottom of this page. Also see this example. You can create search plugins or use regex expressions with
column().search()to support things like Starts With or Contains.You will also need to know the data type for the column to know when to support certain conditions like range searches.
It would not be a simple task recreate SearchBuilder functionality. You can look at the code here:
https://cdn.datatables.net/searchbuilder/1.6.0/js/dataTables.searchBuilder.js
Kevin
I just remembered there is a third party developed plugin called YADCF. You can see demos here. Give it a try to see if it does what you want.
Kevin