I'm making a datatable with a status column. And I'm looking into making the possibility to search on icons. So if someone types: "open" in the search box, it should show all the rows with the icon "open" (the clock one).
What is the best way to deal with this "problem"?
I would love to hear from you guys!
Using datatables with the bootstrap theme.
var table = $('.table').DataTable({
"order": [
[0, 'asc']
],
"columnDefs": [{
"visible": false,
"targets": 0
}],
"language": {
"lengthMenu": "_MENU_ Regels per pagina",
"zeroRecords": "Niks gevonden",
"info": "Pagina _PAGE_ van _PAGES_",
"infoEmpty": "Geen data beschikbaar",
"infoFiltered": "(gefilterd van _MAX_ totale records)",
"search": "",
"paginate": {
"previous": "Vorige",
"next": "Volgende"
}
},
"lengthMenu": [
[10, 25, 50, -1],
[10, 25, 50, "All"]
]
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<table class="table dataTable no-footer" style="height: 100px; width: 892px;" id="DataTables_Table_0" role="grid" aria-describedby="DataTables_Table_0_info">
<thead class="thead-light">
<tr role="row">
<th scope="col" class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" style="width: 47px;" aria-label="ID: activate to sort column ascending" width="10%">ID</th>
<th scope="col" class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" style="width: 314px;" aria-label="Bedrijf: activate to sort column ascending" width="40%">Bedrijf</th>
<th scope="col" class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" style="width: 314px;" aria-label="Datum: activate to sort column ascending" width="40%">Datum</th>
<th scope="col" class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" style="width: 49px;" aria-label="Status: activate to sort column ascending" width="10%">Status</th>
</tr>
</thead>
<tbody>
<tr class="align-middle regist odd" id="148" role="row">
<td>148</td>
<td id="name">h</td>
<td id="date">2019-01-28 09:42:23</td>
<td id="status"><i class="fas fa-star text-success" data-toggle="tooltip" data-placement="top" title="" data-original-title="Nieuwe inschrijving!"></i></td>
</tr>
<tr class="align-middle regist even" id="149" role="row">
<td>149</td>
<td id="name">g</td>
<td id="date">2019-01-28 09:46:04</td>
<td id="status"><i class="fas fa-star text-success" data-toggle="tooltip" data-placement="top" title="" data-original-title="Nieuwe inschrijving!"></i></td>
</tr>
<tr class="align-middle regist odd" id="150" role="row">
<td>150</td>
<td id="name">h</td>
<td id="date">2019-01-28 09:50:29</td>
<td id="status"><i class="fas fa-star text-success" data-toggle="tooltip" data-placement="top" title="" data-original-title="Nieuwe inschrijving!"></i></td>
</tr>
<tr class="align-middle regist even" id="151" role="row">
<td>151</td>
<td id="name">h</td>
<td id="date">2019-01-28 09:51:23</td>
<td id="status"><i class="fas fa-star text-success" data-toggle="tooltip" data-placement="top" title="" data-original-title="Nieuwe inschrijving!"></i></td>
</tr>
<tr class="align-middle regist odd" id="152" role="row">
<td>152</td>
<td id="name">jk</td>
<td id="date">2019-01-28 09:52:55</td>
<td id="status"><i class="fas fa-star text-success" data-toggle="tooltip" data-placement="top" title="" data-original-title="Nieuwe inschrijving!"></i></td>
</tr>
<tr class="align-middle regist viewed even" id="139" role="row">
<td>139</td>
<td id="name">Kringloop Het Tweedekansje</td>
<td id="date">2019-01-24 17:31:05</td>
<td id="status"><i class="fas fa-lock text-warning" data-toggle="tooltip" data-placement="top" title="" data-original-title="Vergrendelde inschrijving"></i></td>
</tr>
<tr class="align-middle regist viewed odd" id="140" role="row">
<td>140</td>
<td id="name">Service ICT</td>
<td id="date">2019-01-24 19:37:01</td>
<td id="status"><i class="far fa-clock text-dark" data-toggle="tooltip" data-placement="top" title="" data-original-title="Open inschrijving"> </i></td>
</tr>
<tr class="align-middle regist viewed even" id="146" role="row">
<td>146</td>
<td id="name">76</td>
<td id="date">2019-01-25 09:58:58</td>
<td id="status"><i class="fas fa-lock text-warning" data-toggle="tooltip" data-placement="top" title="" data-original-title="Vergrendelde inschrijving"></i></td>
</tr>
<tr class="align-middle regist viewed odd" id="147" role="row">
<td>147</td>
<td id="name">hj</td>
<td id="date">2019-01-28 09:41:45</td>
<td id="status"><i class="far fa-clock text-dark" data-toggle="tooltip" data-placement="top" title="" data-original-title="Open inschrijving"> </i></td>
</tr>
<tr class="align-middle regist viewed even" id="153" role="row">
<td>153</td>
<td id="name">hgjgh</td>
<td id="date">2019-01-28 09:54:37</td>
<td id="status"><i class="far fa-clock text-dark" data-toggle="tooltip" data-placement="top" title="" data-original-title="Open inschrijving"> </i></td>
</tr>
</tbody>
</table>
